"새 항목 추가"로 "Html" 형식의 파일인 [jQuery.getScript.htm]과 "JScript" 형식의 파일인 [jQuery.getScript.js]를 만들고 각각 코드를 아래와 같이 작성한다.




[jQuery.getScript.htm]


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

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

    <script type="text/javascript">

        $(document).ready(function () {

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

                // 아래 코드가 실행되는 시점에 js 파일의 기능 실행됨

                $.getScript('03.jQuery.getscript.js');

            });

        });

    </script>

</head>

<body>

<input type="button" id="btn" value="표그리기" />

<div id="ctlGrid">

</div>

</body>

</html>

 



-------------------------------------------------------------------------------------




[jQuery.getScript.js]

// JSON 데이터

var tableData = [

    { "Num": "1", "Name": "홍길동", "Title": "안녕" },

    { "Num": "2", "Name": "백두산", "Title": "방가" },

    { "Num": "3", "Name": "임꺽정", "Title": "또봐" }

];

 

var htmls = '';

 

htmls += "<table border='1'>"

htmls += "<tr><th>번호</th><th>이름</th><th>제목</th></tr>";

$.each(tableData, function() {

    htmls += "<tr>";

    htmls += "<td>" + this['Num'] + "</td>";

    htmls += "<td>" + this['Name'] + "</td>";

    htmls += "<td>" + this['Title'] + "</td>";

    htmls += "</tr>";

});

htmls += "</table>";

 

$('#ctlGrid').html(htmls); // ctlGrid는 포함될 HTML에 있는 레이어

 

 



-------------------------------------------------------------------------------------




[실행결과]

--> 첫 화면. '표그리기'버튼을 누르기 전 화면.
 





--> '표그리기'버튼을 누른 후 화면.

 

 

 

Posted by holland14
:



JSON(JavaScript Object Notation)


- Key와 Value로 구성
- []를 사용하여 배열형 Value 사용 가능
- JSON 공식 사이트 -
http://json.org/ 
 


"새 항목 추가"로 "Html" 형식의 파일인 [jQuery.getJSON.htm]과 "JScript" 형식의 파일인 [jQuery.getJSON.js]를 만들고 각각 코드를 아래와 같이 작성한다.




[jQuery.getJSON.htm]

<!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>비동기적으로 JSON파일 로드</title>

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

    <script type="text/javascript">

        $(document).ready(function() {

            $("#btn .btnLoad").click(function() {

                $.getJSON("02.jQuery.getJSON.js", function(data) {

                    $('#pnlDisplay').empty(); // 패널(div)의 내용 초기화

                    var table = "<table border='1'><tr><td>인덱스</td><td>번호</td><td>이름</td></tr>";

                    // data를 탐색 : each() 메서드를 사용해서 데이터가 있는만큼 반복

                    $.each(data, function(index, entry) {

                        table += '<tr>';

                        table += '<td>' + index + '</td>';

                        table += '<td>' + entry["Num"] + '</td>';

                        if (entry["Name"]) { // 특정 필드를 비교할 때 이러한 표현법 사용

                            table += '<td>' + entry["Name"] + '</td>';

                        }

                        table += '</tr>';

                    });

                    table += "</table>";

                    $('#pnlDisplay').append(table); // 패널에 추가하기

                });

            });

        });   

    </script>       

</head>

<body>

    <div id="btn"><div class="btnLoad">HTML읽어오기</div></div>

    <div id="pnlDisplay">

    </div>

</body>

</html>

 



-------------------------------------------------------------------------------------




[jQuery.getJSON.js]


[

    {

        "Num": "1",

        "Name": "홍길동"

    },

    {

        "Num": "2",

        "Name": "백두산"

    },

    {

        "Num": "3",

        "Name": "한라산"

    }

]

 


-------------------------------------------------------------------------------------

 


[실행결과]

--> 첫 화면. 아래그림에서 'HTML읽어오기'텍스트를 마우스로 클릭하면...





--> 아래그림과 같이 'HTML읽어오기'텍스트 아래에 테이블이 출력된다.





Posted by holland14
:



