본문 바로가기

반응형
   

Programming/Jquery

(13)
원하는 숫자만큼 순서대로 증가하는 글자 웹페이지에 표시(HTML, CSS, jQuery) 원하는 숫자만큼 순서대로 증가하는 글자 웹페이지에 표시(HTML, CSS, jQuery) 개인적으로 라인 수와 관련한 문제가 생겨 테스트 해봐야 될 상황이 있었습니다. 그런데 테스트 용도로 라인 수를 체크하기 위해서 수동으로 20,000개가 넘는 숫자를 일일이 작성하는 건 시간이 오래 걸릴 것 같아 간단히 웹페이지에 표시되게끔 웹페이지를 만들었습니다. 페이지 하단에 소스구문이 있는데 간단히 웹페이지에서 바로 확인하고자 하시는 분들은 첨부파일을 다운 받아서 더블 클릭으로 열어 보셔도 됩니다. HTML, CSS, jQuery만을 이용해 만든 간단한 웹페이지이며 아래 이미지와 같이 해당 소스를 웹페이지에서 실행하게 되면 특정 숫자를 입력한 뒤 출력 버튼을 누르면 숫자가 자동으로 증가하며 원하는 숫자까지 웹페이..
jQuery Effect 예제 jQuery Effect 예제 $(document).ready(function () { $("#btn1").click(function () { //blind //$("#box").toggle("blind", { direction: "horizontal" }, 1000); //$("#list").toggle("blind", { direction: "vertical" }, 1000); //Clip //$("#box").toggle("clip", { direction: "horizontal" }, 1000); //Drop //$("#list").toggle("drop", { direction: "down" }, 1000); //Explode //$("#box").toggle("explode",{ pieces:..
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..

반응형