'프로그래밍/Jquery'에 해당되는 글 13건

제목 날짜
  • 원하는 숫자만큼 순서대로 증가하는 글자 웹페이지에 표시(HTML, CSS, jQuery)(2) 2020.01.22
  • jQuery Effect 예제 2012.04.27
  • jQuery progressbar, slider, Tabs 예제 2012.04.27
  • Jquery popup 예제 2012.04.27
  • Jquery Accordion, Autocomplete, Datepicker 사용 예제 2012.04.27
  • jQuery draggable, droppable, resize, sortable 사용예제 2012.04.26
  • Jquery 탐색(Traversing), 관리(Manipulation), 이벤트(Event), jQuery 사이트 이용 팁 2012.04.26
  • Attributes 2012.04.26
  • ui draggable, drop 2012.01.13
  • jQuery eq를 활용해 태그 선택 예제 2012.01.13

원하는 숫자만큼 순서대로 증가하는 글자 웹페이지에 표시(HTML, CSS, jQuery)

원하는 숫자만큼 순서대로 증가하는 글자 웹페이지에 표시(HTML, CSS, jQuery)

개인적으로 라인 수와 관련한 문제가 생겨 테스트 해봐야 될 상황이 있었습니다. 그런데 테스트 용도로 라인 수를 체크하기 위해서 수동으로 20,000개가 넘는 숫자를 일일이 작성하는 건 시간이 오래 걸릴 것 같아 간단히 웹페이지에 표시되게끔 웹페이지를 만들었습니다.

 

페이지 하단에 소스구문이 있는데 간단히 웹페이지에서 바로 확인하고자 하시는 분들은 첨부파일을 다운 받아서 더블 클릭으로 열어 보셔도 됩니다.

auto_count.html
0.00MB

 

HTML, CSS, jQuery만을 이용해 만든 간단한 웹페이지이며 아래 이미지와 같이 해당 소스를 웹페이지에서 실행하게 되면 특정 숫자를 입력한 뒤 출력 버튼을 누르면 숫자가 자동으로 증가하며 원하는 숫자까지 웹페이지에 출력됩니다.


 

웹페이지에서 원하는 숫자만큼 출력된 숫자를 드래그해서 복사해 올 수 있습니다. 해당 기능이 필요했던 이유는 HTML textarea 태그에 라인이 얼마나 DB에 들어가는지 보기 위해서 아래 이미지와 같이 칸별로 숫자가 순서대로 증가하는 것이 필요했습니다.

개인적인 문제이긴 했지만 문제 해결은 다른 곳에서 해결 했습니다.


 

10,000단위가 넘어가게 되면 웹페이지가 출력되기까지 약간의 멈춘 현상이 있긴 하지만 개인적으론 유용하게 사용했습니다.


 

이왕 만든 김에 현재 나온 숫자를 드래그해서 복사하지 않고도 가져올 수 있도록 텍스트 복사 기능도 추가하였습니다. 복사 기능엔 엔터로 구분되진 않고 텍스트만 가져오다 보니 숫자가 가로로 표시되긴 합니다. 구분자를 넣는 건 어렵지 않지만, 엔터는 생각을 좀 해봐야겠더군요.


 

 

소스 코드는 아래와 같으며 해당 소스 코드를 드래그 복사해서 메모장에 붙여 넣으신 뒤 파일 저장 확장자를 HTML로 저장하시고 해당 파일을 실행해 보시면 웹페이지에서 바로 확인할 수 있도록 만들었습니다.

<html>
<head>
<meta charset="utf-8">
<title>자동 숫자 증가</title>
<style>
    #number, #btn, .btn_list{ height: 27px;}    
    #txt_copy{display: none;}    
    #result_text{opacity: 0;}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
	//출력 버튼
	$( "#btn" ).click(function() {		  
		  var number = $("#number").val();
		  $("#txt_copy").css("display","inline-block");
		  
		  if(number.length < 1){
			alert("숫자를 입력해 주세요.");
			$("#number").focus();
		  }

		  $("#number_area").empty();
		  for(var i = 1; i <= number; i++){
			  $("#number_area").append(i+"<br>");
		  }
	});

	//글자 복사
	$( "#txt_copy" ).click(function() {
		var mytext = $("#number_area").text();		
		$("#result_text").val(mytext);
		$("#result_text").select();
		document.execCommand("Copy");
		alert("글자 복사 성공");
	});

	//숫자 입력 태그에 글자 입력시 숫자 문자 체크
	$( "#number" ).keypress(function() {
		if(event.keyCode<48 || event.keyCode>57){
			alert("숫자만 입력 가능 합니다.");
		    event.returnValue=false;
		}
	});

});

</script>
</head>

<body>
	<input type="text" id="number" placeholder="숫자 입력" />
	<input type="button" value="출력" id="btn" class="btn_list" />
	<input type="button" value="텍스트 복사" id="txt_copy" class="btn_list" />
	<div id="number_area"></div>	
	<input type="text" id="result_text" value="" />
</body>
</html>

 

혹시라도 원하는 숫자만큼 순서대로 증가하는 글자를 웹페이지에서 간단히 확인해 보고자 하시는 분들이 있다면 참고하셔서 사용하시면 좋을 것 같습니다.

