Programming/Jquery

Jquery Accordion, Autocomplete, Datepicker 사용 예제

zzarungna 2012. 4. 27. 13:49
반응형

Jquery Accordion, Autocomplete, Datepicker 사용 예제

결과 화면




소스

<html>

<head>

    <title></title>

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

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

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

 

       <script type="text/javascript">

             $(document).ready(function ()

             {

                    //Accordion

                    $("#list").accordion();

 

                    //Autocomplete

                    $("#txtName").autocomplete({

                          source: ["홍길동", "이순신", "이문세", "테스트", "테니스", "이하하", "이호호"]

                    });

 

                    //Datepicker

                    $("#datepicker").datepicker();

                    $("input[type='button']").button();

             });

 

             function Select() {

                    var date = $("#datepicker").datepicker("getDate");

                    alert(date.toLocaleString());

             }

 

       </script>

       <style type="text/css">

             /* Accordion */

             #list { width:500px; }

             #list a, #list p {font-size:12px;}

            

             /* Autocomplete  */

             body, input, div

             {

                    font-size:12px;

             }

            

             #datepicker

             {

                    font-size:10px;

             }

             input

             {

                   

             }

            

       </style>

</head>

<body>

 

       <!--Accordion-->

       <h3>Accordion</h3>

 

       <div id="list">

             <h3><a href="#">C#</a></h3>

             <div>

                    <p>

                          C#(시 샤프)는 마이크로소프트에서 개발한 객체 지향 프로그래밍 언어로, 닷넷 프레임워크의 한 부분으로 만들었으며 나중에 ECMA (ECMA-334) ISO (ISO/IEC/23270)의 표준으로 자리잡았다. C++와 자바와 비슷한 문법을 가지고 있다.

                    </p>

             </div>

             <h3><a href="#">Java</a></h3>

             <div>

                    <p>

                           자바(Java, 문화어: 쟈바)는 썬 마이크로시스템즈의 제임스 고슬링(James Gosling)과 다른 연구원들이 개발한 객체 지향적 프로그래밍 언어이며, 썬 마이크로시스템즈에서 무료로 제공하고 있다. 1991년 그린 프로젝트(Green Project)라는 이름으로 시작해 1995년에 발표했다. 처음에는 가전제품 내에 탑재해 동작하는 프로그램을 위해 개발했지만 현재 웹 애플리케이션 개발에 가장 많이 사용하는 언어 가운데 하나이고, 모바일 기기용 소프트웨어 개발에도 널리 사용하고 있다. 현재 버전 7까지 출시했다.

                    </p>

             </div>

             <h3><a href="#">Visual Basic</a></h3>

             <div>

                    <p>

                           비주얼 베이직(Visual Basic, 문화어: 비쥬얼베이씨크)은 마이크로소프트에서 만든 베이직 프로그래밍 언어의 일종으로, 마이크로소프트 비주얼 스튜디오 제품군의 하나이다. 비주얼 베이직은 이벤트 기반 프로그래밍의 3세대 프로그래밍 언어이면서, 또한 마이크로소프트의 컴포넌트 오브젝트 모델에 따른 풍부한 구성 요소를 가진 통합 개발 환경 및 RAD을 가리키기도 한다. 비주얼 베이직은 초보자가 접근하기 쉬운 장점을 가지고 있는데, 그 이유는 시각적인 개발 환경과 더불어 베이직 언어의 연장선상에 있기 때문으로 간주된다.[

                    </p>

             </div>

             <h3><a href="#">Objective-C</a></h3>

             <div>

                    <p>

                           오브젝티브-C (Objective-C, 종종 ObjC로 표기) 언어는 C 프로그래밍 언어에 스몰토크 스타일의 메시지 구문을 추가한 객체 지향 언어이다.<br />

현재, 이 언어는 애플의 매킨토시의 운영 체제인 맥 오에스 텐과 아이폰의 운영 체제인 iOS에서 사용되고 있다. 오브젝티브-C는 애플의 코코아를 사용하기 위한 기본 언어이며, 원래는 넥스트의 NeXTSTEP 운영 체제에서 주 언어였다. 일반적인(Generic) 오브젝티브-C는 앞에서 언급한 라이브러리를 사용하지 않는다.

                    </p>

             </div>

       </div>

 

       <br /><hr /><br />

 

       <!--Autocomplete-->

 

       회원명 : <input type="text" id="txtName" />

 

       <br /><hr /><br />

      

       <!--Datepicker.htm-->

       <h3>생일을 선택하세요.</h3>

       <div id="datepicker"></div>

       <input type="button" value=" 선택하기 " onclick="Select();" />

 

</body>

</html>

 

 




반응형