Three.jsを使って、作ってみた

プログラミング関連の事を色々書いています（＾＾）　週末はレストランやコンビニのお菓子のことを書いています。

jQuery UI Selectable

jQuery UI

今回は、jQuery UIの「Selectable」について書きます。


Selectableは、複数の要素を選択可能にするGUIです。
要素をクリックすると、その要素を選択できます。また、選択した要素は、文字色と背景色を反転させて目立たせれます。


このように使います。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>jQuery UI</title>
	<link rel="stylesheet" href="css/smoothness/jquery-ui-1.10.4.custom.min.css">
	<script src="js/jquery-1.10.2.js"></script>
	<script src="js/jquery-ui-1.10.4.custom.min.js"></script>
</head>
<body>

	<ul id="selectable">
		<li id="y1">要素1</li>
		<li id="y2">要素2</li>
		<li id="y3">要素3</li>
		<li id="y4">要素4</li>
		<li id="y5">要素5</li>
	</ul>
	
	<style>
		.ui-selected{
			background: red;
		}
	</style>
<script>
$(function() {

	$('#selectable').selectable();

});
</script>
</body>
</html>

実行例↓
f:id:gupuru:20140210185726p:plain

項目を選択すると、背景が赤に変わります↓
f:id:gupuru:20140210185736p:plain


「.ui-selected 」で該当するリストを取り出すことができます。
今回は、選択したものの背景を赤色にしています。

.ui-selected{
  background: red;
}


「selectable()」で、選択可能になります。

$(function() {

	$('#selectable').selectable();

});


基本的な部分は、これだけです。


他にも、機能があるので、少し書きます。

「selected:」とすると、選択した要素を取得できます。

$('#selectable').selectable({
		selected:  function(event,ui){
			console.log(ui.selected.id);
		}
	});


「unselected」とすると、選択を解除したものを取得できます。

unselected:  function(event,ui){
    console.log(ui.unselected.id);
}

参考ページ
・https://jqueryui.com/selectable/
・jQuery UI の Selectable プラグインによる複数項目選択GUI