① 소스 내용

 <?xml version="1.0" encoding="EUC-KR" ?>

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR" />

<title>jQuery UI</title>

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

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

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

       <script type="text/javascript" src="js/jquery.ui.datepicker-ko.js"></script>

       <script type="text/javascript">

             $(function(){

                    $("#tabs").tabs({

                           // collapsible : 이벤트가 발생할 경우 내용을 접는다.

                           // event: "mouseover", collapsible:true

                           fx: {opacity:'toggle'} // opacity> 투명도

                    }).find( ".ui-tabs-nav" ).sortable({ axis: "x" });

                    $("#acco").accordion({

                           header: "> div > h3"

                    }).sortable({

                           axis: "y",

                           handle: "h3",

                           stop: function( event, ui ) {

                                 // IE doesn't register the blur when sorting

                                  // so trigger focusout handlers to remove .ui-state-focus

                                 ui.item.children( "h3" ).triggerHandler( "focusout" );

                           }

                    });

                    // '2012 9 13 목요일' 형태로 나타내기

                    $("#dp").datepicker({dateFormat:"yy'' m'' dd'' DD", showAnim:"bounce"});

                    $("#notice").dialog({modal:true, autoOpen:false,

                           buttons:{"확인":function(){

                                 alert("확인을 눌렀구만!");

                                 $(this).dialog('close');

                           },"취소":function(){

                                 $(this).dialog('close');

                           }}, position:[100,300]

                    });

             });

             function pop() {

                    $("#notice").dialog('open').dialog({position:[600,100]});

             }

       </script>

</head>

<body>

       <input type="button" value="공지사항" onclick="pop();" />

       <div id="notice" title="공지사항">

             공지사항이아니무니다!        

       </div>

       <input type="text" id="dp" readonly="readonly"/>

       <div id="tabs">

             <ul>

                    <li><a href="#tab1">Matrix</a></li>

                    <li><a href="#tab2">Matrix Reloaded</a></li>

                    <li><a href="#tab3">Matrix Revolution</a></li>

             </ul>

             <div id="tab1">

                    네오의 각성을 다룬 작품

             </div>

             <div id="tab2">

                    스미스요원의 각성, 시온(Zion) 거지생활

             </div>

             <div id="tab3">

                    오라클과 System Administrator 대립과 갈등,<br />

                    네오의 희생과 Zion 독립, Smith요원으로 버그 해결(바이러스 퇴치)

             </div>

       </div>

      

       <div id="acco">

             <div>

                    <h3><a href="#">홍광필</a></h3>

                    <div>

                           <p>

                                 털광필로 불리운다.<br />

                                 반장이고, 나이가 제일 많다.<br />

                                 열정이 가득하다.

                           </p>

                    </div>

             </div>

             <div>

                    <h3><a href="#">송은석</a></h3>

                    <div>

                           <p>

                                 태연에 미쳐있다.<br />

                                 안경이 반사체다. 눈을 보기 힘들다.<br />

                                 완샘과 같이 집에 가는 때가 많다.

                           </p>

                    </div>

             </div>

             <div>

                    <h3><a href="#">송용단</a></h3>

                    <div>

                           <p>

                                 몽골출신이다. 몽골마라고도 한다.<br />

                                 말춤을 잘춘다. 노래방에서만(영상도 있다.)<br />

                                 위키용단이라고도 불린다.(상식이 풍부함, 깊이는 책임못짐)

                           </p>

                    </div>

             </div>

             <div>

                    <h3><a href="#">김은재</a></h3>

                    <div>

                           <p>

                                 김까꿍(!)이란다.<br />

                                 옆에 앉은 남자들이 설설 긴다.<br />

                                 기분에 따라 눈화장을 바꾼다.(뉴질랜드 출신인지도...)

                           </p>

                    </div>

             </div>

       </div>

</body>

</html>


② 실행 화면

jQuery UI

공지사항이아니무니다!
네오의 각성을 다룬 작품
스미스요원의 각성, 시온(Zion)의 거지생활
오라클과 System Administrator의 대립과 갈등,
네오의 희생과 Zion 독립, Smith요원으로 버그 해결(바이러스 퇴치)

