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

calendar

 «  » 2024.12
일 월 화 수 목 금 토
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. 25. 12:12 .Net Project/Jquery 1.3.2

82장 JQuerySample 체크 박스 선택/해제 (CheckBoxAllCheck.htm)

반응형
 CheckBoxAllCheck.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 () {

            //[1] 전체 선택 체크 박스 클릭시

            $('#chkAll').click(function () {

                // ul에 포함 되어져 있는 모든 체큽박스를 가져옴

                var $checkboxes = $(this).parents('ul:first').find(':checkbox');

                // chkAll 체크 되어져 있다면 "체크 선택" -> "선택 해제"

                if (this.checked) {

                    $(this).next().text("선택해제"); // <em>의 텍스트

                    $checkboxes.attr('checked', 'true');
                }

                else {

                    $(this).next().text('전체선택');

                    $checkboxes.attr('checked', '');

                }

            });           

        });

    </script>

</head>

<body>

    <ul>

        <li><label><input type="checkbox" id="chkAll" /><em>전체선택em></label></li>

        <li><label><input type="checkbox" id="Checkbox1" />C#</label></li>

        <li><label><input type="checkbox" id="Checkbox2" />ASP.NET</label></li>

        <li><label><input type="checkbox" id="Checkbox3" />Silverlight</label></li>

        <li><label><input type="checkbox" id="Checkbox4" />WPF</label></li>

    </ul>

</body>

</html> 




반응형

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

84장 JQuerySample 예시 테이블 (TableEvenOdd.htm)  (0) 2009.11.25
83장 JQuerySample 예시 테이블 (Table.htm)  (0) 2009.11.25
81장 JQueryPlugIn 사진 상세 보기 (RedPlusPhotoView.htm)  (0) 2009.11.25
80장 JQueryPlugIn 새로운 함수 생성 (Replace.htm)  (0) 2009.11.25
79장 JQueryUI 탭 컨트롤 (Tabs.htm)  (0) 2009.11.25
posted by Magic_kit
2009. 11. 25. 11:29 .Net Project/Jquery 1.3.2

81장 JQueryPlugIn 사진 상세 보기 (RedPlusPhotoView.htm)

반응형
 RedPlusPhotoView.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>

    <link href="jquery.redplus.photoview.css" rel="stylesheet" type="text/css" />

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

    <script src="jquery.redplus.photoview.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            // 썸 내일 이미지 개체 리스트에 상세 이미지 출력

            $('#products img').photoview({

                photoElement: '#photo',           // 사진 보여줄 개체

                previousControl: '#prev',         // 이전 버튼 개체

                nextControl: '#next',             // 다음 버튼 개체

                firstControl: '#first',           // 처음 버튼 개체

                lastControl: '#last'              // 마지막 버튼 개체

            });   

        });

    </script>

</head>

<body>

    <h1>상품 상세 보기</h1>

    <div id="products">

        <img src="../ProductImages/thumbs/BOOK-01.jpg" />

        <img src="../ProductImages/thumbs/COM-01.jpg" />

        <img src="../ProductImages/thumbs/HARDWARE-01.jpg" />

        <img src="../ProductImages/thumbs/Online-01.jpg" />

        <img src="../ProductImages/thumbs/SOFTWARE-01.jpg" />

    </div>

    <div id="big">

      <img id="photo" src="" alt="상세 이미지 " />

    </div>

    <div id="navi">

      <button type="button" id="first">처음¨ö</button>

      <button type="button" id="prev">이전</button>

      <button type="button" id="next">다음</button>

      <button type="button" id="last">마지막 </button>

    </div>   

</body>

</html> 




반응형

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