저작자표시비영리변경금지
  • 익명
    2020.01.28 18:23

    비밀댓글입니다

    • Favicon of https://zzarungna.com BlogIcon zzarungna
      2020.01.28 18:51 신고

      ㅋㅋㅋㅋㅋㅋ 잘지내고 있지? 나는 잘지내고 있어 나도 벌써 그립다 그시절이 ㅠㅠ 힘들다 힘들어~~~ :(

트랙백

※ 스팸 트랙백 차단중 ...{ ? }

jQuery Effect 예제

jQuery Effect 예제


<html>

<head>

    <title></title>

       <link href="css/smoothness/jquery-ui-1.8.19.custom.css" rel="stylesheet" type="text/css" />

       <script src="js/jquery-1.7.2.js" type="text/javascript"></script>

       <script src="js/jquery-ui-1.8.19.custom.min.js" type="text/javascript"></script>

       <script type="text/javascript">

             $(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: 16 }, 1000);

 

                           //Fade

                           //$("#box").toggle("fade", 1000);

 

 

                           //Fold

                           //$("#list").toggle("fold",{

                           //     size:10

                           //}, 1000);

 

 

                           //Puff

                           //$("#list").toggle("puff", {percent:300}, 1000);

 

                           //Slide

                           //$("#list").toggle("slide", { direction: "up" }, 1000);

 

                           //Scale

                           //$("#box").effect("scale", {percent:200, direction:"horizontal"}, 1000);

                           //$("#list").effect("scale",{percent:150}, 1000);

 

                           //Bounce

                           //$("#list").effect("bounce", {

                           //     direction:"right",

                           //     distance:100,

                           //     times:5

                           //}, "fast");

 

                           //Highlight

                           //$("#list").effect("highlight", {color:"black"}, 1000);

 

                           //Pulsate

                           //$("#list").effect("pulsate", {times:10}, "fast");

                           //$("#list tr").eq(5).effect("pulsate", { times: 100 }, "fast");

 

                           //Shake

                           //$("#box").effect("shake", {times:10}, "fast");

                           //$("#list tr").eq(2).effect("shake", { times: 10 }, "fast");

 

 

                           //Size

                           //$("#box").effect("size", {

                           //     to: {

                           //           width: 800,

                           //           height: 50

                           //     }

                           //}, 1000);

 

                    });

 

                    //$("td").click(function ()

                    //{

                    //     $(this).effect("highlight", { color: "red" }, 500);

                    //});

 

                    //$("tr").mouseover(function () {

                    //     $(this).effect("highlight", { color: "red" }, 500);

                    //});

 

             });

 

       </script>

       <style type="text/css">

             #box

             {

                    border:1px solid black;

                    width:200px; height:200px;

                    background-color:Yellow;

             }

            

             h2 {text-align:center;}

             #list {margin:0px auto;}

            

             body, p, div, span, li, a, input, th, td

             {

                    font-size:12px;

                    color:#333333;

             }                  

             #list

             {

                    width:500px;

                    border:1px solid gray;

                    border-collapse:collapse;

             }

             #list th, #list td

             {

                    border:1px solid gray;

                    padding:2px;

             }

             #list th

             {

                    background-color:Orange;

             }

       </style>

</head>

