首頁 > 開發者 > JavaScript

JQueryEasyUI學習筆記（三）

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

昨天介紹了easyui的基本使用與easyloader方式載入架構，今天來說說他們的原理以及panel架構的使用：
easyui可以直接html的方式，寫一個類，型如 class="easyui-dialog" 的方式，就可以直接載入出easyui的樣式，究其原因，是因為parser的存在，我們開啟下的easyui代碼，裡面有個plugins檔案夾，裡面有檔案：jquery.parser.js ；這個JS檔案裡面就是以 class="easyui-dialog" 的方式載入各種sasyui架構樣式的，當然裡面是迴圈渲染的；代碼如下：


 1  $.parser = { auto: true, onComplete: function (_1) {
 2     }, plugins: ["draggable", "droppable", "resizable", "pagination", "linkbutton", "menu", "menubutton", "splitbutton", "progressbar", "tree", "combobox", "combotree", "combogrid", "numberbox", "validatebox", "searchbox", "numberspinner", "timespinner", "calendar", "datebox", "datetimebox", "slider", "layout", "panel", "datagrid", "propertygrid", "treegrid", "tabs", "accordion", "window", "dialog"], 　　　　　　 parse: function (_2) {
 3         var aa = [];
 4         for (var i = 0; i < $.parser.plugins.length; i++) {
 5             var _3 = $.parser.plugins[i];
 6             var r = $(".easyui-" + _3, _2);
 7             if (r.length) {
 8                 if (r[_3]) {
 9                     r[_3]();
10                 } else {
11                     aa.push({ name: _3, jq: r });
12                 }
13             }
14         }

再有就是easyloader的載入方式，在其easyloader.js檔案中，有其載入各個架構組件的方法（以dialog為例）：

1  dialog: {
2             js: "jquery.dialog.js", //載入dialog的js檔案
3             css: "dialog.css", //載入dialog的css樣式檔案
4             dependencies: ["linkbutton", "window"]//因為dialog需要window和linkbutton樣式，所以這裡關聯著這兩個架構組件
5         }


1 //最後調用parser的方法，使其可以直接以 class="easyui-dialog" 的方式顯示架構，也可以用easyloader專屬的方式載入
2     window.using = easyloader.load;
3     if (window.jQuery) {
4         jQuery(function () {
5             easyloader.load("parser", function () {
6                 jQuery.parser.parse();
7             });
8         });

panel架構的用法：


 1 <script type="text/javascript">
 2         $(function () {
 3             $('#p').panel({
 4                 width: 500,
 5                 height: 150,
 6                 title: 'My Panel', //控制台名標題
 7                 iconCls: 'icon-add', //控制台標題旁邊的圖片 由icon.css檔案得來
 8                 tools: [{//
 9                     iconCls: 'icon-add', //右上方表徵圖及點擊觸發事件
10                     handler: function () { alert('new') }
11                 }, {
12                     iconCls: 'icon-save', //右上方表徵圖及點擊觸發事件
13                     handler: function () { alert('save') }
14                 }]
15             });
16         });
17     </script>
18 </head>
19 <body>
20     <div id="p" style="padding: 10px;">
21         <p>
22             panel content.</p>
23         <p>
24             panel content.</p>
25     </div>
26 </body>

 

本文章原先以中文撰寫並發佈於 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