본문 바로가기

반응형
   

전체 글

(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..

반응형