yamashiro0110の日記

yamashiro0110の日記です。おもにIT技術のメモを綴っていきます(^o^)

jQuery-UIのSelectableを使ってみたのでめも

  • サンプルコード
    • 公式のデモから、ほぼパクってきた・・・
<html>
<head>
<title>selectable</title>
<!-- 必要なcss,jsの読み込み -->
<link rel="stylesheet" type="text/css" href="/css/jquery-ui-1.10.4.custom.min.css">
<script src="/js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="/js/jquery-ui-1.10.4.custom.min.js" type="text/javascript"></script>

<!-- スタイルの設定 -->
<style type="text/css">

/* 選択中のリスト */
#selectable .ui-selecting {
    background: #FECA40;
}

/* 選択後のリスト */
#selectable .ui-selected {
    background: #F39814;
    color: white;
}

/* リスト全体 */
#selectable {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 700px;
}

/* 個々のリスト */
#selectable li {
    margin: 3px;
    padding: 0.4em;
    font-size: 1.4em;
    height: 18px;
}

/* 個々のリストにhoverした時 */
.ui-widget-content:hover {
    /*background-color: #308298;*/
}

</style>
<script>
$(function() {
    // セレクタを生成
    // startとstopの引数"ui"には空のオブジェクトが渡されるが、ほかのイベントとの一貫性を保つために定義されてるらしい(多分・・・)
    // > http://api.jqueryui.com/selectable/#event-start, http://api.jqueryui.com/selectable/#event-stop
    $('#selectable').selectable({
        // 選択操作を開始したとき
        start: function(event, ui) {
            console.log('selectable start');
        },
        // 選択操作を終了したとき
        stop: function(event, ui) {
            console.log('selectable stop');
        },
        // 選択が完了したとき
        selected: function( event, ui ) {
            // 選択された要素の値を取得
            console.log('selectable selected:'+ $(ui.selected).val());
        }
    });
});
</script>
</head>
<body>
<h1>selectable</h1>
<hr>

<ul id='selectable'>
    <li class="ui-widget-content" value="1">Item 1</li>
    <li class="ui-widget-content" value="2">Item 2</li>
    <li class="ui-widget-content" value="3">Item 3</li>
    <li class="ui-widget-content" value="4">Item 4</li>
    <li class="ui-widget-content" value="5">Item 5</li>
    <li class="ui-widget-content" value="6">Item 6</li>
</ul>

</body>
</html>

$('#selectable')selectable({})内でイベントを実装するとき　
start: function(event, ui) {}, stop: function(event, ui) {}のように
「,」で区切らないとダメってのを知らなくて少しハマった。

これってオブジェクトリテラルっていうんすね、勉強になりました^^;