當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

EasyUI学习总结(二)——easyloader分析与使用

發布時間：2023/12/19 编程问答 23 豆豆

生活随笔收集整理的這篇文章主要介紹了 EasyUI学习总结(二)——easyloader分析与使用小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

使用腳本庫總要加載一大堆的樣式表和腳本文件，在easyui 中，除了可以使用通常的方式加載之外，還提供了使用 easyloader 加載的方式。這個組件主要是為了按需加載組件而誕生。什么情況下使用它呢？

你覺得一次性導入 easyui 的核心 min js 和 css 太大

你只用到 easyui 的其中幾個組件

你想使用其中的一個組件，但是你又不知道這個組件依賴了那些組件。

如果你有以上三中情況，那么推薦你使用easyLoader。它可以幫你解決這些問題。

　　easyloader 用來幫助我們自動加載所需的腳本文件和樣式文件，這樣，我們只需要在頁面中引用 jquery 腳本和 easyloader 腳本，easyloader 就可以幫助我們分析模塊的依賴關系，先加載依賴項。模塊加載好了會調用parse模塊來解析頁面。把class是easyui開頭的標簽都轉化成 easyui的控件。

　　下面我們，以使用messager和dialog模塊為例，使用easyloader加載所需的模塊。

　　我們的頁面可以簡單的僅僅寫入下面的內容。注意，并不需要通常的樣式表和一大堆的腳本引用。

<%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML> <html><head><title>EasyUI入門——EasyUI的easyloader的使用</title><script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.4.1/jquery.min.js"></script><script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.4.1/easyloader.js"></script><script type="text/javascript">$(function(){//使用easyloader加載dialog模塊使用到的相關js和css樣式easyloader.load('dialog',function(){/*使用JavaScript動態創建EasyUI的Dialog的步驟：1、定義一個div，并給div指定一個id2、使用Jquery選擇器選中該div，然后調用dialog()方法就可以創建EasyUI的Dialog*///使用自定義參數創建EasyUI的Dialog$('#dd2').dialog({title: '使用JavaScript創建的Dialog',width: 400,height: 200,closed: false,cache: false,modal: true});});easyloader.locale = "zh_CN";//easyloader.load 還有一個別名 using 定義在 window 對象上//使用easyloader加載messager模塊使用到的相關js和css樣式using("messager", function () {alert("加載成功！");$("#btnAlert").click(function () {$.messager.alert('Warning', 'The warning message');});});});</script></head><body><%--使用純html的方式創建創建EasyUI的Dialog的步驟：1、定義一個div2、將div的class樣式屬性設置成easyui-dialog，這樣就可以將普通的div變成EasyUI的Dialog了--%><div class="easyui-dialog" id="dd1" title="EasyUI Dialog" style="width: 500px;height: 300px;">Hello World!</div><div id="dd2">Dialog Content</div><a id="btnAlert" class="easyui-linkbutton">彈出提示框</a></body> </html>

注意看！只有 jquery 的腳本和 easyloader 的腳本，完全沒有一大堆的樣式和其他腳本文件。

　　頁面運行效果如下：

　　load 用來使用代碼來說明需要加載的模塊，這是在 easyloader 中定義的一個函數，函數的第一個參數為準備加載的模塊名稱，第二個參數為加載成功之后的回調函數。這里用來提示已經加載成功。

　　load 加載的模塊有兩種格式，即可以是一個字符串表示的單個模塊，也可以是一個字符串的數組，同時加載多個模塊。

//name有兩種，一種是string ,一種是string array,這樣一次可以加載多個plugin,都是調用add方法進行添加 if (typeof name == 'string') {add(name); } else {for (var i = 0; i < name.length; i++) {add(name[i]);} }

easyloader.load 還有一個別名 using 定義在 window對象上，如下所示：

window.using = easyloader.load;

　　所以，加載的代碼也可以這樣寫。

using("messager", function () {alert("加載成功！");});

加載成功之后，我們就可以在代碼中使用已經加載的模塊了。

　　頁面中還使用 class 說明了一個按鈕，這里使用了?class="easyui-linkbutton"，easyloader 還可以幫助我們解析元素中的特殊類名，直接就在頁面中使用過的模塊。

　　easyloader 會在它所在文件夾中，尋找 plugins 子文件夾中的腳本，和 themes 文件夾中的樣式表。所以需要保證文件保存在正確的位置。不過，easyloader 還提供了一個 base 屬性，用來指定尋找插件和腳本的起點。

// jquery-easyui的根目錄，在加載easyloader時，會自動根據你放置的位置而改變 base:'.',

　　除了 base , 還有幾個重要的屬性

base:'.',//該屬性是為了加載js,記錄文件夾路徑的 theme:'default', //默認主題 css:true, locale:null,

比如，希望使用中文語言包，則可以如下使用。你會看到提示框的按鈕中的文字已經從 Ok 轉換為了 "確定"。

easyloader.locale = "zh_CN";using("messager", function () {alert("加載成功！");});

以上就是關于easyloader分析與使用。

轉載于:https://www.cnblogs.com/kangyanxiang/p/4594836.html

總結

以上是生活随笔為你收集整理的EasyUI学习总结(二)——easyloader分析与使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。