Jquery UI - gcs1995－IT工程師數位筆記本

文章出處

　　Jquery 插件學習之 Jquery Ui 的學習

插件下載地址：http://jqueryui.com/download/

　　下載好的Jquery Ui的核心文件

　　ui里面的是js核心文件

　　這是jquery ui 的樣式

　　以上js都集中在jquery-ui-1.9.2.custom.js 里面

　　我們在使用時，可以就導入Jquery ui.js 和 jquery ui.css

　　或者導入具體功能的js文件，再倒入jquery.ui.widget.js 這個文件以及css文件

　　jquery ui 是基于jquery 的，所以我們還要導入jquery 的架包

　　一個dialog的案例：

 1 <link rel="stylesheet" href="themes/base/jquery-ui.css" type="text/css"></link>
 2   <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
 3   <script type="text/javascript" src="js/jquery-ui.js"></script>
 4   <script type="text/javascript" src="js/jquery.ui.widget.js"></script>
 5   <link rel="stylesheet" href="css/demos.css" type="text/css"></link>
 6   <style>
 7       #draggable{
 8           border:1px solid #ccc;
 9           padding:100px 50px;
10           width:200px;
11           cursor: move;
12           margin:auto;
13       
14       }
15       #dialog{
16           width:100px;
17           height:50px;
18       
19       }
20       #droppable{
21           padding:100px 50px;
22       }
23   </style>
24   <script type="text/javascript">    
25       $(function(){
26           $("#open").click(function(){
27               $("#dialog").dialog("open");
28           
29           });
30           $("#draggable").draggable();
31           $("#dialog").dialog({
32               open:function(){$("#dialog textarea").load("clause.txt");},
33               title:"注冊條款",
34               width:800,
35               height:600,
36               modal:true,
37               autoOpen:false,
38               
39               buttons:{
40                   "同意":function(){
41                       $(this).dialog("submit");
42                   },"不同意":function(){
43                       $(this).dialog("close");
44                   }
45                   
46               }    
47           
48           });
49           
50           
51           
52           
53       });
54   </script>
55   </head>
56   <body>
57   
58       
59       <div id="draggable" class="ui-widget-content" >
60           make you mouse on this model ,and drag it
61           <button id="open">打開Dialog</button>
62           <div id="dialog" class="ui-widget-center">
63               <p>注冊前閱讀以下條款：</p>
64               <textarea style="width:100%;height:90%;resize: none;" readonly="readonly">
65  
66               </textarea>
67               
68           </div>
69     </div>
70     
71       
72     
73   </body>