<body>

       <!--Ex21_effect.htm-->

       <input type="button" value=" 테스트 " id="btn1" />

       <div id="box"></div>

 

       <h2>자유 게시판</h2>

 

       <div style="margin:0px auto; width:500px">

       <table id="list">

             <tr>

                    <th>번호</th>

                    <th>제목</th>

                    <th>이름</th>

                    <th>날짜</th>

                    <th>조회</th>

             </tr>

             <tr>

                    <td>1</td>

                    <td>게시판 리스트입니다. 하하하하</td>

                    <td>홍길동</td>

                    <td>2012-05-10</td>

                    <td>25</td>

             </tr>

             <tr>

                    <td>1</td>

                    <td>게시판 리스트입니다. 하하하하</td>

                    <td>홍길동</td>

                    <td>2012-05-10</td>

                    <td>25</td>

             </tr>

             <tr>

                    <td>1</td>

                    <td>게시판 리스트입니다. 하하하하</td>

                    <td>홍길동</td>

                    <td>2012-05-10</td>

                    <td>25</td>

             </tr>

             <tr>

                    <td>1</td>

                    <td>게시판 리스트입니다. 하하하하</td>

                    <td>홍길동</td>

                    <td>2012-05-10</td>

                    <td>25</td>

             </tr>

             <tr>

                    <td>1</td>

                    <td>게시판 리스트입니다. 하하하하</td>

                    <td>홍길동</td>

                    <td>2012-05-10</td>

                    <td>25</td>

             </tr>

             <tr>

                    <td>1</td>

                    <td>게시판 리스트입니다. 하하하하</td>

                    <td>홍길동</td>

                    <td>2012-05-10</td>

                    <td>25</td>

             </tr>

             <tr>

                    <td>1</td>

                    <td>게시판 리스트입니다. 하하하하</td>

                    <td>홍길동</td>

                    <td>2012-05-10</td>

                    <td>25</td>

             </tr>

             <tr>

                    <td>1</td>

                    <td>게시판 리스트입니다. 하하하하</td>

                    <td>홍길동</td>

                    <td>2012-05-10</td>

                    <td>25</td>

             </tr>

             <tr>

                    <td>1</td>

                    <td>게시판 리스트입니다. 하하하하</td>

                    <td>홍길동</td>

                    <td>2012-05-10</td>

                    <td>25</td>

             </tr>

             <tr>

                    <td>1</td>

                    <td>게시판 리스트입니다. 하하하하</td>

                    <td>홍길동</td>

                    <td>2012-05-10</td>

                    <td>25</td>

             </tr>

             <tr>

                    <td>1</td>

                    <td>게시판 리스트입니다. 하하하하</td>

                    <td>홍길동</td>

                    <td>2012-05-10</td>

                    <td>25</td>

             </tr>

             <tr>

                    <td>1</td>

                    <td>게시판 리스트입니다. 하하하하</td>

                    <td>홍길동</td>

                    <td>2012-05-10</td>

                    <td>25</td>

             </tr>

             <tr>

                    <td>1</td>

                    <td>게시판 리스트입니다. 하하하하</td>

                    <td>홍길동</td>

                    <td>2012-05-10</td>

                    <td>25</td>

             </tr>

             <tr>

                    <td>1</td>

                    <td>게시판 리스트입니다. 하하하하</td>

                    <td>홍길동</td>

                    <td>2012-05-10</td>

                    <td>25</td>

             </tr>

             <tr>

                    <td>1</td>

                    <td>게시판 리스트입니다. 하하하하</td>

                    <td>홍길동</td>

                    <td>2012-05-10</td>

                    <td>25</td>

             </tr>

             <tr>

                    <td>1</td>

                    <td>게시판 리스트입니다. 하하하하</td>

                    <td>홍길동</td>

                    <td>2012-05-10</td>

                    <td>25</td>

             </tr>

       </table>

       </div>

</body>

</html>

 

 

 

저작자표시

트랙백

※ 스팸 트랙백 차단중 ...{ ? }

jQuery progressbar, slider, Tabs 예제

jQuery progressbar, slider, Tabs 예제

적용전에 프로그래스바에 수를 입력하면 변하는 것이 없습니다.



적용후 프로그래스바와 슬라이더를 보면 해당 숫자만큼 게이지가 채워진것을 확인할수 있습니다.

소스

<html>

<head>

    <title></title>

       <link href="css/smoothness/jquery-ui-1.8.19.custom.css" rel="stylesheet" type="text/css" />

       <script src="js/jquery-1.7.2.js" type="text/javascript"></script>

       <script src="js/jquery-ui-1.8.19.custom.min.js" type="text/javascript"></script>

       <script type="text/javascript">

             $(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 () {

                           alert($("#bar1").progressbar("value"));

                    });

 

                    //Slider 슬라이더

                    $("#slider").slider(

                    {

                           change: function () {

                                 document.title = $(this).slider("value");

                           }

                    }

                    );

                    $("#btn2").click(function () {

                           alert($("#slider").slider("value"));

                    });

 

                    //Tabs

                    $("#tabs").tabs();

             });

       </script>

 

       <style type="text/css">

             #slider {width:300px; height:10px; font-size:12px;}

             #tabs {width:400px; height:150px; font-size:12px;}

       </style>

 

</head>

<body>

 

       <!--Progressbar-->

       <h3>progressbar</h3>

       <div id="bar1"></div>

       <select id="data">

             <option value="0">0</option>

             <option value="20">20</option>

             <option value="40">40</option>

             <option value="60">60</option>

             <option value="80">80</option>

             <option value="100">100</option>

       </select>

 

       <input type="button" value="입력하기" id="btn1" />

 

       <hr />

 

       <!--Slider 슬라이더-->

       <h3>Slider 슬라이더</h3>

       <div id="slider"></div>

       <input type="button" id="btn2" value=" 확인 " />

 

       <hr />

 

       <!--Tabs-->

       <h3>Tabs</h3>

       <div id="tabs">

             <ul>

                    <li><a href="#page1"><span>첫번째 페이지</span></a></li>

                    <li><a href="#page2"><span>두번째 페이지</span></a></li>

                    <li><a href="#page3"><span>세번째 페이지</span></a></li>

             </ul>

 

             <div id="page1">

                    <p>첫번째 페이지입니다. 어쩌구.. 저쩌구..</p>

             </div>

 

             <div id="page2">

                    <p>두번째 페이지입니다. 어쩌구.. 저쩌구..</p>

             </div>

 

             <div id="page3">

                    <p>세번째 페이지입니다. 어쩌구.. 저쩌구..</p>

             </div>

       </div>

</body>

</html>

 

 



저작자표시

트랙백

※ 스팸 트랙백 차단중 ...{ ? }

Jquery popup 예제

Jquery popup 예제

결과화면

소스

<html>

