SQLの窓

2018年01月26日


jQuery プラグイン : multiselect.js の使用方法とカスタマイズ

multiselect.js のダウンロードページ

( js と css と画像を同じフォルダに置いて、css 内の 画像の位置を変更して使います )
.ms-container{
  background: transparent url('./switch.png') no-repeat 50% 50%;
  width: 370px;
}


設置が簡単な multiselect.js ですが、( select 要素を選択するだけで標準的なリストを左右二つ作成してくれます )実際使うとなると、横幅や高さやパディングの調整は必要です。

さらに、デフォルトでは選択するリストが左側と決まっていますが、これは float で作成されているので、左右を入れ替えるだけで右側を選択できるようにできます
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="http://winofsql.jp/jquery/plugins/multiselect/jquery.multi-select.js"></script>
<link rel="stylesheet" href="http://winofsql.jp/jquery/plugins/multiselect/multi-select.css" type="text/css" />
<script type="text/javascript">
$(function(){
	$('#select_item').multiSelect({
		keepOrder: true,
		selectableHeader: "<div class='header_item'>商品候補</div>",
		selectionHeader: "<div class='header_item'>対象商品</div>",
		afterSelect: function(values){
			console.log( values[0] )
			console.log( $( "#select_item").children( "option[value='"+values+"']" ).text() )
		},
		afterDeselect: function(values){
			console.log( values[0] )
			console.log( $( "#select_item").children( "option[value='"+values+"']" ).text() )
		}
})
});
</script>
<style>
.header_item {
	padding: 5px;
	text-align: center;
	border: solid 1px #ccc;
	margin-bottom:2px;
	background-color: #eee;
}
.ms-container {
	width: 600px;
}
.ms-container .ms-selectable li.ms-elem-selectable, .ms-container .ms-selection li.ms-elem-selection {
	padding: 10px;;
}
.ms-container ul.ms-list{
  height: 300px;
}
/* 
	以下は、左右入れ替える為の CSS
	以下を設定しなければ、デフォルト仕様として左が選択可能になります   
*/
.ms-container .ms-selectable {
	float: right;
}
.ms-container .ms-selection {
	float: left;
}

</style>
<form
	method="get"
	id="target_form"
	target="my_ferame"
	action="http://winofsql.jp/php_get.php"
	accept-charset="utf-8">

	<input
		type="submit"
		name="send"
		id="send_check"
		value="送信">

	<select 
		multiple
		id="select_item"
		name="select_item[]">

		<option value='0001'>りんご</option>
		<option value='0002'>トマト</option>
		<option value='0003'>いくら</option>
		<option value='0004'>醤油</option>
		<option value='0005'>鳥唐揚</option>
		<option value='0006'>みりん</option>
		<option value='0007'>さんま</option>
		<option value='0008'>海苔</option>
		<option value='0009'>おにぎり</option>
		<option value='0010'>コロッケ</option>

	</select>
</form>
<br>
<iframe
	name="my_ferame"
	frameborder="1"
	scrolling="yes"
	width="600"
	height="200"></iframe>
キーも割り当てられていて、左右の矢印キーでリスト間移動ができ、上下矢印キーでリスト内を移動できます。
選択はスペースキーです。

イベント内(afterSelect と afterDeselect)では、values が引数となっていますが、上のソースでは、jQuery の セレクタで再度 SELECT 要素内の選択された OPTION のテキストも取得しています。
values は配列で定義されているので、values[0] として値を取得していますが、文字列と連結する場合はオリジナルサンプルでも直接使っていました
真ん中の矢印は画像なので、自作のものと置き換え可能です。 cssClass オプションの使い方 このオプションは、個別にクラスを実際定義するのでは無くコンテナにクラスを追加して個別にスタイル設定を可能にできるという意味があります。デフォルトでは、スタイルは全て ms-container というクラス名を先頭にしてセレクタが作成されているので、コンテナにクラスを追加すると、以下のような設定で cssClass に設定したクラス名を使用して個別に見栄えを変更できます。 このページでは、ms-container でクラス設定するように記述しているので、全ての multiSelect コンテンツが対象になりますが、デモ先では cssClass オプションを設定した multiSelect コンテンツ のみが設定されるようにしています。 cssClassselect_item を設定
<style>
.select_item {
	width: 600px;
}
.select_item .ms-selectable li.ms-elem-selectable, .select_item .ms-selection li.ms-elem-selection {
	padding: 10px;;
}
.select_item ul.ms-list{
  height: 300px;
}
/* 左右入れ替え */
.select_item .ms-selectable {
	float: right;
}
.select_item .ms-selection {
	float: left;
}
</style>

refresh メソッドの使い方

オリジナルページの説明には無い、refresh メソッドの意味なのですが、ソースコードを読んでみると最初に設定したオプションの状態でコンテンツを再構築していました。但し、SELECT 要素の現在の状態で再構築するので、見た目は変化ありません。

本来、最初に設定したオプションを変更してから実行すべきメソッドなのですが、オプション内容を変更する為のメソッドが用意されていません。ですが、内部で保持されているオプションの参照として、jQuery の data() メソッドで参照できる内容を使用できました。

これを使用すると、後から動的にスタイル設定やその他の設定を変更する事ができます。デモ先では、見栄えのスタイル設定を交互に変更しています( ソースもページ下部にあります )


	// ************************
	// CSS の切り替え
	// ************************
	$('#change_css').click(function(){
		var item1 = $("#select_item").data().multiselect.options.cssClass;
		if ( item1 == "target_item" ) {
			$("#select_item").data().multiselect.options.cssClass = "";	
			$("#select_item2").data().multiselect.options.cssClass = "target_item";
		}
		else {
			$("#select_item").data().multiselect.options.cssClass = "target_item";	
			$("#select_item2").data().multiselect.options.cssClass = "";
		}
		$('#select_item').multiSelect("refresh");
		$('#select_item2').multiSelect("refresh");
	});


ライセンスについて

WTFPL は、とても下品なライセンスですが、とても自由に使えるライセンスなのであまり気にしないでいいと思います。



【プラグイン:jQueryの最新記事】
posted by lightbox at 2018-01-26 15:32 | プラグイン:jQuery | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり