Month: November 2016

Progressbar and slider

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>jQuery UI</title>
    <link rel="stylesheet" href="jquery-ui.min.css">
    <script src="./external/jquery/jquery.js"></script>
    <script src="jquery-ui.min.js"></script>
    <style>
    .ui-selected {
      background: red;
    }
  </style>
  </head>
  <body>
  <div id="bar" style="width:200px"></div>
  <div id="slider" style="width:200px; margin-top:20px"></div>

  <script>
    $(function(){
      $('#bar').progressbar({
          value: 0
      });
      $('#slider').slider({
        slide: function(event, ui){
          console.log(ui.value);
          $('#bar').progressbar('option', 'value', ui.value);
        }
      });
      });
  </script>
  </body>
</html>

Datepicker

Datepickerは表示する日付を制限できます。例:上の動画のように、本日から1カ月先まで
minDate:0,
maxDate: “+1M”

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>jQuery UI</title>
    <link rel="stylesheet" href="jquery-ui.min.css">
    <script src="./external/jquery/jquery.js"></script>
    <script src="jquery-ui.min.js"></script>
    <style>
    .ui-selected {
      background: red;
    }
  </style>
  </head>
  <body>
  <input type="text" id="datepicker">

  <script>
    $(function(){
        $('#datepicker').datepicker({
          dateFormat: "yy-mm-dd",
          minDate:0,
          maxDate: "+1M"
        });
      });
  </script>
  </body>
</html>

dialog

<body>
  <button>open!</button>
  <div id="msg">こんにちは。
  </div>

  <script>
    $(function(){
        $('button').click(function(){
          $('#msg').dialog('open');
        });
        $('#msg').dialog({
          autoOpen: false,
          buttons: {
            "ok": function (){
              $(this).dialog('close');
            }
          },
          title: "title",
          modal: true
        });
      });
  </script>
  </body>

Accordion

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>jQuery UI</title>
    <link rel="stylesheet" href="jquery-ui.min.css">
    <script src="./external/jquery/jquery.js"></script>
    <script src="jquery-ui.min.js"></script>
    <style>
    .ui-selected {
      background: red;
    }
  </style>
  </head>
  <body>
  <div id="accordion">
  <h3><a href="">title</a></h3>
  <div>こんにちは。</div>
  <h3><a href="">title</a></h3>
  <div>こんにちは。</div>
  <h3><a href="">title</a></h3>
  <div>こんにちは。</div>
  <h3><a href="">title</a></h3>
  <div>こんにちは。</div>
  </div>
  <script>
    $(function(){
        $('#accordion').accordion();
      });
  </script>
  </body>
</html>

autocomplete

 <script>
    $(function(){
        var langs = ["ja", "en", "cn", "fr", "sp"];
        $('#langs').autocomplete({
            source: langs
        });
      });
  </script>

Sortable

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>jQuery UI</title>
    <link rel="stylesheet" href="jquery-ui.min.css">
    <script src="./external/jquery/jquery.js"></script>
    <script src="jquery-ui.min.js"></script>
    <style>
    .ui-selected {
      background: red;
    }
  </style>
  </head>
  <body>
  <ul id="sortable">
  <li id="item_1">item1</li>
  <li id="item_2">item2</li>
  <li id="item_3">item3</li>
  <li id="item_4">item4</li>
  <li id="item_5">item5</li>
  </ul>
  <script>
    $(function(){
       $('#sortable').sortable({
        cursor: 'move',
        opacity: 0.5,
        update: function(event, ui){
          $(this).sortable("serialize");
        }
       });
      });
  </script>
  </body>
</html>

Resizable

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>jQuery UI</title>
    <link rel="stylesheet" href="jquery-ui.min.css">
    <script src="./external/jquery/jquery.js"></script>
    <script src="jquery-ui.min.js"></script>
    <style>
    .box {
    width: 100px;
    height: 100px;
    background: red;
    }
  </style>
  </head>
  <body>
  <div class="box">box</div>
  <script>
    $(function(){
      $('.box').draggable().resizable({
        handles: 'all',
        //aspectRatio: true
        stop: function (event, ui){
          console.log(ui.size.hight, ui.size.width);
        }
         });
      });
  </script>
  </body>
</html>

Selected

<script>
    $(function(){
       var selected = new Array();
       $('#selectable').selectable({
         selected: function(event, ui){
          selected.push(ui.selected.id);
          console.log(selected);
         },
         unselected: function(event, ui){
           var id = ui.unselected.id;
           selected.splice(selected.indexOf(id), 1);
           console.log(selected);
         }
       });
      });
  </script>