<head>

    <title></title>

       <link href="css/smoothness/jquery-ui-1.8.19.custom.css" rel="stylesheet" type="text/css" />

       <script src="js/jquery-1.7.2.js" type="text/javascript"></script>

       <script src="js/jquery-ui-1.8.19.custom.min.js" type="text/javascript"></script>

       <style type="text/css">

             #popup1

             {

                    border:1px solid gray;

                    background-color:lightgray;

                    width:200px;

                    height:100px;

                    position:absolute;

                    left:100px;

                    top:100px;

             }

            

             #popup2

             {

                    font-size:12px;

             }

       </style>

       <script type="text/javascript">

             $(document).ready(function () {

                    $("#popup1").hide();

                    $("#popup2").hide();

                    //$("#popup2").dialog();

             });

 

             function Check() {

                    $("#popup1").show();

             }

 

             function Check2() {

                    $("#popup2").dialog(

                    {

                           width: 200,

                           heigh: 100

                    }

                    );

 

                    $("#popup2").parent().css("font-size", "12px");

             }

       </script>

</head>

<body>

       <div id="popup1">대화상자입니다.</div>

       <input type="button" value=" 확인 " onclick="Check();" />

 

       <hr />

 

       <div id="popup2" title="대화상자">대화상자입니다.</div>

       <input type="button" value=" 확인 " onclick="Check2();" />

 

       <hr />

</body>

</html>

 

 

저작자표시

트랙백

※ 스팸 트랙백 차단중 ...{ ? }

Jquery Accordion, Autocomplete, Datepicker 사용 예제

Jquery Accordion, Autocomplete, Datepicker 사용 예제

결과 화면




소스

<html>

<head>

    <title></title>

       <link href="css/smoothness/jquery-ui-1.8.19.custom.css" rel="stylesheet" type="text/css" />

       <script src="js/jquery-1.7.2.js" type="text/javascript"></script>

       <script src="js/jquery-ui-1.8.19.custom.min.js" type="text/javascript"></script>

 

       <script type="text/javascript">

             $(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.toLocaleString());

             }

 

       </script>

       <style type="text/css">

             /* Accordion */

             #list { width:500px; }

             #list a, #list p {font-size:12px;}

            

             /* Autocomplete  */

             body, input, div

             {

                    font-size:12px;

             }

            

             #datepicker

             {

                    font-size:10px;

             }

             input

             {

                   

             }

            

       </style>

</head>

