YAML

YAMLは構造化されたデータの表現記法で、シンプルに記述することが可能です。スカラー(値)、シーケンス(配列)、マッピング(ハッシュ：key/value)のデータを扱います。

require 'yaml'
emails = YAML.load_file('mydata.yml')
p emails

- yamada@gmail.com
- nakamura@gmail.com
- saitou@gmail.com

[vagrant@localhost mustache]$ ruby parse.rb
["yamada@gmail.com", "nakamura@gmail.com", "saitou@gmail.com"]

シーケンス

[a, b, c]
- a
- 
  - b-1
  - b-2
- c

ハッシュ

name: yamada
score: 90
{name: yamamoto, score: 88}

name: igarashi
score:
  game-1: 30
  game-2: 35

複雑なデータ構造

names:
  - yamada
  - ito
scores:
   - 70
   - 77

names: [yamada, ito]
scores: [70, 77]

- name: yamada
 score: 70
- name: ito
 score: 77

改行

- |+
 this
 is
 a
 pen.

変更

- &leader tanaka
- *leader
- $staff sasaki
- *staff
- *staff
- *staff
- *staff

ハッシュのマージ

common: &common
    user: dbuser
    password: dbpassword
development:
  database: myapp_dev
  <<: *common
production:
  database: myapp_prod
  <<: *common
test:
  database: myapp_test
  <<: *common

ファイル読み出し

require 'yaml'

File.open('mydata.yml') do |io|
 YAML.load_documents(io) do |d|
    p d
  end
end

yamlへの変換を教えてくれる命令です。
puts users.to_yaml

Tabs

<!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="tabs">
  
  <ul>
    <li><a href="#menu1">Menu1</a></li>
    <li><a href="#menu2">Menu2</a></li>
    <li><a href="#menu3">Menu3</a></li>
  </ul>

  <div id="menu1">menu 1</div>
  <div id="menu2">menu 2</div>
  <div id="menu3">menu 3</div>
  </div>
  <script>
    $(function(){
      $('#tabs').tabs();
      });
  </script>
  </body>
</html>

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);