"jQuery Ajax"메서드를 테스트 해볼 "샘플페이지"를 만들기 위해 "새  항목 추가"로 'Html형식'파일인 [HtmlSamplePage.htm]을 생성한 후 아래와 같이 간단한 코드를 작성한다.



 
[HtmlSamplePage.htm]



<
div>

    <h3>샘플 페이지</h3>

    <div>

        샘플 페이지입니다.

    </div>

</div>

 



-------------------------------------------------------------------------------------




[jQuery.load.htm]




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

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

    <script type="text/javascript">

        $(document).ready(function() {

            $("#btn .btnLoad").click(function() {

                $('#ctlGrid').load("01.HtmlSamplePage.htm");        // 비동기적으로 페이지로드

                window.alert("이 메시지는 먼저 출력됨. Why? 비동기."); // 메시지박스가 먼저 출력 가능

            });

        });   

    </script>   

</head>

<body>

<div id="btn">

    <div class="btnLoad">HTML읽어오기 버튼</div>

</div>

<div id="ctlGrid">

</div>

</body>

</html>

 

 

-------------------------------------------------------------------------------------

 


[실행결과]

--> 첫 화면. 아래그림에서 'HTML읽어오기 버튼'텍스트를 마우스로 클릭하면...
 





--> 아래그림과 같이 '메시지박스'가 출력되고, '메시지박스'의 '확인'버튼을 마우스로 클릭하면...




--> '메시지박스'는 사라지고, 아래그림과 같이 "비동기적"으로 "샘플 페이지"가 로드된다.

 

 

 

Posted by holland14
:

"WaterMarkTextBox"라는 이름으로 새 폴더를 하나 생성하고, 그 폴더에 "새 항목 추가"를 2번 하여 "html형식"의 파일인 [WaterMarkTextBox.htm]과 "웹 폼(Web Form)형식"의 파일인 [WaterMarkTextBox.aspx]를 만든다. 그 다음 [WaterMarkTextBox.htm]과 [WaterMarkTextBox.aspx]의 코드비하인드 페이지인 [WaterMarkTextBox.aspx.cs]에 코드를 작성한다. (참고로, [WaterMarkTextBox.aspx]의 소스코드와 [WaterMarkTextBox.aspx.cs]의 코드 위쪽("Inherits"부분과 "클래스선언" 부분)에 적혀져 있는 ".13"이라는 문자열을 지우고 실행해야 정상적으로 실행된다.)



[WaterMarkTextBox.aspx] 부분 수정

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="WaterMarkTextBox.aspx.cs" Inherits="Sample_WaterMarkTextBox_WaterMarkTextBox" %>





[WaterMarkTextBox.aspx.cs] 부분 수정

public partial class Sample_WaterMarkTextBox_WaterMarkTextBox : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {


 

-------------------------------------------------------------------------------------


[WaterMarkTextBox.htm]

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

    <style type="text/css">

        .water { color:Silver; }

    </style>

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

    <script type="text/javascript">

        $(document).ready(function() {

            // 로드시 텍스트박스의 텍스트에 water 클래스 적용

            $('#txtUserID').addClass("water");

            // 레이블의 값을 워터마크텍스트로 가져옴

            var watermakedText = $('#lblUserID').remove().text();

            $('#txtUserID').val(watermakedText)

                .focus(function() {

                    if (this.value == watermakedText) {

                        $(this).val(''); // 텍스트를 입력가능하도록 클리어

                        $('#txtUserID').removeClass("water"); // water CSS 클래스 제거

                    }

                })

                .blur(function() {

                    if (this.value == '') {

                        $(this).val(watermakedText); // 아이디를 입력하지 않으면 다시 워터마크텍스트로 지정

                        $('#txtUserID').addClass("water"); // water CSS 클래스 재 적용

                    }

                });

            // 전송시 값을 입력하지 않으면, 빈값으로 초기화

            $('form').submit(function() {

                // 텍스트박스의 값이 워터마크텍스트라면 빈값으로 처리

                if ($('#txtUserID').val() == watermakedText) {

                    $('#txtUserID').val('');

                    return false; // submit 이벤트 멈춤

                }

            });

        }); // end ready()

    </script>

</head>

<body>

<form name="frm" action="WaterMarkTextBox.aspx">

