본문 바로가기

반응형
   

Source

(1625)
jQuery progressbar, slider, Tabs 예제 jQuery progressbar, slider, Tabs 예제 적용전에 프로그래스바에 수를 입력하면 변하는 것이 없습니다. 적용후 프로그래스바와 슬라이더를 보면 해당 숫자만큼 게이지가 채워진것을 확인할수 있습니다. 소스 $(document).ready(function () { //progressbar //data를 찾아서 데이타값을 변수에 저장하고 저장된값을 매개변수에 넣자. $("#bar1").progressbar(); $("#data").bind("change", function () { //alert("a"); var n = $(this).val(); //수치 $("#bar1").progressbar({ value: parseInt(n) }); }); $("#btn1").click(function..
Jquery popup 예제 Jquery popup 예제결과화면소스 #popup1 { border:1px solid gray; background-color:lightgray; width:200px; height:100px; position:absolute; left:100px; top:100px; } #popup2 { font-size:12px; } $(document).ready(function () { $("#popup1").hide(); $("#popup2").hide(); //$("#popup2").dialog(); }); function Check() { $("#popup1").show(); } function Check2() { $("#popup2").dialog( { width: 200, heigh: 100 } ); ..
Jquery Accordion, Autocomplete, Datepicker 사용 예제 Jquery Accordion, Autocomplete, Datepicker 사용 예제결과 화면 소스 $(document).ready(function () { //Accordion $("#list").accordion(); //Autocomplete $("#txtName").autocomplete({ source: ["홍길동", "이순신", "이문세", "테스트", "테니스", "이하하", "이호호"] }); //Datepicker $("#datepicker").datepicker(); $("input[type='button']").button(); }); function Select() { var date = $("#datepicker").datepicker("getDate"); alert(date.t..
jQuery draggable, droppable, resize, sortable 사용예제 jQuery draggable, droppable, resize, sortable 사용예제아래 css파일이 있어야지 resize 및 다른 것들도 적용된다. 결과화면 소스 Jquery UI #box2 { border:1px solid black; width:100px; height:100px; } #list .ui-selecting { background: yellow; } #list .ui-selected { background: orange; } $(document).ready(function () { $("#box").css("border", "1px solid black").css("background-color", "yellow").css("width", "100px").css ("height",..
Jquery 탐색(Traversing), 관리(Manipulation), 이벤트(Event), jQuery 사이트 이용 팁 Jquery 탐색(Traversing), 관리(Manipulation), 이벤트(Event), jQuery 사이트 이용 팁jQuery 라이브러리는 최대한 많이 확보하는것이 좋다.. 결과화면 소스 Traversing function Test() { //add() 섞일만한 성질이 아니지만 add 라는 객체로 + 해줄수 있다. //$("li:even").css("color", "red"); $("li:even").add("#title").css("color", "red"); //add를 안했을 경우 //$("li:even").css("color", "red"); //$("#title").css("color", "red"); //eq(n) 아래 2개는 동일한 방법 $("li:eq(2)").css("backgro..
Attributes DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Attributes #box { border:1px solid black; width:200px; height:150px; } .style1 { background-color:Yellow; width:200px; height:150px; } .style1 { background-color:Yellow; } .style2 { background-color:Black; color:White; } .style3 { background-color:Red; color:Yellow; } .sel { ba..
JavaScript mouse event 컨트롤 JavaScript mouse event 컨트롤 메뉴 #menu div { font-size:20px; font-family:돋움; font-weight:bold; border:5px solid green; margin-bottom:1px; padding:5px; background-color:White; width:190px; } #sub1, #sub2, #sub3 { font-size:17px; font-family:돋움; font-weight:bold; border:3px solid pink; padding:5px; width:190px; background-color:White; position:absolute; display:none; } #sub1 { left:217px; top:8px; } ..
Input, Naver 예제 DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Input function Test() { //C# 이벤트 핸들러 인자 //1. object sender : 이벤트 발생 객체 //2. EventArgs args : 이벤트 부가 정보 //Javascript //1. event.srcElement //2. event //마우스 -> 좌표 //A. 문서의 좌측 상단이 기준(body) //alert(event.x + " : " + event.y); //B. 화면 기준. //alert(event.screenX + " : " + event.screen..

반응형