JQuery UI 셀렉터블 selectable

jQuery UI selectable
jQuery UI 셀렉터블

1 예시 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 예시 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>


3 같이 보기[ | ]

4 참고[ | ]

문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}