<body>

 

       <!--Accordion-->

       <h3>Accordion</h3>

 

       <div id="list">

             <h3><a href="#">C#</a></h3>

             <div>

                    <p>

                          C#(시 샤프)는 마이크로소프트에서 개발한 객체 지향 프로그래밍 언어로, 닷넷 프레임워크의 한 부분으로 만들었으며 나중에 ECMA (ECMA-334)와 ISO (ISO/IEC/23270)의 표준으로 자리잡았다. C++와 자바와 비슷한 문법을 가지고 있다.

                    </p>

             </div>

             <h3><a href="#">Java</a></h3>

             <div>

                    <p>

                           자바(Java, 문화어: 쟈바)는 썬 마이크로시스템즈의 제임스 고슬링(James Gosling)과 다른 연구원들이 개발한 객체 지향적 프로그래밍 언어이며, 썬 마이크로시스템즈에서 무료로 제공하고 있다. 1991년 그린 프로젝트(Green Project)라는 이름으로 시작해 1995년에 발표했다. 처음에는 가전제품 내에 탑재해 동작하는 프로그램을 위해 개발했지만 현재 웹 애플리케이션 개발에 가장 많이 사용하는 언어 가운데 하나이고, 모바일 기기용 소프트웨어 개발에도 널리 사용하고 있다. 현재 버전 7까지 출시했다.

                    </p>

             </div>

             <h3><a href="#">Visual Basic</a></h3>

             <div>

                    <p>

                           비주얼 베이직(Visual Basic, 문화어: 비쥬얼베이씨크)은 마이크로소프트에서 만든 베이직 프로그래밍 언어의 일종으로, 마이크로소프트 비주얼 스튜디오 제품군의 하나이다. 비주얼 베이직은 이벤트 기반 프로그래밍의 3세대 프로그래밍 언어이면서, 또한 마이크로소프트의 컴포넌트 오브젝트 모델에 따른 풍부한 구성 요소를 가진 통합 개발 환경 및 RAD을 가리키기도 한다. 비주얼 베이직은 초보자가 접근하기 쉬운 장점을 가지고 있는데, 그 이유는 시각적인 개발 환경과 더불어 베이직 언어의 연장선상에 있기 때문으로 간주된다.[

                    </p>

             </div>

             <h3><a href="#">Objective-C</a></h3>

             <div>

                    <p>

                           오브젝티브-C (Objective-C, 종종 ObjC로 표기) 언어는 C 프로그래밍 언어에 스몰토크 스타일의 메시지 구문을 추가한 객체 지향 언어이다.<br />

현재, 이 언어는 애플의 매킨토시의 운영 체제인 맥 오에스 텐과 아이폰의 운영 체제인 iOS에서 사용되고 있다. 오브젝티브-C는 애플의 코코아를 사용하기 위한 기본 언어이며, 원래는 넥스트의 NeXTSTEP 운영 체제에서 주 언어였다. 일반적인(Generic) 오브젝티브-C는 앞에서 언급한 라이브러리를 사용하지 않는다.

                    </p>

             </div>

       </div>

 

       <br /><hr /><br />

 

       <!--Autocomplete-->

 

       회원명 : <input type="text" id="txtName" />

 

       <br /><hr /><br />

      

       <!--Datepicker.htm-->

       <h3>생일을 선택하세요.</h3>

       <div id="datepicker"></div>

       <input type="button" value=" 선택하기 " onclick="Select();" />

 

</body>

</html>

 

 




저작자표시

트랙백

※ 스팸 트랙백 차단중 ...{ ? }

jQuery draggable, droppable, resize, sortable 사용예제

jQuery draggable, droppable, resize, sortable 사용예제

아래 css파일이 있어야지 resize 및 다른 것들도 적용된다.


결과화면


소스 

<html>

<head>

    <title>Jquery UI</title>

 

       <link href="css/smoothness/jquery-ui-1.8.19.custom.css" rel="stylesheet" type="text/css" />

       <style type="text/css">

             #box2

             {

                    border:1px solid black; width:100px; height:100px;

             }

            

             #list .ui-selecting

             {

                    background: yellow;

             }

             #list .ui-selected

             {

                    background: orange;

             }

            

       </style>

      

       <script src="js/jquery-1.7.2.js" type="text/javascript"></script>

       <script src="js/jquery-ui-1.8.19.custom.min.js" type="text/javascript"></script>

       <script type="text/javascript">

             $(document).ready(function ()

             {

                    $("#box").css("border", "1px solid black").css("background-color", "yellow").css("width", "100px").css

                    ("height", "100px").css("position", "absolute").css("left", "200px").css("top", "150px");

 

                    //$("#img1").draggable();

                    $("img").draggable();

 

                    $(document).ready(function ()

                    {

                           $("#img1").draggable();

                           $("#box").droppable(

                           {

                                 drop: function ()

                                 {

                                        alert("확인!");

                                 }

                           });

                    });

 

                    //두번째

                    $(document).ready(function ()

                    {

                           $("#box2").resizable();

                    });

 

 

                    //세번째

                    $(document).ready(function ()

                    {

                           //아이템 위치를 마음대로 변경~!~

                           //겉모습만 변경된다. 실데이타는 그대로이다.

                           $("#list").sortable();

                           //$("#list").selectable();

                    });

 

 

             });

       </script>

</head>

<body>

       <!--ui.htm-->

       <img src="images/adore.png" id="img1" />

       <img src="images/angry.png" id="img2" />

       <img src="images/faint.png" id="img3" />

       <img src="images/cool.png" id="img4" />

       <img src="images/cry.png" id="img5" />

 

       <hr />

 

       <div id="box"></div>

       <img src="images/adore.png" id="img6" />

 

       <hr />

 

       <div id="box2"></div>

 

       <hr />

 

       <ul id="list">

             <li>멍멍이 밥주기</li>

             <li>심부름 다녀오기</li>

             <li>도서관 책 반납하기</li>

             <li>방 청소하기</li>

       </ul>

 

</body>

</html>

 

 

저작자표시

트랙백

※ 스팸 트랙백 차단중 ...{ ? }

Jquery 탐색(Traversing), 관리(Manipulation), 이벤트(Event), jQuery 사이트 이용 팁

Jquery 탐색(Traversing), 관리(Manipulation), 이벤트(Event), jQuery 사이트 이용 팁

jQuery 라이브러리는 최대한 많이 확보하는것이 좋다..


결과화면

                                            


소스

<html>

<head>

    <title>Traversing</title>

 

       <script src="js/jquery-1.7.2.js" type="text/javascript"></script>

       <script type="text/javascript">

             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("background-color", "yellow");

                    $("li:eq(3)").css("background-color", "yellow");

 

                    //맨마지막 태그에 첫번째

                    $("li").eq(-1).css("background-color", "blue");

 

                    //eq(0)

                    $("li").first().css("font-size", "30px");

                    //eq(-1)

                    $("li").last().css("color", "white");

 

                    //

                    $("li").parent().css("border", "10px solid green");

             }

       </script>

 

</head>

<body>

       <!--Ex07_traversing.htm-->

       <h3 id="title">국가명</h3>

       <ul>

             <li>한국</li>

             <li>일본</li>

             <li>중국</li>

             <li>러시아</li>

             <li>호주</li>

             <li>미국</li>

             <li>영국</li>

             <li>프랑스</li>

             <li>독일</li>

             <li>캐나다</li>

       </ul>

      

       <hr />

 

       <input type="button" value=" 테스트 " onclick="Test();" />

</body>

</html>




결과화면

                                                        


소스

<html>

<head>

    <title>manipulation</title>

 

       <script type="text/javascript">

             function Test()

             {

                    //js

 

                    //innerText : 순수한 문자열

                    //document.getElementById("div1").innerText = "<b>아무게</b>";

                    //document.getElementById("div1").innerHTML = "<b>아무게</b>";

 

                    //innerHTML : 내용중 문법을 이해. 동적으로 구조를 핸들링

                    var str = "<input type='text' />";

                    document.getElementById("div1").innerHTML = str;

             }

 

             function Test2()

             {

                    //innerText

                    //alert($("#div1").text());

                    //$("#div1").text("안녕하세요");

 

                    //innerHTML

                    $("#div1").html("<a href='#'>링크</a>");

             }

 

             function Test3()

             {

                    //객체.style.width = "200px";

 

                    //$("#div1").width("200px");

                    //$("#div1").height("200px");

 

                    $("#div1").width("200px").height("200px");

             }

       </script>

       <script src="js/jquery-1.7.2.js" type="text/javascript"></script>

 

