FrameWork58 jquery 레이어팝업 모듈 $(document).ready(function(){ // center : true 팝업 가운데 출력 // closeButton : 팝업안에 닫기 버튼 아이디 // backgroundDisplay : 팝업 배경 색 출력 // left: 가운데 정렬이 아닐때 가로 위치 지정 // top : 가운데 정렬이 아닐때 세로 위치 지정 var opts = {'center' : false , 'closeButton':'#close','backgroundDisplay' : true} //options add // 클래스명이 pupup 인 Dom 클릭 하면 레이어 아이디가 popupLayr 팝업 호출 . $(".popup").layerPopup("#popupLayer" , opts); }); 2012. 6. 19. 팝업 레이어 - JQuery 사용 여기를 클릭하시면 로그인 레이어가 뜹니다 등록 / 취소 2012. 6. 19. 폼의 편의성이나 디자인을 강화하는 jQuery 플러그인 문의사항이나 유저등록, 로그인부터 상품의 주문까지, 웹에서 상당히 중요한 폼 요소. 이 폼의 편의성이나 디자인은 그 사이트의 매상이나 등록에 크게 영향을 준다고 해도 과언은 아닙니다. 폼의 입력항목이 너무 많거나 어려울경우, 모처럼 구입이나 유저등록을 할 맘이 생긴 유저들도 외면해버리겠죠.^^; 이번 회에서는 폼의 디자인이나 편의성을 강화해주는 jQuery의 플러그인을 여러가지로 정리해보았습니다. Perfect signin dropdown box likes Twitter with jQuery Twitter의 사인 인 박스같은 드롭다운박스를 재현해줍니다. Lightbox_me – Stupidly Simple Lightboxing 라이트박스로 로그인표시가 가능합니다. Pretty checkboxes with.. 2012. 2. 10. 셀렉트리스트박스 jquery 이용 셀렉트 리스트 박스에서 jquery를 이용한 추가와 삭제 위아래 이동 1-1 1-2 1-3 2-1 2-2 2-3 3-1 3-2 3-3 4-1 4-2 4-3 리스트 박스의 값을 asp로 구분자(@) 끼어 넣고 넘기기 select3v2.asp select3v2.htm 수정 하기 포함 select3v3.asp select3v3.htm 참조사이트 : http://www.electrictoolbox.com/jquery-add-option-select-jquery/ 2012. 2. 10. jquery selectbox option 순서 이동 jquery의 before()와 after()를 이용해서 multiple selectbox에서 순서이동을 한다. function selectUp(){ $('#orderSelect option:selected').each(function(){ var selectObj = $(this) if(selectObj.index() == 0 ) return false; var targetObj = $('#orderSelect option:eq('+(selectObj.index()-1)+')'); targetObj.before(selectObj); }); } function selectDown(){ $('#orderSelect option:selected').each(function(){ var selectObj = .. 2012. 2. 10. Easy Widgets를 이용한 정렬 순서 수정 어제 jQuery Plugin Easy Widgets 포스트에서 구상했던 페이지를 간단하게 구현해봤다. 작업은 생각한 것보다 어렵지 않았고 jQuery를 이용했기 때문에 쉽게 구현이 될 수 있었던 것 같다. 이 기능은 쇼핑몰에서 상품 리스트 정렬 순서를 변경할 때 사용하려고 한다. 상품 리스트에서 상품 순서를 변경 후 완료 버튼을 누르면 모든 상품에 대해서 정렬 순서를 변경하는 것이 핵심이다. 단 상품이 아주 많다면.. 생각을.. ㅋ 이런 식으로 위젯을 마우스로 드래그하면 위치를 바꿀 수 있는데 각 위젯은 고유한 index를 가지게 된다. 이 index를 정렬 순서로 변경하는 것이 핵심이라면 핵심이다. 아래는 실제 테스트한 소스 코드들이다. 쇼핑몰이 영카트4 기반으로 제작되기 때문에 기본 코드들은 그냥 .. 2012. 2. 9.