今日の人気記事

まだデータがありません。

リストアイテムを2つのボックスに分類「ListBoxSelector」

当ページのリンクには広告が含まれています。

スポンサーリンク

リストアイテムを2つのボックスに分類してくれるプラグイン「ListBoxSelector」を紹介します。

jQueryプラグイン「ListBoxSelector」

このプラグインを使えば、リストアイテムを左右の2つのボックスに用意されたボタンをクリックすることで、分類することができます。

オプションでは「リストアイテム」「ボタンのテキスト」……などを設定することができます。

スポンサーリンク

それではデモページのリストアイテムを分類してみてください。

「ListBoxSelector」のデモ

ソース( HTML + jQuery )


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="ListBoxSelector のデモでーす。">
<title>ListBoxSelector - jQueryプラグイン</title>
<link href="listboxselector.css" rel="stylesheet" type="text/css" />
<style>
.lb-move-buttons {
    width: 180px;
}
.lb-selector-block-buttons {
  width: 200px;
}
</style>
</head>
<body>

<div id="demo"></div>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.listboxselector.js"></script>
<script>
$("#demo").listboxselector({
  availableOptions: ["アイテム 1", "アイテム 2", "アイテム 3", "アイテム 4"],
  buttonTextAllRight: ">> ぜんぶ右へ",
  buttonTextSelectedRight: "> 選択したものを右へ",
  buttonTextSelectedLeft: "< 選択したものを左へ",
  buttonTextAllLeft: "<< ぜんぶ左へ"
});
</script>

</body>
</html>
スポンサーリンク

関連記事(一部広告含む)