블로그 이미지
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. 11:01 .Net Project/Jquery 1.3.2

78장 JQueryUI 아코디언 컨트롤 (Accordion.htm)

반응형
Accordion.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 src="../js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $('#accordion').accordion({event:"mouseover"});

        });

    </script>

</head>

<body>

    <div id="accordion">

        <h3>제목1</h3>

        <div>내용1</div>

        <h3>제목2</h3>

        <div>내용2</div>

        <h3>제목3</h3>

        <div>내용3</div>

    </div>

</body>

</html> 




반응형

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

80장 JQueryPlugIn 새로운 함수 생성 (Replace.htm)  (0) 2009.11.25
79장 JQueryUI 탭 컨트롤 (Tabs.htm)  (0) 2009.11.25
77장 JQueryUI 개체 선택 (Selectable.htm)  (0) 2009.11.25
76장 JQueryUI 개체 정렬 (Sortable.htm)  (0) 2009.11.25
75장 JQueryUI 요소 끌어서 놓기 (Droppable.htm)  (0) 2009.11.25
posted by Magic_kit
2009. 11. 25. 10:58 .Net Project/Jquery 1.3.2

77장 JQueryUI 개체 선택 (Selectable.htm)

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

        .ui-selected { background-color:Yellow; color:Black; }    

    </style>

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

            $('ul').selectable(); // 선택

        });

    </script>

</head>

<body>

    <ul>

        <li>XHTML</li>

        <li>CSS</li>

        <li>JavaScript</li>

    </ul>   

</body>

</html> 




반응형

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

79장 JQueryUI 탭 컨트롤 (Tabs.htm)  (0) 2009.11.25
78장 JQueryUI 아코디언 컨트롤 (Accordion.htm)  (0) 2009.11.25
76장 JQueryUI 개체 정렬 (Sortable.htm)  (0) 2009.11.25
75장 JQueryUI 요소 끌어서 놓기 (Droppable.htm)  (0) 2009.11.25
74장 JQueryUI 요소 드래그(끌기) (Draggable.htm)  (0) 2009.11.25
posted by Magic_kit
2009. 11. 25. 10:57 .Net Project/Jquery 1.3.2

76장 JQueryUI 개체 정렬 (Sortable.htm)

반응형
Sortable.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 src="../js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $('ul').sortable({

                axis: "y",

                opacity: 0.5

            });

            $('tr').sortable({axis:"x", opacity:0.5});

        });

    </script>

</head>

<body>

    <ul>

        <li>XHTML</li>

        <li>CSS</li>

        <li>JavaScript</li>

    </ul>   

    <table border="1">

        <tr>

            <td>첫번째 셀 ><td>두번째 셀</td>

        </tr>

    </table>

</body>

</html>




반응형

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

78장 JQueryUI 아코디언 컨트롤 (Accordion.htm)  (0) 2009.11.25
77장 JQueryUI 개체 선택 (Selectable.htm)  (0) 2009.11.25
75장 JQueryUI 요소 끌어서 놓기 (Droppable.htm)  (0) 2009.11.25
74장 JQueryUI 요소 드래그(끌기) (Draggable.htm)  (0) 2009.11.25
73장 JQueryUtilities 매개변수 쿼리 스트링 변경 (Param.htm)  (0) 2009.11.25
posted by Magic_kit
2009. 11. 25. 10:49 .Net Project/Jquery 1.3.2

75장 JQueryUI 요소 끌어서 놓기 (Droppable.htm)

반응형
Droppable.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 src="../js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

        $('img').draggable({ opacity:"0.3" }); // 끄는 동안만 불투명            
        $('div').droppable({

                accept: "img",        // 드롭 시킬 대상 요소

                drop: function (event, ui) {

                    $(this).append("끌어서 놓게 됨 ");

                }

            });

        });

    </script>

</head>

<body>

    <img src="../images/silverlight.gif" />

    <div style="position:absolute;top:100px;left:150px;

        border:1px solid gray;width:160px;height:160px;

        text-align:center;"></div>

</body>

</html> 




반응형

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

77장 JQueryUI 개체 선택 (Selectable.htm)  (0) 2009.11.25
76장 JQueryUI 개체 정렬 (Sortable.htm)  (0) 2009.11.25
74장 JQueryUI 요소 드래그(끌기) (Draggable.htm)  (0) 2009.11.25
73장 JQueryUtilities 매개변수 쿼리 스트링 변경 (Param.htm)  (0) 2009.11.25
72장 JQueryUtilities 기호 사용금지 (NoConflict.htm)  (0) 2009.11.25
posted by Magic_kit

티스토리툴바