고수들에겐 별거 아니지만... 은근하게 많이 쓰이는 방식으로
ul ,li 로 목록을 만들어서 마우스 클릭시 색반전하게 하는 소스이며
기냥 소스 긁어서 상황에 맞게 가공해서 쓰면 될듯해서 게시해봅니다..
저 역시 항상 Ctrl + C / Ctrl + V 로 일을하니까요~~ ^^*
아래는 관련 소스입니다..
기냥 아무생각없이 드래그 카피 해서 html파일로 저장해서 확인하면 끝~!!
실행화면
마우스 클릭 시 색 반전되면서 선택 되어지고
컨트롤키와 같이 클릭시 다중선택
마우스로 리스트를 드래그하면 선택되어짐
아래는 html 스크립트
<html> <head> <script src="http://code.jquery.com/jquery-1.8.3.js"></script> <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script> <style type="text/css"> ul.list { border:2px solid #cbcccf; padding-top:5px; padding-left:10px; font-size: 12px; list-style-type: none; width:175px; height:150px; background-color: rgb(240,245,248); } ul.list > li{ padding-top:2px; padding-left:2px; margin-top:4px; margin-right:4px; } ul.list > .ui-selecting { background: #FECA40; } ul.list > .ui-selected { background: #F39814; color: white; } #selectable { list-style-type: none; margin: 0; padding: 0; width: 20%; } #selectable li { margin: 0px; padding: 2px; font-size:12px; height: 10px; } #selectable .ui-selecting { background: #FECA40; } #selectable .ui-selected { background: #F39814; color: white; } </style> <script type="text/javascript"> <!-- $(document).ready(function() { $( ".list" ).selectable(); $( "#selectable" ).selectable(); }); //--> </script> </head> <body> <div > <ul class='list'> <li>종합</a></li> <li>라이프/취미</li> <li>문화/엔터</li> <li>IT/비즈/학습</li> <li>여행</li> <li>요리</li> <li>MY캐스트</li> </ul> <ol id="selectable"> <li >Item 1</li> <li >Item 2</li> <li >Item 3</li> <li >Item 4</li> <li >Item 5</li> <li >Item 6</li> <li >Item 7</li> </ol> </div> </body> <html>
'IT TIP > jQuery' 카테고리의 다른 글
| 기초문법.. (0) | 2017.04.05 |
|---|---|
| selector 간략 정리 (0) | 2017.04.04 |