본문 바로가기
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.