폼 데이터 Validate 플러그인 Parsley 설치 : npm install --save parsleyjs참고 : http://parsleyjs.org/ 샘플소스 Email : Name : Colored by Color Scriptercs 2016. 10. 13. 태그 기능이 구현 가능한 플러그인 Select2 참고 : https://select2.github.io/ 샘플소스 독수리 매 까치 두루미 까마귀 참새 뻐꾸기 왕뿌리새 $(document).ready(function() { $("select[name='tags[]']").select2(); }); Colored by Color Scriptercs 2016. 10. 13. jQuery를 이용한 다중 체크박스 제어 소스 다중 체크박스 제어 $(document).ready(function() { var $checkAll = $("input:checkbox[name='check_all']"); var $order = $("input:checkbox[name='order[]']"); var $no = $("input:checkbox[name='no[]']"); // 전체 선택 $checkAll.on("click", function(e) { var check = $(this).is(":checked"); $order.trigger("click"); }); // 그룹 선택 $order.click(function(e) { var value = $(this).val(); var check = $(this).is(":checke.. 2016. 10. 12. jQuery를 이용한 레이어 팝업 구현하기 소스 .popup_panel { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100;} .popup_panel div.popup_bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background:#000; opacity:.5; filter:alpha(opacity=50); } .popup_panel div.popup_contents { position: absolute; top: 50%; left: 50%; width: 410px; height: 200px; border:2px solid #5294DE; background.. 2016. 5. 4. jQuery를 이용한 자동 롤링배너 구현하기 소스 .rolling_panel { position: relative; width: 625px; height: 150px; margin: 0; padding: 0; border: 1px solid #c7c7c7; overflow: hidden; } .rolling_panel ul { position: absolute; margin: 5px; padding: 0; list-style: none; } .rolling_panel ul li { float: left; width: 205px; height: 140px;} 이전 다음 $(document).ready(function() { var $panel = $(".rolling_panel").find("ul"); var itemWidth = $panel.chi.. 2016. 5. 4. jQuery를 이용한 탭 기능 구현하기 소스 .tabs { margin: 0; padding: 0; } .tabs li { list-style-type: none; display: inline-block; background: #c7c7c7; padding: 3px 10px; color: #fff; cursor: pointer; } .tabs li:hover { color: #fff; background: #5294de; } .tabs li.active { color: #fff; background: #5294de; } .panel { display:none; background: #fff; border: 1px solid #c7c7c7; padding: 30px; } .panel.active { display:block; } 탭 01 탭 0.. 2016. 5. 4. 레이어 팝업 플러그인 Colorbox 설치 : npm install jquery-colorbox참고 : http://www.jacklmoore.com/colorbox/ 데모 URL- http://www.jacklmoore.com/colorbox/example1/- http://www.jacklmoore.com/colorbox/example2/- http://www.jacklmoore.com/colorbox/example3/- http://www.jacklmoore.com/colorbox/example4/- http://www.jacklmoore.com/colorbox/example5/ 샘플소스$(document).ready(function() { // Format: $(selector).colorbox({key:value, key:value.. 2016. 5. 3. 세로 롤링 플러그인 vTicker 참고 : http://richhollis.github.io/vticker/ 샘플소스 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore $(document).ready(function() { $('#example').vTicker(); });Colored by Color Scriptercs 2016. 5. 3. 이전 1 다음
