選択結果を確認できる複数項目選択GUI

jQuery UI の Selectable プラグインを使った、複数項目選択 GUI で、選択した結果を表示し、確認できるようにする方法。項目をクリックすると、項目を選択できる。選択した項目は、文字色と背景色を反転させ目立たせる。さらに、選択リストのボックスの上に、選択した項目名を表示する。
「Ctrl」キーを押しながら、項目をクリックすると、複数の項目を選択できる。複数の項目を選択した場合も、選択ボックスの上に、選択した複数の項目名をカンマ(,)区切りで表示する。

実装例(サンプル)

選択した項目: なし

  • 項目 1 ,
  • 項目 2 ,
  • 項目 3 ,
  • 項目 4 ,
  • 項目 5 ,
  • 項目 6 ,
  • 項目 7 ,

実装例の動作について

  • 「項目 1」をクリックすると、「項目 1」の色が反転し、選択状態となる。選択リストのボックスの上の「選択した項目: 」の右横に、「項目 1 , 」と表示する。
  • 「項目 3」の上でクリックしたまま、「項目 5」の上までカーソルを動かしクリックを解除すると、「項目 3」「項目 4」「項目 5」の色が反転し、選択状態となる。選択リストのボックスの上の「選択した項目: 」の右横に、「項目 3 , 項目 4 , 項目 5 , 」と表示する。
  • 「項目 2」をクリックし、「項目 2」の色を反転させ選択状態とし、「Ctrl」キーを押しながら、「項目 5」と「項目 7」をクリックすると、「項目 2」「項目 5」「項目 7」の色が反転し、選択状態となる。選択リストのボックスの上の「選択した項目: 」の右横に、「項目 2 , 項目 5 , 項目 7 , 」と表示する。

実装例のソースコード

読み込み

読み込み方は、2種類ある。パスは、それぞれ、アップロードした場所を指定する。

まとめて読み込む場合
<link rel="stylesheet" href="themes/base/jquery.ui.all.css">
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ui/jquery-ui-1.8.12.custom.min.js"></script>
個別に読み込む場合
<link rel="stylesheet" href="themes/base/jquery.ui.all.css">
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="ui/jquery.ui.selectable.js"></script>

JavaScript

<script>
<!--
jQuery( function() {
    jQuery( '#jquery-ui-selectable' ) . selectable( {
        stop: function() {
            jQuery( '#jquery-ui-selectable-selected' ) . text( jQuery( '.ui-selected' ) . text() );
        }
    } );
} );
// -->
</script>

CSS

<style>
<!--
#jquery-ui-selectable .ui-selecting {
    background: #cccccc;
}
#jquery-ui-selectable .ui-selected {
    background: #888888;
    color: white;
}
#jquery-ui-selectable {
    list-style-type: none;
    margin: 0;
    padding: 1em;
    width: 60%;
    border-radius: 15px;
    background: #f0f0f0;
}
#jquery-ui-selectable li {
    margin: 3px;
    padding: 2px 1em;
    font-size: 15px;
    background: #e5e5e5;
    color: #666666;
}
#jquery-ui-selectable li span {
    display: none;
}
-->
</style>

HTML

<p>選択した項目: <span id="jquery-ui-selectable-selected">なし</span></p>
<ul id="jquery-ui-selectable" class="ui-widget-content">
    <li class="ui-widget-content">項目 1<span> , </span></li>
    <li class="ui-widget-content">項目 2<span> , </span></li>
    <li class="ui-widget-content">項目 3<span> , </span></li>
    <li class="ui-widget-content">項目 4<span> , </span></li>
    <li class="ui-widget-content">項目 5<span> , </span></li>
    <li class="ui-widget-content">項目 6<span> , </span></li>
    <li class="ui-widget-content">項目 7<span> , </span></li>
</ul>

スポンサード リンク

カテゴリー: GUI, JavaScript, jQuery, jQuery UI, Selectable パーマリンク