홍광필

털광필로 불리운다.
반장이고, 나이가 제일 많다.
열정이 가득하다.

송은석

태연에 미쳐있다.
안경이 반사체다. 눈을 보기 힘들다.
완샘과 같이 집에 가는 때가 많다.

송용단

몽골출신이다. 몽골마라고도 한다.
말춤을 잘춘다. 노래방에서만(영상도 있다.)
위키용단이라고도 불린다.(상식이 풍부함, 깊이는 책임못짐)

김은재

김까꿍(풉!)이란다.
옆에 앉은 남자들이 설설 긴다.
기분에 따라 눈화장을 바꾼다.(뉴질랜드 출신인지도...)



블로그 이미지

모데스티

,

① 소스내용

<?xml version="1.0" encoding="EUC-KR" ?>

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR" />

<title>JQuery (총복습)</title>

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

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

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

       <script type="text/javascript">

             function execute(){

                    // img 태그의 src img/1.jpg 세팅

                    // $("img").attr('src','img/1.jpg');

                    var names = ["태연","서현","유리","제시카","써니","윤아","티파니"];

                    $('img').attr("width","200px").each(function(i){

                           // 선택된 각각의 것에 대해서 기능이 실행된다.

                           // 클릭시 alt 속성의 값을 alert으로 보여주기

                           $(this).attr("src","img/"+(i+1)+".jpg")

                           .attr('alt',names[i]).click(function(){

                                 // alert($(this).attr("alt"));

                                 if($(this).next().html()=="")

                                        $(this).next().html(1);

                                 else {

                                        var no=Number($(this).next().html());

                                        $(this).next().html(no+1);

                                 }

                                        //$(this).next().html(no++);

                                 // alert($(this).next().html());

                                 // 이미지 옆에 숫자를 추가(클릭횟수)

                           });

                    });

             }

       </script>

</head>

<body>

       <input type="button" value="실행" onclick="execute();"/>

       <div id="target">

             <h1>블랙소시</h1>

             <img src="" alt="" /><span></span><br />

             <img src="" alt="" /><span></span><br />

             <img src="" alt="" /><span></span><br />

             <img src="" alt="" /><span></span><br />

             <img src="" alt="" /><span></span><br />

             <img src="" alt="" /><span></span><br />

             <img src="" alt="" /><span></span><br />

       </div>

</body>

</html>


② 실행 화면

JQuery (총복습)

블랙소시










블로그 이미지

모데스티

,

① JQuery 소스

<?xml version="1.0" encoding="EUC-KR" ?>

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR" />

<title>JQuery 3(동적 생성과 traversing)</title>

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

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

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

        <script type="text/javascript">

        // $ >> jQuery 객체

        // 버튼을 찾아서 click이벤트를 걸고 클릭시 alert("클릭"); 되도록

        $(function(){

               $(":button[value=실행]").click(function(){

                       // 모든 div 이미지를 추가

                       $("div").append("<img src='teayeon2.jpg' width='50'/>")

                              .find(':odd').width(100).click(function(){

                                      $(this).toggle(2000);

                              }).end().animate({height:"+=20", width:"-=100"},1000);

                       // end(): 끝내고 처음 선택자로 돌아간다.

                       // json 방식 : {name:value, name1:value1}

               });

               var no=1;

               $("div.target").dblclick(function(){

                       $(this).prepend(no++);

               });

               $("div").css("border","solid thin blue")

                       .css("background-color", "#D0D0D0"); // background-color = backgroundColor

        });

        </script>

</head>

<body>

        <input type="button" value="실행" />

        <div class="target">디아이브이1</div>

        <div class="target">디아이브이2</div>

        <div class="target">디아이브이3</div>

        <div class="target">디아이브이4</div>

        <div class="target">디아이브이5</div>

</body>

</html>


② 실행화면

JQuery 3(동적 생성과 traversing)

디아이브이1
디아이브이2
디아이브이3
디아이브이4
디아이브이5


블로그 이미지

모데스티

,

① JQuery소스

<?xml version="1.0" encoding="EUC-KR" ?>

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR" />

