首頁 > 開發者 > JavaScript

JQueryEasyUI學習筆記（二）

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

今天說說EasyUI的基本使用以及easyloader的使用：
EasyUI的基本使用
 

 

 

View Code
 1 <head>
 2     <title>EasyUI的基本使用</title>
 3     <link href="jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet" type="text/css" />
 4     <!--easyui最全的樣式包也可單獨引用你想使用的樣式包-->
 5     <link href="jquery-easyui-1.3.2/themes/icon.css" rel="stylesheet" type="text/css" />
 6     <!--easyui內建圖片樣式包，也可自行添加-->
 7     <script src="jquery-easyui-1.3.2/jquery-1.8.0.min.js" type="text/javascript"></script>
 8     <!--我使用的是easyui 1.3.2，基於jquery-1.8.0-->
 9     <script src="jquery-easyui-1.3.2/jquery.easyui.min.js" type="text/javascript"></script>
10     <!--easyui的js包-->
11     <script src="jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
12     <!--easyui的中文語言套件，預設是英文-->
13     <script type="text/javascript">
14         $(function () {
15             //第二種使用方法：
16             //使用js方式，使用JQuery選取器選擇到要操作的div，然後添加各種樣式等等
17             $("#dd").dialog({
18                 width: 400,
19                 height: 200,
20                 modal: true,
21                 title: "我的第二個Dialog！",
22                 iconCls: 'icon-save'//easyui圖片樣式
23             });
24         });
25     </script>
26 </head>
27     <body>
28         <!--第二種使用方式：-->
29         <div id="dd">
30             我的第一個Dialog。
31         </div>
32         <!--第一種基本使用方式（以Dialog為例）： 直接觀看在官網下載的包，裡面的Demo，最新的EasyUI都是這種直接在Html標籤中進行操作，想使用哪種樣式的EasyUI就直接
33         class="easyui-dialog" easyui + ‘-’ + 架構名稱，data-options中寫你要選擇的屬性，屬性在EasyUI的API中講解的很詳細，比如
34         model：true 是模式化，我就不一一說明了；-->
35         <div id="dd" class="easyui-dialog" title="My Dialog" style="width: 400px; height: 200px;"
36              data-options="iconCls:'icon-save',resizable:true,modal:true">
37             我的第一個Dialog。
38         </div>
39     </body>
40 </html>

 

 

 

 

 

easyloader的使用
View Code
 1 <head>
 2     <title>EasyLoader使用方法</title>
 3     <script src="jquery-easyui-1.3.2/jquery-1.8.0.min.js" type="text/javascript"></script>
 4     <script src="jquery-easyui-1.3.2/easyloader.js" type="text/javascript"></script>
 5     <script type="text/javascript">
 6         $(function () {
 7             // EasyLoader第二種使用方式： 還是載入延遲
 8             easyloader.load('dialog', function () {
 9                 $("#Div1").dialog({
10                     width: 400,
11                     height: 200,
12                     modal: true,
13                     title: "我的第二個Dialog！",
14                     iconCls: 'icon-save'//easyui圖片樣式
15                 });
16             });
17
18             // EasyLoader第三種使用方式： 還是載入延遲
19             using('dialog', function () {
20                 $("#Div1").dialog({
21                     width: 400,
22                     height: 200,
23                     modal: true,
24                     title: "我的第二個Dialog！",
25                     iconCls: 'icon-save'//easyui圖片樣式
26                 });
27             });
28
29             // EasyLoader第四種使用方式： 載入延遲更為嚴重了
30             // 定義多個架構，以數組形式添加
31             easyloader.load(['dialog', 'messager'], function () {
32                 $("#Div1").dialog({
33                     width: 400,
34                     height: 200,
35                     modal: true,
36                     title: "我的第二個Dialog！",
37                     iconCls: 'icon-save'//easyui圖片樣式
38                 });
39                 $.messager.alert('Title', 'load ok');
40             });
41         });
42     </script>
43 </head>
44 <body>
45     <!--EasyLoader第一種使用方式：
46     直接引入JQuery包和easyloader的js包；有人說這種方式很方便，流量少，但是我使用時發現有些許延遲；-->
47     <div id="dd" class="easyui-dialog" title="我的第三個Dialog" style="width: 400px; height: 200px;"
48         data-options="iconCls:'icon-save',resizable:true,modal:true">
49         我的第一個Dialog。
50     </div>
51     <div id="Div1">
52         我的第一個Dialog。
53     </div>
54 </body>
55 </html>

 

 

 

 

 

 

 

 

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More