본문 바로가기

FrameWork/jQuery15

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.
select option Add/Remove 상황 : 오른쪽 셀렉트 박스는 데이터베이스에서 부서 정보를 가져온다. '' 버튼 : rmvDept 내가 생각한 허접한 코드 var dataValue = null; var dataText = null; var inValue = null; var inText = null; $("#Category_Data").click(function() { dataValue = $("#Category_Data > option:selected").val(); dataText = $("#Category_Data > option[value=" + dataValue + "]").text(); }); $("#IN_CategoryIds").click(function() { inValue = $("#IN_CategoryIds > opt.. 2012. 2. 9.
jQuery Display 메서드 .show(), hide(), toggle() .show(speed,callback) // display 스타일 프로퍼티 값을 이전값(blok)으로 설정 .hide(speed,callback) // display 스타일 프로퍼티 값을 'none'으로 설정 showclose .toggle(speed,callback) // 안보여졌을경우 보여지게, 보여진경우 감추는 메서드 toggle .slideDown(), .slideUp(), .slideToggle() .slideDown(speed,callback) // 감춰진 모든 일치하는 엘리먼트가 height만큼 아래로 펼쳐져 보임 .slideUp(speed,callback) // 보여진 모든 일치하는 엘리먼트가 상단으로 사라짐 .slideToggle(spe.. 2011. 9. 20.
jQuery의 json을 사용할때 유용한 PHP함수 jQuery를 이용해서 ajax를 사용할때 보통 json 형식으로 자료를 출력하고 받아와서 사용하게 된다. 보통 {"a":1,"b":2,"c":3,"d":4,"e":5} 또는 {"a":"1","b":"2","c":"3","d":"4","e":"5"} 과 같은 형태로 이용을 하게 되는데 일일이 자료를 생성해서 출력하려면 번거로운 경우가 많다 그러한 작업을 보다 쉽게 해주는 PHP의 확장 함수가 json_encode()이다. 배열의 형태로 자료를 집어넣으면 json의 형태로 인코딩을 변경해 준다. 자세한 사용법은 http://jp.php.net/manual/kr/function.json-encode.php 을 참조 2009. 12. 2.
JQuery 사용 하기..[라디오 버튼] 라디오버튼에서 선택된 값을 찾는 방법이다.. 첫번째 방법 //라디오 버튼의이름이 "rdobtn"인것 중 선택되어진 항목의 값을 가져온다. - var selectedValue = $('input:radio[name=rdobtn]:checked').val() ; 또는 - var selectedValue = $('input:radio[id=rdobtn]:checked').val() ; 두번째 방법 var selectedValue = ""; var radios = $("input:radio"); //타입이 radio인 항목을 찾는다. for(var i = 0; i < radios.length;i++) // { if(radios[i].checked == true) //라디오 버튼중 선택되어진 항목의 값을 가져온다.. 2009. 11. 30.
jQuery 이미지 리로드 jQuery를 이용해서 특정 이미지를 정해진 시간마다 리로드 시키고 싶을 경우에는 다음과 같이 하면 된다. function reloadPic(thumb,video,aspect,id){ var string = 'thumb='+thumb+'&video='+video+'&aspect='+aspect; var imageID = '#' + id; $.ajax({ type: "GET", url: "newThumb.php", data: string, success: function(msg){ var img_src = $(imageID).attr('src'); var timestamp = new Date().getTime(); $(imageID).attr('src',img_src+'?'+timestamp); } });.. 2009. 11. 27.
jQuery의 브라우져 구분 함수 jQuery커맨드는 고맙게도 이벤트 핸들링과 같은 브라우저 간의 차이로 발생하는 문제점등을 내부적으로 처리를 해주어 개발자로 하여금 로직 자체에만 신경쓸수 있도록 배려해주었다. 하지만 사용자 확장 함수등을 만들시엔 부득이하게 브라우져구분을 할수밖에 없고 버젼별로도 구분이필요한 경우가 생긴다.. jQuery에서는 이러한 브라우져를 구분해주고 버젼별 정보를 알려주는 함수가 있다.. $.browser 이것인데..내부함수는 아래와 같다. .msie : IE 브라우져 .mozilla : 파폭, 카미노, 넷스케이프등이 속한다. .safari : 사파리 .opera : 오페라 .version : 브라우져별 버젼정보 되겟다. 사용예 if ($.browser.safari) { alert("this is safari!").. 2009. 11. 25.
jQuery를 이용하여 Textarea 에서 엔터쳤을 때 이벤트 알아내기 이번에 textarea에서 엔터를 쳤을 때 이벤트를 잡아야 해서 이리 저리 시도를 해본 결과 -- html 코드 -- -- javascript 코드 -- $('.msg').keyup( function(event){ if (event.keyCode == 13) { // 13이 enter키 코드 값이다. alert('enter!'); // 여기에 실행하고자 하는 코드를 넣으면 된다. } });[출처] jQuery를 이용하여 Textarea 에서 엔터쳤을 때 이벤트 알아내기|작성자 정우아빠 2009. 11. 20.
[JQUERY] 이미지 롤오버 http://www.selfcontained.us/2008/03/08/simple-jquery-image-rollover-script/ $(function() { $('.rollover').hover(function() { var currentImg = $(this).attr('src'); $(this).attr('src', $(this).attr('hover')); $(this).attr('hover', currentImg); }, function() { var currentImg = $(this).attr('src'); $(this).attr('src', $(this).attr('hover')); $(this).attr('hover', currentImg); }); }); ILSC 09-05-22 1.. 2009. 11. 17.
Jquery 플러그인 File upload Ajax File Upload jQUploader Multiple File Upload plugin jQuery File Style Styling an input type file Progress Bar Plugin Form Validation jQuery Validation Auto Help Simple jQuery form validation jQuery XAV - form validations jQuery AlphaNumeric Masked Input TypeWatch Plugin Text limiter for form fields Ajax Username Check with jQuery Form - Select Box stuff jQuery Combobox jQuery con.. 2009. 11. 17.