「Bootstrap Dual Listbox」は左右に並んだリストボックス間でアイテムの出し入れが出来るUIを実現するjQueryプラグインです。

Bootstrap Dual Listbox

こういった機能をなんと呼ぶのでしょうか。Dual Listboxという名はしっくり来るのですが、日本語名が思いつきませんでした。「Bootstrap Dual Listbox」はレスポンシブデザインにも対応しており、多くのブラウザ、スマホのタッチアクションにも対応しているとのことです。

 

このように左右にボックスが並んでいます。Option1をクリックしてみます。

 

このとおり右側に移りました。１クリックでサクッと右側に移る動作の軽さが心地よいです。

 

どんどんクリック。サクサク動く感じがとても気持ちいい。

 

この部分をクリックすると全てのアイテムを右側に一括移動できます。

 

 

このとおりです。

 

またフィルタリング機能も備えています。

 

 

それでは「Bootstrap Dual Listbox」の実装方法をご紹介します。まずは外部ファイルを読み込みます。

<link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" media="all">
<link href="bootstrap-duallistbox/bootstrap-duallistbox.css" rel="stylesheet" type="text/css" media="all">
<script src="libraries/jquery-1.9.0.min.js"></script>
<script src="bootstrap-duallistbox/jquery.bootstrap-duallistbox.js"></script>

 

HTMLはこのようにマークアップします。

<div class="row-fluid">
  <div class="span12">
    <select multiple="multiple" size="10" name="duallistbox_demo1">
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
      <option value="option4">Option 4</option>
      <option value="option5">Option 5</option>
      <option value="option6">Option 6</option>
      <option value="option7">Option 7</option>
      <option value="option8">Option 8</option>
      <option value="option9">Option 9</option>
      <option value="option0">Option 10</option>
    </select>
  </div>
</div>

 

JavaScriptはこのように実装します。HTMLのselectタグで指定したname属性値をセレクタで指定しましょう。

var demo1 = $('[name=duallistbox_demo1]').bootstrapDualListbox();

 

するとこのように作ることができました。

 

フォームのUI部品として使えそうですね。参考にどうぞ。