</head>

<body>

       <!--Ex08_manipulation.htm-->

       <div id="div1" style="border:1px solid black;">

             홍길동

       </div>

 

       <input type="button" value=" 테스트 " onclick="Test3();" />

</body>

</html>



 

결과화면



소스

<html>

<head>

    <title>이벤트</title>

       <script src="js/jquery-1.7.2.js" type="text/javascript"></script>

       <script type="text/javascript">

             //$(document).ready(Init);//onload="Init();" 와 똑같은 행동..

 

             //function Init()

             //{

             //     alert("안녕");

             //}

 

             //위와같은 방법을 아래와 같이 사용한다.

             //프로그램과 html을 분리하기 위한 방편이다.

             $(document).ready(function ()

             {

                    //btn1의 클릭

                    $("#btn1").dblclick(function ()

                    {

                           alert("안녕~");

                    });

 

                    //$("#btn1").bind("click", function ()

                    //{

                    //     alert("안녕2~");

                    //});

 

                    $("#btn2").click(function ()

                    {

                           $("#btn1").show();

                    });

 

                    $("#btn3").click(function ()

                    {

                           $("#btn1").hide(); //display:none

                    });

 

                    //speed : 밀리초, "slow - 0.6", "fast - 0.2"

                    $("#btn4").click(function ()

                    {

                           //$("#img1").fadeIn(1000);

                           $("#img1").fadeIn("slow");

                    });

 

                    $("#btn5").click(function ()

                    {

                           //$("#img1").fadeOut(1000);

                           $("#img1").fadeOut("fast");

                    });

 

                    $("#btn6").click(function ()

                    {

                           //중간단계 불투명에서 멈춘다.

                           $("#img1").fadeTo(1000, 0.3);

                    });

 

                    $("#btn7").click(function ()

                    {

                           //중간단계 불투명에서 멈춘다.

                           $("#img1").slideUp(1000);

                    });

 

                    $("#btn8").click(function ()

                    {

                           $("#div1").slideUp(1000);

                    });

 

                    $("#btn9").click(function ()

                    {

                           $("#div1").slideDown(1000);

                    });

 

                    $("#btn10").click(function ()

                    {

                           $("#div1").slideToggle(1000);

                    });

 

                    $("#btn11").click(function ()

                    {

                           //$("#div1").animate(

                           $("#div1").delay(1000).animate(

                           {

                                 //WPF에서본거와 비슷하게 애니메이션 형태로 적용..

                                 //width: "300px",

                                 //opacity: 0.3,

                                 //borderWidth: "20px"

                                 width: "toggle",

                                 opacity:"toggle"

                           }, 1000);

                    });

             });

 

       </script>

</head>

<body>

       <input type="button" id="btn1" value=" 확인 " />

 

       <hr />

 

       <input type="button" id="btn2" value=" show() " />

       <input type="button" id="btn3" value=" hide() " />

 

       <hr />

 

       <img src="images/adore.png" id="img1" /><br />

 

       <input type="button" id="btn4" value=" fadeIn() " />

       <input type="button" id="btn5" value=" fadeOut() " />

       <input type="button" id="btn6" value=" fadeTo() " />

       <input type="button" id="btn7" value=" fadeToggle() " />

 

       <hr />

      

 

       <div id="div1" style="border:5px solid gray;width:100px;height:100px;">영역</div>

 

       <input type="button" id="btn8" value=" slideUp() " />

       <input type="button" id="btn9" value=" slideDown() " />

       <input type="button" id="btn10" value=" slideToggle() " />

      

       <input type="button" id="btn11" value=" animate() " />

 

</body>

</html>
















저작자표시

트랙백

※ 스팸 트랙백 차단중 ...{ ? }

Attributes




            

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>Attributes</title>

 

       <style type="text/css">

             #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

             {

                    background-color:Yellow;

                    font-weight:bold;

                    text-decoration:underline;

             }

       </style>

 

 

       <script src="js/jquery-1.7.2.js" type="text/javascript"></script>

       <script type="text/javascript">

             //Attribute

             function Test()

             {

                    var size = $("#txt1").attr("size");

                    //$("#txt1").attr("value", size);

                    $("#txt1").val(size);

             }

 

             function Test2()

             {

                    $("#txt1").removeAttr("size");

 

                    $("#txt1").attr("readonly", "readonly");

                    $("#txt1").attr("title", new Date());

             }

 

             //Class

             function Class1()

             {

                    //클래스 네임만 style을 주게 되면

                    document.getElementById("box").className = "style1";

             }

 

             function Class2()

             {

                    document.getElementById("box").className = "style2";

             }

 

             function Class3()

             {

                    //한번에 하나씩 제어

                    document.getElementById("box").className = "style3";

             }

 

             function Class4()

             {

                    //class관련 함수 = css() 사용 x N개

                    //여러개를 한번에 제어가능

                    $("tr:even").addClass("sel");

             }

 

             function Class5()

             {

                    $("tr:even").removeClass("sel");

             }

 

             function Class6()

             {

                    $("tr:even").toggleClass("sel");

             }

       </script>

 

 