Droppable

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>jQuery UI</title>
    <link rel="stylesheet" href="jquery-ui.min.css">
    <script src="./external/jquery/jquery.js"></script>
    <script src="jquery-ui.min.js"></script>
    <style>
    .box {
    width: 50px;
    height: 50px;
    background: #ccc;
    margin-bottom: 20px;
    }
    .target {
      width: 100px;
      height: 100px;
      background: pink;
    }
  </style>
  </head>
  <body>
  <div class="box">box</div>
  <div class="target">target</div>
  <script>
    $(function(){
      $('.box').draggable();
      $('.target').droppable({
        accept: '.box',
        drop: function(event, ui){
          console.log('dropped!');
        }
      });
      });
  </script>
  </body>
</html>

ui追加

    $(function(){
      $('.box').draggable({
        helper: 'clone'
      });
      $('.target').droppable({
        accept: '.box',
        hoverClass: 'hover',
        tolerance: 'fit',
        drop: function(event, ui){
          ui.draggable.clone().appendTo(this);
          console.log('dropped!');
        }
      });
      });

jQuery Draggable

jQuery UIのHPより、ひな形をダウンロードします。
jQueryUI

draggableは以下のように書きます。
$(function(){
$(‘#hoge’).draggable();
}); 

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>jQuery UI</title>
    <link rel="stylesheet" href="jquery-ui.min.css">
    <script src="./external/jquery/jquery.js"></script>
    <script src="jquery-ui.min.js"></script>
    <style>
    #box {
    width: 100px;
    height: 100px;
    background: green;
    }
  </style>
  </head>
  <body>
  <div id="box">box</div>

  <script>
    $(function(){
      $('#box').draggable();
    });    
  </script>
  </body>
</html>

設定、イベント

$(function(){
      $('#box').draggable({
        // axis: 'x'
        opacity: 0.5,
        // handle: '.handle'
        drag: function(event, ui){
          console.log(ui.position);
        }
      });
    });

jQuery plug-in 作成

jQueryのプラグイン作成に、fn.extend()を使います。
jQuery.fn.extend():Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.
https://api.jquery.com/jquery.fn.extend/

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>jQuery plugin</title>
  </head>
  <body>
      <p><img src="image01.jpg"></p>
      <p><img src="image02.jpg"></p>
      <p><img src="image03.jpg"></p>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
      <script src="jquery.showsize.js"></script>
      <script>
        $(function(){
          $('img').showsize({
            size: 22,
            opacity: 0.9
          });
        });
      </script>
  </body>
</html>

;(function($){
	$.fn.showsize = function(options){
		var elements = this;

		elements.each(function(){

			var opts = $.extend({}, $.fn.showsize.defaults, options, $(this).data());
			$(this).click(function(){
            var msg = $(this).width() + ' x ' + $(this).height();
            $(this).wrap('<div style="position:relative;"></div>');
            var div = $('<div>')
                    .text(msg)
                    .css('position', 'absolute')
                    .css('top', '0')
                    .css('padding', '2px')
                    .css('background', getRandomColor())
                    .css('font-size', opts.size +'px')
                    .css('color','white')
                    .css('opacity',opts.opacity);
            $(this).after(div);
          });

		});

		return this;
	};

	function getRandomColor(){
		var colors = ['red', 'pink', 'orange', 'green', 'blue'];
		return colors[Math.floor(Math.random()* colors.length)];
	}

	$.fn.showsize.defaults = {
		size: 10,
		opacity: 0.8
	};
})(jQuery);

jQuery mobile demo