83장 JQuerySample 예시 테이블 (Table.htm)  (0) 2009.11.25
82장 JQuerySample 체크 박스 선택/해제 (CheckBoxAllCheck.htm)  (0) 2009.11.25
80장 JQueryPlugIn 새로운 함수 생성 (Replace.htm)  (0) 2009.11.25
79장 JQueryUI 탭 컨트롤 (Tabs.htm)  (0) 2009.11.25
78장 JQueryUI 아코디언 컨트롤 (Accordion.htm)  (0) 2009.11.25
posted by Magic_kit
2009. 11. 25. 11:15 .Net Project/Jquery 1.3.2

80장 JQueryPlugIn 새로운 함수 생성 (Replace.htm)

반응형
 Replace.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">

        // 함수 확장 : 나만의 메서드 만들기

        // 넘겨온 값 (jQuery개체)을 새로운 HTML 개체로 설정

        $.fn.ReplaceWith2010 = function (html) {

            return this.after(html).remove(); // 넘겨운 HTML로 대체 후 기존 값 제거

        };

        $.fn.Exec = function (a, b) {

            var r = a + " * " + b + " = " + (a * b); // 계산식 문자열 생성

            return this.empty().append(r); // 지정된 개체의 
           내용을 배우고 문자열을 추가
        }

        $(document).ready(function () {

            $('#btn1').click(function () {

                $('#my').empty();

                $('#my').append("<h3>반갑습니다</h3>");

            });

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

                // 없었던 함수에 메서드가 생성

                $('#my').ReplaceWith2010("<div id='my'><h3>또 만나.</h3></div>");

            });

            $('#calc').Exec(3, 5); // calc 레이어에 "3 * 5 = 15"를 출력하는 함수

        });

    </script>

</head>

<body>

    <input type="button" id="btn1" value="값 변경1 " />

    <input type="button" id="btn2" value="값 변경2" />

    <div id="my">

        <h3>안녕하세요</h3>

    </div>

    <div id="calc"></div>

</body>

</html>




반응형

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

82장 JQuerySample 체크 박스 선택/해제 (CheckBoxAllCheck.htm)  (0) 2009.11.25
81장 JQueryPlugIn 사진 상세 보기 (RedPlusPhotoView.htm)  (0) 2009.11.25
79장 JQueryUI 탭 컨트롤 (Tabs.htm)  (0) 2009.11.25
78장 JQueryUI 아코디언 컨트롤 (Accordion.htm)  (0) 2009.11.25
77장 JQueryUI 개체 선택 (Selectable.htm)  (0) 2009.11.25
posted by Magic_kit
2009. 11. 25. 11:03 .Net Project/Jquery 1.3.2

79장 JQueryUI 탭 컨트롤 (Tabs.htm)

반응형
Tabs.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>

    <link href="ui.tabs.css" rel="stylesheet" type="text/css" />

    <link href="ui.theme.css" rel="stylesheet" type="text/css" />

    <link href="ui.core.css" rel="stylesheet" type="text/css" />

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

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

    <script type="text/javascript">

        $(document).ready(function () {

            $('#tabs').tabs(); // 탭

        });

    </script>

</head>

<body>

    <div id="tabs">

        <ul>

            <li><a href="#tabs-1">탭 제목1</a></li>

            <li><a href="#tabs-2">탭 제목2</a></li>

            <li><a href="#tabs-3">탭 제목3</a></li>

        </ul>

        <div id="tabs-1">첫번째 영역 내용</div>

        <div id="tabs-2">두번째 영역 내용 </div>

        <div id="tabs-3">세번째 영역 내용 </div>

    </div>

</body>

</html> 




반응형

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

81장 JQueryPlugIn 사진 상세 보기 (RedPlusPhotoView.htm)  (0) 2009.11.25
80장 JQueryPlugIn 새로운 함수 생성 (Replace.htm)  (0) 2009.11.25
78장 JQueryUI 아코디언 컨트롤 (Accordion.htm)  (0) 2009.11.25
77장 JQueryUI 개체 선택 (Selectable.htm)  (0) 2009.11.25
76장 JQueryUI 개체 정렬 (Sortable.htm)  (0) 2009.11.25
posted by Magic_kit

티스토리툴바