블로그 이미지
Magic_kit
study 관련자료를 한곳으로 자기 개발 목적으로 재태크 재무 관리 목적으로 일상생활의 팁을 공유 하기 위하여 블로그를 개설 하였습니다.

calendar

 «  » 2025.1
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
반응형

Category

Recent Post

Recent Comment

Archive

2009. 11. 13. 09:34 .Net Project/Jquery 1.3.2

58장 JQueryAjax HTMLSamplePage ( HTMLSamplePage )

반응형

 




HTMLSamplePage.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>Sample Page</title>

    <style type="text/css">

        .redColor { color:Red;}

    </style>

<!--    <script src="../../jquery-1[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(//"이메시지 먼저 출력됨 Whey 비동기")

            });

 

        });

    </script>-->

   

</head>

<body>

<h3>Sample Page</h3>

<div>

    샘플  페이지 입니다..</div>

 

</body>

</html> 


 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>Sample Page</title>

    <style type="text/css">

        .redColor { color:Red;}

    </style>

    <script src="../../jquery-1[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("이메시지 먼저 출력 Whey 비동기..")

            });

 

        });

    </script>

   

</head>

<body>

<div id="btn">

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

</div>

 

<div id="ctlGrid"></div>

 

</body>

</html> 






반응형

'.Net Project > Jquery 1.3.2' 카테고리의 다른 글

60장 JQueryAjax getScript 파일 동적 실행 (JQuery.getScript)  (0) 2009.11.13
59장 JQueryAjax getjSON활용 페이지 로드 (JQuery.getjSON)  (0) 2009.11.13
57장 JQueryEffect WaterMarketText (WaterMarketText)  (0) 2009.11.12
56장 JQueryEffect 트리 뷰 효과 (TreeView)  (0) 2009.11.12
55장 JQueryEffect 에니메이션 효과 정지 (Stop)  (0) 2009.11.12
posted by Magic_kit
2009. 11. 12. 14:57 .Net Project/Jquery 1.3.2

57장 JQueryEffect WaterMarketText (WaterMarketText)

반응형
WaterMarketText.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>WaterMarketText</title>

    <script src="../../jsp/jquery-1[1].3.2-vsdoc2.js" type="text/javascript"></script>

    <style type="text/css">

        .water { color:Silver;}

    </style>

    <script type="text/javascript">

        $(document).ready(function () {

            //로드 텍스트 박스를 클래스 적용

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

 

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

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

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

            .focus(function () {

                if (this.value == watermakedText) {

                    $(this).val(''); //텍스 입력 가능하도록

                    $('#txtUserID').removeClass("water"); //텍스트 입력시 제거

                }

            })

            .blur(function () {

                if (this.value == '') {

                    $(this).val(watermakedText); //아이디 지정하지 하지 않으면
                                //워터 텍스트 지정 ´

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

                }

            });

 

            //전송시 값 입력하시지 않으면 워터텍스트 초기화

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

                //빈값으로 초기화

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

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

                }

            });

        });   

    </script>

</head>

<body>

<form name="frm" action="WaterMarketText.aspx" method="post">

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

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

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

 

</form>

 

</body>

</html>

 WaterMarketText.Aspx.Cs
 
WebJQuery.rar







반응형

'.Net Project > Jquery 1.3.2' 카테고리의 다른 글

59장 JQueryAjax getjSON활용 페이지 로드 (JQuery.getjSON)  (0) 2009.11.13
58장 JQueryAjax HTMLSamplePage ( HTMLSamplePage )  (0) 2009.11.13
56장 JQueryEffect 트리 뷰 효과 (TreeView)  (0) 2009.11.12
55장 JQueryEffect 에니메이션 효과 정지 (Stop)  (0) 2009.11.12
54장 JQueryEffect 슬라이더 처리 (SlideExample)  (0) 2009.11.12
posted by Magic_kit
2009. 11. 12. 14:54 .Net Project/Jquery 1.3.2

56장 JQueryEffect 트리 뷰 효과 (TreeView)

반응형
TreeView.htm 
 간단설명)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title></title>
  <script src="../../jsp/jquery-1[1].3.2-vsdoc2.js" type="text/javascript"></script>
  <link rel="stylesheet"
href="http://dev.jquery.com/view/trunk/plugins/treeview/demo/screen.css" type="text/css" />

  <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/treeview/jquery.treeview.css" type="text/css" />

  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/treeview/jquery.treeview.js"></script>
  <script type="text/javascript">
      $(document).ready(function () {
          $("#example").treeview();
      });
  </script>
 
</head>
<body>
  <ul id="example" class="filetree">
  <li><span class="folder">Folder 1</span>
   <ul>
    <li><span class="file">Item 1.1</span></li>
   </ul>
  </li>
  <li><span class="folder">Folder 2</span>
   <ul>
    <li><span class="folder">Subfolder 2.1</span>
     <ul>
      <li><span class="file">File 2.1.1</span></li>
      <li><span class="file">File 2.1.2</span></li>
     </ul>
    </li>
    <li><span class="file">File 2.2</span></li>
   </ul>
  </li>
  <li class="closed"><span class="folder">Folder 3 (closed at start)</span>
   <ul>
    <li><span class="file">File 3.1</span></li>
   </ul>
  </li>
  <li><span class="file">File 4</span></li>
 </ul>
</body>
</html>






반응형

'.Net Project > Jquery 1.3.2' 카테고리의 다른 글

58장 JQueryAjax HTMLSamplePage ( HTMLSamplePage )  (0) 2009.11.13
57장 JQueryEffect WaterMarketText (WaterMarketText)  (0) 2009.11.12
55장 JQueryEffect 에니메이션 효과 정지 (Stop)  (0) 2009.11.12
54장 JQueryEffect 슬라이더 처리 (SlideExample)  (0) 2009.11.12
53장 JQueryEffect 여러가지 효과 동시처리 (Animate)  (0) 2009.11.12
posted by Magic_kit
2009. 11. 12. 14:48 .Net Project/Jquery 1.3.2

55장 JQueryEffect 에니메이션 효과 정지 (Stop)

반응형
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:Red;

            left:0px;

            top:30px;

            width:60px;

            height:60px;

            margin:5px;

    </style>

    <style type="text/css">

        .redColor { color:Red;}

    </style>

    <script src="../../jquery-1[1].3.2-vsdoc2.js" 
            type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            //start

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

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

            });

            //Stop

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

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

            });

            //Before

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

                $(".block").animate({ left: '-=500px', top: '-=500px' }, 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>






반응형

'.Net Project > Jquery 1.3.2' 카테고리의 다른 글

57장 JQueryEffect WaterMarketText (WaterMarketText)  (0) 2009.11.12
56장 JQueryEffect 트리 뷰 효과 (TreeView)  (0) 2009.11.12
54장 JQueryEffect 슬라이더 처리 (SlideExample)  (0) 2009.11.12
53장 JQueryEffect 여러가지 효과 동시처리 (Animate)  (0) 2009.11.12
52장 JQueryEffect 보이기/숨기기 (SlideUp)  (0) 2009.11.12
posted by Magic_kit

티스토리툴바