リフェレンス：http://api.jquerymobile.com/data-attribute/

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>D3.js</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
      <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
      <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
      <div data-role="page" id="home">
        <div data-role="header" data-position="fixed">
          <a href="#menu" data-icon="gear">左</a>
          <h1>ホーム</h1>
          <a href="#menu" data-icon="check" class="ui-btn-right">右</a>
        </div>
        <div data-role="content">
          <p>こんにちは！</p>
          <p><a href="#home" data-role="button">ホーム</a></p>
          <p><a href="#menu" data-role="button" data-theme="b">メニュー</a></p>

          <div data-role="content">
            <ul data-role="listview" data-filter="true">
            <li data-role="list-divider">日本語</li>
              <li><a href="#menu">赤いページ<span class="ui-li-count">23</span></a></li>
              <li><a href="#menu">青いページ</a></li>
              <li><a href="#menu">黄色いページ</a></li>
              <li data-role="list-divider">英語</li>
              <li><a href="#menu">Red<span class="ui-li-count">23</span></a></li>
              <li><a href="#menu">Blue</a></li>
              <li><a href="#menu">Yellow</a></li>
            </ul>
          </div>
          <form action="mail.php" method="post">
              <div data-role="fieldcontain">
                <label for="name">お名前</label>
                <input type="text" name="name" id="name" value="">
              </div>

              <div data-role="fieldcontain">
                <label for="keywords">検索</label>
                <input type="search" name="keywords" id="keywords" value="">
              </div>

              <div data-role="fieldcontain">
                <label for="amount">数量</label>
                <input type="range" name="amount" id="amount" min="0" max="100" value="">
              </div>

              <div data-role="fieldcontain">
                <fieldset data-role="controlgroup">
                  <legend>色</legend>
                  <input type="checkbox" name="color_1" id="color_1">
                  <label for="color_1">赤</label>
                  <input type="checkbox" name="color_2" id="color_2">
                  <label for="color_2">青</label>
                  <input type="checkbox" name="color_3" id="color_3">
                  <label for="color_3">黄</label>
                </fieldset>
              </div>

              <div data-role="fieldcontain">
                <fieldset data-role="controlgroup">
                  <legend>色</legend>
                  <input type="radio" name="color" value="1" id="1" checked="checked">
                  <label for="1">赤</label>
                  <input type="radio" name="color" value="2" id="2">
                  <label for="2">青</label>
                  <input type="radio" name="color" value="3" id="3">
                  <label for="3">黄</label>
                </fieldset>
              </div>

              <div data-role="fieldcontain">
                <label for="color">色</label>
                <select name="color" id="color" data-native-menu="false" multiple="">
                  <option value="1">赤</option>
                  <option value="2" selected>青</option>
                  <option value="3">黄</option>
                </select>
              </div>

              <input type="submit" value="送信!">
            </form>
        </div>
        <div data-role="footer" data-position="fixed">
          <div data-role="navbar">
            <ul>
                <li><a href="#menu" class="ui-btn-active">メニュー1</a></li>
                <li><a href="#menu">メニュー2</a></li>
                <li><a href="#menu">メニュー3</a></li>
            </ul>
          </div>
        </div>
      </div>

      <div data-role="page" id="menu" data-add-back-btn="true">
        <div data-role="header">
          <h1>メニュー</h1>
        </div>
        <div data-role="content">
          <p>こんにちは！</p>
          <p><a href="#home">ホーム</a></p>
          <p><a href="#menu">メニュー</a></p>
        </div>
        <div data-role="footer" class="ui-bar">
          <a href="#menu" data-icon="plus">追加</a>
          <a href="#menu" data-icon="delete">削除</a>
          <h4>copyright 2016</h4>
        </div>
      </div>
  </body>
</html>

jQuery mobile data-attribute

data-attribute: http://api.jquerymobile.com/data-attribute/

slideup

        <div data-role="content">
          <p>こんにちは！</p>
          <p><a href="#home">ホーム</a></p>
          <p><a href="#menu" data-transition="slideup">メニュー</a></p>
        </div>

ボタン:icon(http://api.jquerymobile.com/icons/)

<div data-role="controlgroup" data-type="horizontal">
          <p><a href="#menu" data-role="button" data-icon="gear" data-inline="true">
          メニュー</a></p>
          <p><a href="#menu" data-role="button" data-icon="gear" data-inline="true">
          メニュー</a></p>
          <p><a href="#menu" data-role="button" data-icon="gear" data-inline="true">
          メニュー</a></p>
          </div>

theme(http://api.jquerymobile.com/theme/)

<div data-role="content">
          <p>こんにちは！</p>
          <p><a href="#home" data-role="button">ホーム</a></p>
          <p><a href="#menu" data-role="button" data-theme="b">メニュー</a></p>
        </div>

header button

<div data-role="content">
          <p>こんにちは！</p>
          <p><a href="#home" data-role="button">ホーム</a></p>
          <p><a href="#menu" data-role="button" data-theme="b">メニュー</a></p>
        </div>

footer

<div data-role="footer" class="ui-bar">
          <div data-role="controlgroup" data-type="horizontal">
          <a href="#menu" data-icon="plus">追加</a>
          <a href="#menu" data-icon="delete">削除</a>
          </div>
        </div>

フッター、ヘッダーナビゲーション

<div data-role="footer">
          <div data-role="navbar">
            <ul>
                <li><a href="#menu" class="ui-btn-active">メニュー1</a></li>
                <li><a href="#menu">メニュー2</a></li>
                <li><a href="#menu">メニュー3</a></li>
            </ul>
          </div>
        </div>

ヘッダー、フッター固定

<div data-role="header" data-position="fixed">
<div data-role="footer" data-position="fixed">

form, 検索、スライダー

<form action="mail.php" method="post">
              <div data-role="fieldcontain">
                <label for="name">お名前</label>
                <input type="text" name="name" id="name" value="">
              </div>

              <input type="submit" value="送信!">
            </form>
<div data-role="fieldcontain">
                <label for="keywords">検索</label>
                <input type="search" name="keywords" id="keywords" value="">
              </div>

<div data-role="fieldcontain">
                <label for="amount">数量</label>
                <input type="range" name="amount" id="amount" min="0" max="100" value="">
              </div>