</head>

<body>

 

       <!--Attributes.htm-->

       <input type="button" value=" 테스트 " onclick="Test2();" /><br />

 

       <input type="text" id="txt1" size="30" />

 

       <hr />

 

       <!--class-->

       <div id="box">

             내용물<br />

             내용물<br />

             내용물

       </div>

 

       <input type="button" value="테스트1" onclick="Class1();" />

       <input type="button" value="테스트2" onclick="Class2();" />

       <input type="button" value="테스트3" onclick="Class3();" />

 

       <hr />

 

       <table border="1" width="300">

             <tr>

                    <td>홍길동</td>

                    <td>서울시 영등포구</td>

             </tr>

 

             <tr>

                    <td>아무개</td>

                    <td>서울시 서대문구</td>

             </tr>

             <tr>

                    <td>홍길동</td>

                    <td>서울시 영등포구</td>

             </tr>

 

             <tr>

                    <td>아무개</td>

                    <td>서울시 서대문구</td>

             </tr>

             <tr>

                    <td>홍길동</td>

                    <td>서울시 영등포구</td>

             </tr>

 

             <tr>

                    <td>아무개</td>

                    <td>서울시 서대문구</td>

             </tr>

             <tr>

                    <td>홍길동</td>

                    <td>서울시 영등포구</td>

             </tr>

 

             <tr>

                    <td>아무개</td>

                    <td>서울시 서대문구</td>

             </tr>

             <tr>

                    <td>홍길동</td>

                    <td>서울시 영등포구</td>

             </tr>

 

             <tr>

                    <td>아무개</td>

                    <td>서울시 서대문구</td>

             </tr>

       </table>

 

       <input type="button" value="테스트" onclick="Class4();" />

 

       <input type="button" value="테스트2" onclick="Class5();" />

 

       <input type="button" value="테스트3" onclick="Class6();" />

 

</body>

</html>

 

 



저작자표시

트랙백

※ 스팸 트랙백 차단중 ...{ ? }

ui draggable, drop

소스

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

       <head>

             <title></title>

             <meta name="generator" content="editplus" />

             <meta name="author" content="김종현" />

 

             <script type="text/javascript" src="jquery-1.7.1.js"></script>

             <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

             <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

 

             <style type="text/css">

                    #div1 {

                           width:100px;

                           height:100px;

                           background-color:yellow;

                           z-index:1;

                    }

 

                    #zone {

                           width:150px;

                           height:150px;

                           background-color:yellow;

                           position:absolute;

                           left:300px;

                           top:100px;

 

                    }

             </style>

 

             <script type="text/javascript">

 

                    //문서가 로드될떄..div1을 드래그할 수 있도록...

                    $(document).ready(

                           function () {

                                 $("#div1").draggable();

                                 //$("#div1").draggable({ axis:"x" } );

                                 //$("#div1").draggable({ axis:"y" } );

 

                                 $("#zone").droppable(

                                        {

                                              drop: function () {

                                                     alert("네모 안으로 쏙 들어왔군요~!");

                                              }

                                        }

                                 );

                           }

                    )

             </script>

 

       </head>

 

       <body>

             <!-- Ex22_ui.htm -->

             <!-- <div id="div1">하하하</div> -->

             <img src="images/angry.png" id="div1" />

 

             <div id="zone"></div>

       </body>

</html>

 

결과

 이미지를 마우스로 드래그해 네모안에 넣으면 다음과 같이 alert 창이 나온다.


 


트랙백

※ 스팸 트랙백 차단중 ...{ ? }

jQuery eq를 활용해 태그 선택 예제

jQuery eq를 활용해 태그 선택 예제

소스