    <label for="txtUserID" id="lblUserID">아이디를 입력하시오.</label>

    <input type="text" name="txtUserID" id="txtUserID" />

    <input type="submit" value="전송" />

</form>

</body>

</html>

 



-------------------------------------------------------------------------------------

 


[WaterMarkTextBox.aspx]

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="WaterMarkTextBox.aspx.cs" Inherits="Sample_WaterMarkTextBox_WaterMarkTextBox" %>

 

<!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 id="Head1" runat="server">

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

   

    </div>

    </form>

</body>

</html>

 



-------------------------------------------------------------------------------------


[WaterMarkTextBox.aspx.cs]



using System;

 

public partial class Sample_WaterMarkTextBox_WaterMarkTextBox : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

        Response.Write("입력한 아이디 : " + Request["txtUserID"]);

    }

}






-------------------------------------------------------------------------------------




[실행결과]

--> 첫 화면.





--> 마우스 커서를 텍스트박스 안으로 클릭하여 이동하였을 때의 텍스트박스 화면.




--> 마우스 커서를 다시 텍스트박스 밖으로 클릭하여 이동하였을 때의 텍스트박스 화면.





--> 텍스트박스에 텍스트를 아래그림과 같이 입력하고 '전송'버튼을 누르면...





--> 아래 그림과 같이 웹 페이지에, 바로 위의 그림에서 입력했던 텍스트가 출력된다.

 

 

 

Posted by holland14
:

 

[TreeView.htm]


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

    <style type="text/css">

   

    </style>

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

    <script type="text/javascript">

        $(document).ready(function() {

            //[1] 리스트의 기본 모양 지정 : <ul>를 자식으로 가지지 않는 li의 불릿기호는 기본 모양

            $('li:not(:has(ul))').css({ cursor: 'default', 'list-style-image': 'none' });

 

            //[2] 자식 요소를 갖는 li에 대해서는 plus.gif를 지정

            $('li:has(ul)') // 자식 요소를 같는 요소에 대해서

                .css({ cursor: 'pointer', 'list-style-image': 'url(plus.gif)' }) // +기호로 설정

                .children().hide(); // 자식 요소 숨기기

               

            //[3] +로 설정된 항목에 대해서 click 이벤트 적용

            $('li:has(ul)').click(function(event) {

                // this == event.target으로 현재 선택된 개체에 대해서 처리

                if (this == event.target) {

                    // 숨겨진 상태면 보이고 -기호로 설정, 그렇지 않으면 숨기고 +기호로 설정

                    if ($(this).children().is(':hidden')) {

                        // 보이기

                        $(this).css('list-style- image', 'url(minus.gif)').children().slideDown();

                    }

                    else {

                        // 숨기기

                        $(this).css('list-style-image', 'url(plus.gif)').children().slideUp();

                    }

                }

                return false;

            });

        });

    </script>

</head>

<body>

    <fieldset>

        <legend>트리뷰 구현하기</legend>

        <ul>

            <li>닷넷코리아</li>

            <li>자바캠퍼스</li>

            <li>비주얼아카데미

                <ul>

                    <li>라이센스마스터</li>

                    <li>닷넷마스터

                        <ul>

                            <li>C#</li>

                            <li>ASP.NET</li>

                            <li>silverlight</li>

                        </ul>

                    </li>

                    <li>자바마스터</li>

                </ul>

            </li>           

        </ul>

    </fieldset>

</body>

</html>

 



-------------------------------------------------------------------------------------

 


[실행결과]

 

 


 

Posted by holland14
:

 

[Stop.htm]

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

    <style type="text/css">

        div {

            position: absolute; background-color:#abc; left: 0px; top:50px;

            width: 60px; height: 60px; margin: 5px;

        }

    </style>

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

    <script type="text/javascript">

        $(document).ready(function() {

            // Start animation

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

                $(".block").animate({ left: '+=100px', top: '+=100px' }, 2000);

            });

            // Stop animation when button is clicked

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

                $(".block").stop();

            });

            // Start animation in the opposite direction

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

                $(".block").animate({ left: '-=100px', top: '-=100px' }, 2000);

            });

        }); 

    </script>