<title>Insert title here</title>

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

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

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

        <script type="text/javascript">

               $(function(){

                       // body 로딩이 끝나고 실행된다.

                       // alert("정말??/");

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

                              // this>> all function안에 다시 all 써야하는 경우 대체할 있다.

                              // if($(this).attr("checked")=="checked")

                              var boo = false;

                              if($(this).is(":checked")){

                                      // $("input[name=cb]").attr("checked","checked");

                                      //$("input[name=cb]").attr("checked",false);

                                      boo = true;

                              } $("input[name=cb]").attr("checked",boo);

                       });

               });

               // Jquery 사용하지 않고 구현하기

               function chk(all){

                       var cb = document.getElementsByName("cb"); // 배열

                       var boo = false;

                       if(all.checked) boo = true;

                       for(var i=0; i<cb.length; i++){

                              cb[i].checked=boo;

                       }

                      

               }

        </script>

</head>

<body>

        <input type="checkbox" value="all" id="all" checked="checked" onclick="chk(this);"/> 전체  <br />

        <input type="checkbox" value="1" name="cb"/> 1  <br />

        <input type="checkbox" value="2" name="cb"/> 2  <br />

        <input type="checkbox" value="3" name="cb"/> 3  <br />

        <input type="checkbox" value="4" name="cb"/> 4  <br />

        <input type="checkbox" value="5" name="cb"/> 5  <br />

        <input type="checkbox" value="6" name="cb"/> 6  <br />

        <input type="checkbox" value="7" name="cb"/> 7  <br />

        <input type="checkbox" value="8" name="cb"/> 8  <br />

        <input type="checkbox" value="9" name="cb"/> 9  <br />

        <input type="checkbox" value="10" name="cb"/> 10  <br />

</body>

</html>


② 실행화면

Insert title here 전체
1번
2번
3번
4번
5번
6번
7번
8번
9번
10번


블로그 이미지

모데스티

,

① JQuery 소스

<?xml version="1.0" encoding="EUC-KR" ?>

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR" />

<title>JQuery 1</title>

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

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

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

        <script type="text/javascript">

               function execute() {

                       // Jquery에서는 메소드이름이 $

                       // $("#target").toggle(3000); // id target선택 ,hide() 숨기기, toggle() = hide()+show()

                       // $("img.ttt").toggle(1000); // img태그중 class ttt 선택

                       // $("img:first").fadeOut(1000); // img태그중 첫번째

                       // $("img:last").fadeOut(1000); // img태그중 마지막 , 이펙트와 관련된 것들은 동시실행

                       // $("img:even").toggle(1000); // img 홀수번째를 toggle : index 0부터 시작(0 짝수)

                       // $("div img").attr("src","teayeon.jpg"); // div img태그에 있는 사진 바꾸기, 속성세팅

                       // document.getElementById("horse").src="teayeon.jpg";

                       // alert($("div img").attr("src")); // 속성값 가져오기

                       // class ttt 아닌것 선택

                       // $("img:not(.ttt)").slideToggle(1000);

               }

        </script>

</head>

<body>

        <input type="button" value="!!!" onclick="execute();" />

        <div id="target" style="border-style: solid;">

               <img src="teayeon2.jpg" alt="태연" width="200" />

               <img src="teayeon2.jpg" alt="태연" width="200" />

        </div>

        <img src="teayeon2.jpg" alt="태연" width="80" class="ttt"/>

        <img src="teayeon2.jpg" alt="태연" width="80" class="ttt"/>

        <img src="teayeon2.jpg" alt="태연" width="80" class="ttt"/>

        <img src="teayeon2.jpg" alt="태연" width="80" class="ttt"/>

        <img src="teayeon2.jpg" alt="태연" width="80" class="ttt"/>

        <img src="teayeon2.jpg" alt="태연" width="80" class="ttt"/>

        <img src="teayeon2.jpg" alt="태연" width="80" />

        <img src="teayeon2.jpg" alt="태연" width="80" />

        <img src="teayeon2.jpg" alt="태연" width="80" />

       

</body>

</html>


② 실행화면

JQuery 1

태연 태연
태연 태연 태연 태연 태연 태연 태연 태연 태연


블로그 이미지

모데스티

,