<html>

       <head>

             <title></title>

             <meta name="generator" content="editplus" />

             <meta name="author" content="zzarungna" />

             <script type="text/javascript" src="jquery-1.7.1.js"></script>

             <script type="text/javascript">

             <!--

 

                    //문서가 로드될때..

                    $(document).ready(

                           function () {

                                 //할일..

                                 //짝수,홀수 필터

                                 //even, odd

                                 //$("#table1 tr:odd").css("background-color", "yellow");

 

 

                                 //태그의 텍스트 접근

                                 //alert($("#table1 td:eq(1)").text());//읽기

                                 $("#table1 td:eq(1)").text("하하하"); //쓰기

                           }

                    );

 

             //-->

             </script>

       </head>

 

       <body>

             <table border="1" id="table1" width="600">

                    <tr>

                           <td>번호</td>

                           <td>홍길동1</td>

                           <td>서울시 영등포구 하하하</td>

                           <td>2012-01-15</td>

                    </tr>

                    <tr>

                           <td>번호</td>

                           <td>홍길동</td>

                           <td>서울시 영등포구 하하하</td>

                           <td>2012-01-15</td>

                    </tr>

                    <tr>

                           <td>번호</td>

                           <td>홍길동</td>

                           <td>서울시 영등포구 하하하</td>

                           <td>2012-01-15</td>

                    </tr>

                    <tr>

                           <td>번호</td>

                           <td>홍길동</td>

                           <td>서울시 영등포구 하하하</td>

                           <td>2012-01-15</td>

                    </tr>

                    <tr>

                           <td>번호</td>

                           <td>홍길동</td>

                           <td>서울시 영등포구 하하하</td>

                           <td>2012-01-15</td>

                    </tr>

                    <tr>

                           <td>번호</td>

                           <td>홍길동</td>

                           <td>서울시 영등포구 하하하</td>

                           <td>2012-01-15</td>

                    </tr>

                    <tr>

                           <td>번호</td>

                           <td>홍길동</td>

                           <td>서울시 영등포구 하하하</td>

                           <td>2012-01-15</td>

                    </tr>

                    <tr>

                           <td>번호</td>

                           <td>홍길동</td>

                           <td>서울시 영등포구 하하하</td>

                           <td>2012-01-15</td>

                    </tr>

                    <tr>

                           <td>번호</td>

                           <td>홍길동</td>

                           <td>서울시 영등포구 하하하</td>

                           <td>2012-01-15</td>

                    </tr>

                    <tr>

                           <td>번호</td>

                           <td>홍길동</td>

                           <td>서울시 영등포구 하하하</td>

                           <td>2012-01-15</td>

                    </tr>

                    <tr>

                           <td>번호</td>

                           <td>홍길동</td>

                           <td>서울시 영등포구 하하하</td>

                           <td>2012-01-15</td>

                    </tr>

                    <tr>

                           <td>번호</td>

                           <td>홍길동</td>

                           <td>서울시 영등포구 하하하</td>

                           <td>2012-01-15</td>

                    </tr>

                    <tr>

                           <td>번호</td>

                           <td>홍길동</td>

                           <td>서울시 영등포구 하하하</td>

                           <td>2012-01-15</td>

                    </tr>

                    <tr>

                           <td>번호</td>

                           <td>홍길동</td>

                           <td>서울시 영등포구 하하하</td>

                           <td>2012-01-15</td>

                    </tr>

                    <tr>

                           <td>번호</td>

                           <td>홍길동</td>

                           <td>서울시 영등포구 하하하</td>

                           <td>2012-01-15</td>

                    </tr>

                    <tr>

                           <td>번호</td>

                           <td>홍길동</td>

                           <td>서울시 영등포구 하하하</td>

                           <td>2012-01-15</td>

                    </tr>

                    <tr>

                           <td>번호</td>

                           <td>홍길동</td>

                           <td>서울시 영등포구 하하하</td>

                           <td>2012-01-15</td>

                    </tr>

                    <tr>

                           <td>번호</td>

                           <td>홍길동</td>

                           <td>서울시 영등포구 하하하</td>

                           <td>2012-01-15</td>

                    </tr>

                    <tr>

                           <td>번호</td>

                           <td>홍길동</td>

                           <td>서울시 영등포구 하하하</td>

                           <td>2012-01-15</td>

                    </tr>

             </table>

       </body>

</html>

결과화면 



트랙백

※ 스팸 트랙백 차단중 ...{ ? }
이전페이지 다음페이지
방명록 : 관리자 : 글쓰기
zzarungna's Blog is powered by daumkakao
Skin info material T Mark3 by 뭐하라

HOME

프로그래밍 코드를 좋아하고 생활속에 필요한

유용한 IT 정보를 작성 하려고 노력 하고 있습니다.

  • 방명록

관리자 메뉴

  • 관리자 모드
  • 글쓰기
  • 소스 (1521)
    • 프로그래밍 (409)
      • HTML (22)
      • CSS (30)
      • XML (14)
      • Javascript (27)
      • Jquery (13)
      • Ajax (10)
      • ASP (12)
      • PHP (23)
      • Java (36)
      • JSP (8)
      • 안드로이드 (9)
      • C# (52)
      • Winform (32)
      • WPF (13)
      • ADO.NET (8)
      • ASP.NET(4.0) (24)
      • LINQ (2)
      • ORACLE (9)
      • MS - SQL (24)
      • SERVER (10)
      • Programming Exam (6)
      • MySQL (3)
      • EditPlus (6)
      • 재미삼아만든 프로그램 (3)
    • IT 정보 (385)
    • 스마트폰 정보 (216)
      • 안드로이드 (117)
      • 아이폰 (72)
      • 애플리케이션 (21)
    • 게임 (106)
      • PC (50)
      • PS4 (36)
      • 핸드폰 (17)
    • 윈도우 (60)
    • Sony PlayStation (54)
      • PS4 (35)
      • PS5 (10)
      • PS VITA (3)
      • PlayStation Network (6)
    • SNS (61)
      • 카카오톡 (39)
    • 금융 (50)
    • 개인방송 (33)
    • 유튜브 (35)
    • 만화 (19)
    • 스포츠 (12)
    • IT 용어 (5)
    • 다운로드 (3)
    • 노래 (12)
    • 엑셀 (5)
    • 일상 (50)

카테고리

PC화면 보기