Blog Content

소스는 설치된 jquery-ui-1.7.2.custom - >development-bundle -> themes에서 ui.theme.css와 ui.core.css와 ui.tabs.css와 이미지를 가져옴 06.Tabs.htm 탭 컨트롤 $(document).ready(function() { $('#tabs').tabs(); //탭 }); 탭 제목1 탭 제목2 탭 제목3 첫번재 영역의 내용 두번재 영역의 내용 세번재 영역의 내용 결과화면

05.Accordion.htm 아코디언 컨트롤 $(document).ready(function() { $('#accordion').accordion({event:"mouseover"}); }); 제목1 내용1 제목2 내용2 제목3 내용3 결과화면

선택한 개체를 표시하는 예제입니다. 04.Selectable.htm 개체 선택 .ui-selected { background-color:Yellow;color:Black; } $(document).ready(function() { $('ul').selectable(); // 선택 }); XHTML CSS JavaScript 결과화면

sortable 주요 속성 및 이벤트 axis - x축과 y축 중 하나로만 이동 opacity - 불투명도 cancel - Sort대상에서 제외하고자 할 때 id설정, 해당 컨트롤은 드래그 X handle:"span" - 해당영역 태그 부분을 핸들로 설정, 부분 끌기 가능 helper:function(e, ui) - 소팅되는 동안 해당 요소의 정보를 알 수 있는 이벤트 start, sort, change - 소팅을 위해서 드래그 하는 순간 발생하는 이벤트 update - 소팅 후 드롭 할 때(update) 발생하는 이벤트 stop - 완료 되었을때 발생 03.Sortable.htm 개체 정렬 $(document).ready(function() { $('ul').sortable({ axis: "y", op..

속성 및 이벤트 accept - 드롭시킬 대상 요소 activeClass - 마우스로 끌 동안 대상의 요소 hoverClass - 끌어 놓을 부분에 대한 마우스 오버시 tolerance(string) : "intersect", "fit", "touch" - 드롭시 위치 결정 active:function(e, ui){} - 드래그 하는 순간 호출 deactivate:function(e, ui){} - 드래그 하여 놓는 순간 호출 over - 드롭 가능한 상태 out - 드롭 불가능한 상태 drop - 드롭해서 놓는 상태 02.Droppable.htm 요소를 끌어서 놓기 $(document).ready(function() { $('img').draggable({ opacity:"0.3" }); // 끄는 동..

jQuery UI의 최신 버전을 받습니다. [ http://jqueryui.com ] jQuery의 홈페이지로 가서 최신 버전을 다운받습니다. 스샷 참고 클릭! 다운받은 jquery-ui-1.7.2.custom.zip 을 압출을 풀고 해당 프로젝트에 복사합니다. 요소를 드래그(끌기)하는 예제입니다. 01.Draggable.htm 요소를 드래그하기(끌기) $(document).ready(function() { //[1] 끌기 가능 //$('img').draggable({}); //[2] x좌표로만 이동 //$('img').draggable({axis:"x"}); //[3] 자기 자리로 이동 $('img').draggable({ revert:true }); }); 결과화면

04.Param.htm 문자열 매개변수를 쿼리스트링으로 변경 jQuery(document).ready(function() { var params = { dataType: "json", url: "a.aspx" }; //맵/컬렉션 형태의 문자열 배열을 쿼리스트링(Querystring)으로 변경 var str = $.param(params); //dataType=json&url=a.aspx로 변경됨 jQuery('#my').append(str); }); 결과화면

$.noConfict() - 다른 라이브러리와 jQuery 사용시 : $대신 jQuery 키워드 사용 : 다른 라이브러리에게 $를 양보 03.NoConflict.htm $ 기호 사용금지 : 다른 라이브러리와 함게 사용 //현재 페이지에서는 $대신 jQuery 키워드 사용해야 함 //다른 자바스크립트 라이브러리가 $를 사용하기에 양보 $.noConflict(); //설명을 위한 코드로 익스플로러에서는 실행이 되지 않는다. //var $ = "메롱~"; //$를 재정의 $를 대쳐 //jQuery(document).ready(function() { //alert($); //undefined -> 메롱~ $를 대쳐 한 값이 출력 //}); //지금까지 만들어 놓은 기능은 $로 되어있다면??? jQuery(doc..

jQuery를 이용한 양쪽 공백 제거 예제입니다. 02.Trim.htm 양쪽 공백 제거 함수 $(document).ready(function() { var s = " Abc Def Fed Cba "; alert("[" + s + "]"); alert(s.length); alert("[" + $.trim(s) + "]"); //양쪽 공백 제거 alert(jQuery.trim(s).length); //17 - 2 = 15 }); 결과화면

jQuery를 이용하여 현재 사용자의 브라우저 정보를 제공하는 예제입니다. $.browser - version : 버전 정보(렌더링 엔진 버전임) - msie : IE 사용시 true - mozilla : FireFox - safari - opera 01.Browser.htm 브라우저 정보 얻기 $(document).ready(function() { var result = ""; //$.browser의 모든 속성 출력 jQuery.each(jQuery.browser, function(i, val) { result += i + ":" + val + "\n"; }); alert(result); //브라우저 확인 if ($.browser.msie) { alert("IE 웹 브라우저"); } else { ale..

현재까지 진행된 jQuery 전체 소스 파일입니다.

$.ajaxSetup() - 한 페이지에서 동일하게 반복되는 $.ajax() 메서드에 동일한 설정을 유지 : $.ajax()를 여러 번 사용시 반복되는 인자 생략 가능 - $.ajax()에서 사용하는 인자를 그대로 사용 12.jQuery.ajajxSetup.htm 반복사용하는 ajax() 메서드의 주요 속성을 ajaxSetup()에서 설정 .red{ background-color:Red;} .yellow{background-color:Yellow;} $(document).ready(function() { //$.ajax()에서 반복 사용하는 속성을 상단에 설정 후 $.ajax에서 상속 받아 사용 $.ajaxSetup({ url: "02.jQuery.getJSON.js", //a.aspx, a.php, a..

getJSON()을 대체하는 ajax() 메서드 예제입니다. 11.jQuery.ajax.JSON.htm getJSON()을 대체하는 ajax() 메서드 $(document).ready(function() { //동적으로 원격에 있는 JSON 파일(결과값)을 로드 $.ajax({ url: "02.jQuery.getJSON.js", //a.aspx, a.php, a.jsp dataType: "json", success: function(data) { //받아온 JSON을 테이블에 출력 $.each(data, function() { $('#tblList').append( "" + this.Num + "" + this["Name"] + ""); }); //위에꺼랑 비교 $.each(data, function(i..

새항목 : JavaScript.js(자바스크립트) 를 추가합니다. getScript() 메서드의 기능을 ajax메서드로 대체하는 예제입니다. 10.jQuery.ajax.htm getScript() 메서드의 기능을 ajax메서드로 대체 $(document).ready(function() { $.ajax({ type: "get", url: "10.jQuery.ajax.js", dataType: "script", //성공시 Script 부분을 로드 success: function(data) { MessageBox('안녕'); }, error: function (data) { alert('에러 발생'); } }); }); 10.jQuery.ajax.js function MessageBox(string) { al..

09.submitMethod.htm 폼에 있는 값을 서버로 전송하기 $(document).ready(function() { /*submit(기존)방식에서 $('#btn').click(function() { $('#pnlDisplay').load("05.FrmResponseData.aspx", $('input[@name="msg"]').val());*/ //Ajax방식 $('#btn').click(function() { $('#pnlDisplay').load("05.FrmResponseData.aspx", { 'Msg': $('#msg').val() }); }); }); 여기에 출력 결과확인 기타설명 - 로드 메서드를 사용해서 데이터를 가져와 사용할 때 텍스트박스에 입력 한값을 5번파일로 서버로 전송하는데..