- jQuery UI selectable
- jQuery UI 셀렉터블
예시 1: html 값 사용
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<style>
#fruits .ui-selecting { background: pink; }
#fruits .ui-selected { background: hotpink; }
#fruits { list-style-type: none; margin: 0; padding: 0; width: 500px; }
#fruits li { padding: .5em; }
</style>
<script>
$(function() {
$( "#fruits" )
.selectable()
.on("selectablestop", function() {
var my_fruits = [];
$('#fruits .ui-selected').each(function() {
my_fruits.push( $(this).html() );
});
console.log( my_fruits );
});
});
</script>
<ul id="fruits">
<li class="ui-widget-content">Apple</li>
<li class="ui-widget-content">Banana</li>
<li class="ui-widget-content">Cranberry</li>
<li class="ui-widget-content">Lemon</li>
<li class="ui-widget-content">Mango</li>
</ul>
- → 클릭하거나, 드래그하면 선택된 것이 콘솔에 출력됨
예시 2: data 값 사용
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<style>
#fruits .ui-selecting { background: pink; }
#fruits .ui-selected { background: hotpink; }
#fruits { list-style-type: none; margin: 0; padding: 0; width: 500px; }
#fruits li { padding: .5em; }
</style>
<script>
$(function() {
$( "#fruits" )
.selectable()
.on("selectablestop", function() {
var my_fruits = [];
$('#fruits .ui-selected').each(function() {
my_fruits.push( $(this).data('value') );
});
console.log( my_fruits );
});
});
</script>
<ul id="fruits">
<li class="ui-widget-content" data-value='Apple'>사과</li>
<li class="ui-widget-content" data-value='Banana'>바나나</li>
<li class="ui-widget-content" data-value='Cranberry'>크랜베리</li>
<li class="ui-widget-content" data-value='Lemon'>레몬</li>
<li class="ui-widget-content" data-value='Mango'>망고</li>
</ul>