</head>

<body>

    <button id="go">Go</button>

    <button id="stop">STOP!</button>

    <button id="back">Back</button>

    <div class="block"></div>

</body>

</html>

 

 


-------------------------------------------------------------------------------------

 


[실행결과]

 

 

 

 

Posted by holland14
:

 

[Animate.htm]



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

    <style type="text/css">

        #my .hover {

            cursor:pointer;

            background-color:Yellow;

    </style>

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

    <script type="text/javascript">

        $(document).ready(function() {

            $("#moreRegion").hide(); // 기본값으로 숨기기

            $("span.more").click(function() {

                $("#moreRegion").animate({

                    height: '200px', width: 'show', opacity: 'show'

                }, 'slow');

                $(this).hide('fast');

            });

        });

    </script>

</head>

<body>

<div class="region">

안녕하세요. 여기는 본문입니다.

<span class="more">more...</span>

</div>

<div id="moreRegion" style="height:100px;background-color:Yellow;">

또 만나요

</div>

</body>

</html>

 



-------------------------------------------------------------------------------------

 


[실행결과]

--> 첫 화면.





--> 위의 그림에서 "more..."를 마우스로 클릭하였을 때 화면. (노란색의 "영역"과 '또 만나요' 텍스트가 출력된다.)



 

 

Posted by holland14
:



[SlideToggle.htm]



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

    <style type="text/css">

        #my .hover {

            cursor:pointer;

            background-color:Yellow;

    </style>

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

    <script type="text/javascript">

        $(document).ready(function () {

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

                //[!] 숨김->보임->숨김

                $("#first").slideToggle('slow');

            });

        });

    </script>

</head>

<body>

<input type="button" id="btn" value="슬라이드 토글" />

<div id="first" style="display:none;background-color:Yellow;height:100px;">

첫번째 영역

</div>

</body>

</html>

 



-------------------------------------------------------------------------------------

 


[실행결과]

--> 첫 화면. '슬라이드 토글'버튼을 누르기 전...





--> '슬라이드 토글'버튼을 누른 후 화면. 




--> '슬라이드 토글'버튼을 다시 눌렀을 때의 화면. (버튼을 누를때 마다 '슬라이드 업/슬라이드 다운'이 반복된다(-> 토글)).










 

Posted by holland14
:

 

[SlideUp.htm]

 

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

    <style type="text/css">

        #my .hover {

            cursor:pointer;

            background-color:Yellow;

    </style>

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

    <script type="text/javascript">

        $(document).ready(function () {

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

                $("#first")

                    .fadeIn('slow')    // 서서히 보이기

                    .slideUp(3000);     // 슬라이드업 : 숨기기

            });

 

        });

    </script>

</head>

<body>

<input type="button" id="btn" value="슬라이드 업" />

<div id="first" style="display:none;background-color:Yellow;height:100px;">

첫번째 영역

</div>

<div id="second">

두번째 영역

</div>

</body>

</html>

 



-------------------------------------------------------------------------------------

 


[실행결과]

--> 첫 화면. '슬라이드 업'버튼을 누르기 전의 화면.







--> '슬라이드 업'버튼을 누르면 아래그림에서 노란색의 영역이 차츰 올라간다.(-> SlideUp)





--> 최종화면.


 


 

Posted by holland14
:

 

[FadeInFadeOut.htm]


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

    <style type="text/css">

    #my .hover {

        cursor:pointer;

        background-color:Yellow;

    }

    div { background-color:Silver; height:100px; }

    </style>

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

    <script type="text/javascript">

        $(document).ready(function() {

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

                $("#first").fadeIn('slow'); // 서서히 나타나기

                $('#second').fadeOut('fast'); // 서서히 감추기

            });

        });

    </script>

</head>

<body>

    <input type="button" id="btn" value="페이드 효과 주기" />

    <div id="first" style="display:none;background-color:Yellow;">

    첫번째 영역

    </div>

    <div id="second">

    두번째 영역

    </div>

</body>

</html>

 

 
-------------------------------------------------------------------------------------

 


[실행결과]


 






 

 


 

Posted by holland14
: