본문 바로가기

반응형
   

Programming

(421)
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..
Form, DOM DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Form #list1 { width:600px; border:1px solid gray; border-collapse:collapse; } #list1 td { border:1px solid gray; font-size:12px; padding:2px; } #list1 #header { font-weight:bold; text-align:center; background-color:Yellow; } function Test(f) { //var txt1 = document.forms[0] //v..
Screen, Location, History, link, image ScreenDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Screen var w = window.screen.width; //해상도 너비 var h = window.screen.height;//해상도 높이 var aw = window.screen.availWidth; //실제사용가능한 너비 var ah = window.screen.availHeight; //실제 사용가능한 높이(작업표시줄 때문에 위 height보다 낮음) var c = window.screen.colorDepth;//디스플레이 색품질 32비트 색상 //alert(w + "..

반응형