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

使用脚本库总要加载一大堆的样式表和脚本文件,在easyui 中,除了可以使用通常的方式加载之外,还提供了使用 easyloader 加载的方式。这个组件主要是为了按需加载组件而诞生。什么情况下使用它呢?

  1. 你觉得一次性导入 easyui 的核心 min js 和 css 太大
  2. 你只用到 easyui 的其中几个组件
  3. 你想使用其中的一个组件,但是你又不知道这个组件依赖了那些组件。
如果你有以上三中情况,那么推荐你使用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><!-- 引入JQuery --><script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.4.1/jquery.min.js"></script><!-- 引入easyloader.js --><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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/460060.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

c语言switch scanf语句,C语言中scanf函数与switch语句

----------------switch----------------1)使用格式switch(表达式){case 常量表达式1: 语句1;case 常量表达式2: 语句2; ...case 常量表达式n: 语句n;default: 语句n1;}判断月份代码实现int main(int argc, const char * argv[]) {//定义变量int month;//提示用户输入一个月份p…

JadClipse eclipse反编译插件

A.下载JadClipse&#xff0c;http://jadclipse.sourceforge.net/wiki/index.php/Main_Page#Download&#xff0c;注意选择与eclipse版本一致的版本&#xff0c;我用的是Eclipse3.4&#xff0c;所以选择下载版本net.sf.jadclipse_3.3.0.jar B.下载Jad&#xff0c;http://www.…

Sublime 资源汇总

2019独角兽企业重金招聘Python工程师标准>>> 《sublime text2使用经验》&#xff1a;里面插件的推介和使用、截图。《Sublime Text 2 入门及技巧》&#xff1a;技巧&#xff0c;可惜是4年前的东西了。《Sublime Text 2安装插件方法详解》&#xff1a;介绍了使用 GoA…

c汇编语言程序框架培训,[010][x86汇编语言]学习用户程序的编写(c08.asm)

源程序来源加载程序c08_mbr.asm用户源程序&#xff1a;增加注释;;文件名&#xff1a;c08-2.asm;文件说明&#xff1a;用户程序;创建日期&#xff1a;13:08 2018/5/23;----------------------------------------------------------------------SECTION header vstart0 ;定义用户…

文件共享服务器搭建

详细需求描述1、网络拓扑图如下&#xff1a;2、利用虚拟机实现网络拓扑&#xff0c;要求如下&#xff08;1&#xff09;虚拟机环境使用hostonly&#xff08;2&#xff09;服务器要求&#xff1a;安装Widnwos Server 2008 R2操作系统内存要求&#xff1a;750MB安装五块物理SCSI磁…

当c语言老师遇到网络崩溃,网络教学搞不定?工科教授来支招!

新学期已经到来但是由于新冠病毒肆虐我们不得不在“线上会面”网络远程教学颠覆了传统课堂模式的同时&#xff0c;也为教员们的教学工作带来极大的挑战。想想看&#xff0c;面对一个计算机屏幕滔滔不绝地讲上90分钟&#xff0c;确实需要大量的准备工作。网课平台怎么选&#xf…

在JS函数中执行C#中的函数、字段

1、调用字段 cs文件的代码&#xff1a; public int id 0;protected void Page_Load(object sender, EventArgs e){id 2;} View Codejs页面的代码&#xff1a; function CheckFunc() {alert("<% id%>");} View Code2、调用函数&#xff1a; 在JS函数中访问或执…

计算本年 本月 本周的起始日期

html: <table><tr><td align"right" width"120px"> 销售时间区间:</td><td><select id"ddlChoiceDate" name"ddlChoiceDate" runat"server" onchange"SelectChange(this.value);&quo…

Android查看真机布局,android-外部存储

外部存储&#xff0c;个人理解是在app作用域之外存储&#xff0c;就是数据没有和app做关联&#xff0c;app卸载后&#xff0c;它依旧存在而不再是之前手机本身存储空间和sd卡的区别&#xff0c;现在安卓手机已经不携带可拆卸的SD卡androidManifest.xml 需要写入读写权限简单布局…

android国籍组件,android组件化之路

问题&#xff1a;实际业务变化快&#xff0c;而工程内各个功能模块耦合度太高&#xff0c;不能对功能模块进行快速方便地拆分或组装。团队共同开发中&#xff0c;可能一个文件同时被多人修改&#xff0c;导致每次更新提交代码都需要消耗大量时间去merge代码。每次修改&#xff…

UNIX环境编程学习笔记(21)——进程管理之获取进程终止状态的 wait 和 waitpid 函数...

lienhua342014-10-12 当一个进程正常或者异常终止时,内核就向其父进程发送 SIGCHLD信号。父进程可以选择忽略该信号,或者提供一个该信号发生时即被调用的函数(信号处理程序)。对于这种信号的系统默认动作是忽略它。 在文档“进程控制三部曲”中,我们讲的第三部曲是使用 wait 函…

android代码导入有错误,android新项目导入后进行编译出现cmake错误

问题描述使用as加载并且gradle sync 提示&#xff1a;SIMPLE:error configure同时使用make project提示问题出现的环境背景及自己尝试过哪些方法已经尝试更换过ndk 调整target brinary 然后完全clean project等操作相关代码// 请把代码文本粘贴到下方(请勿用图片代替代码)使用g…

BZOJ1652 [Usaco2006 Feb]Treats for the Cows

蒟蒻许久没做题了&#xff0c;然后连动规方程都写不出了。 参照iwtwiioi大神&#xff0c;这样表示区间貌似更方便。 令f[i, j]表示i到j还没卖出去&#xff0c;则 f[i, j] max(f[i 1, j] v[i] * T, f[i, j - 1] v[j] * T) &#xff08;←这样用推的方式更好想一点。。&#…

git+jekyll部署备忘

github&#xff0c;会自动帮忙编译jekyll编写的文件&#xff0c;只要将文件放到gh-pages分支 (或者使用官方教程的二级域名方式&#xff0c;项目名字&#xff0c;可以随便起&#xff0c;官网的例子是 用户名.github.com 作为项目名字&#xff0c;可以使用 用户名.github.com …

搜索 由浅入深 之一 水题

搜索很重要&#xff0c;是很难学的算法&#xff0c;能看懂很简单&#xff0c;但是要想真正做出题来就比较困难了&#xff0c;那么&#xff0c;我们现在就水题开始研究搜索。 水题之&#xff1a; 1024: [SCOI2009]生日快乐 Time Limit: 1 Sec Memory Limit: 162 MBSubmit: 830 …

android studio创建文件,如何在Android Studio中创建File Templates

标签&#xff1a; File Template Android Studio我发现一个可以让写程序变得简单的方法&#xff0c;那就是自定义文件模板(Custom File Templates).那么什么是File Templates呢&#xff1f;说白了&#xff0c;就是一个已经包含一部分代码的源文件如何创建File Templates首先&am…

odoo 中多币种处理(外币处理)

2019独角兽企业重金招聘Python工程师标准>>> 1. odoo多币种处理 http://www.cnblogs.com/godzone/archive/2012/11/05/2754436.html 2. OpenERP的价格表&#xff08;Pricelist&#xff09;机制: http://www.chinamaker.net/html/2011/study_1123/78.html 3. odoo …

h5 android数字键盘,【笔记】移动端H5数字键盘input type=number的处理(IOS和Android)...

在Vue中的项目&#xff0c;基于VUX-UI开发&#xff0c;一个常见的需求&#xff1a;1、金额输入框2、弹出数字键盘3、仅支持输入两位小数&#xff0c;限制最大11位数&#xff0c;不允许0开头第一&#xff0c;首先想到额就是在VUX-UI中制定typenumber。--不可行VUX中的文档和代码…

Sybase数据库应用系统调优的五大领域

Sybase数据库应用系统调优的五大领域 2011/3/14/13:49来源&#xff1a;慧聪it网本 文以“某大型商业银行的网上银行系统”这一很具有典型意义的企业级大型Sybase数据库应用系统为例&#xff0c;涉及了数据库应用系统调优的五大领域&#xff1a;压力测试、 应用端调优、服务器端…

android 6.0 ios9谁快,没安卓6.0流畅?iOS 9突飞猛进终于不卡

今天早些时候&#xff0c;iOS 9.1正式发布&#xff0c;改进系统Bug&#xff0c;添加新功能等&#xff0c;但还有不少反应系统流畅了。不知道是否是心里作用的关系&#xff0c;之前不少果粉吐槽iOS 9过于卡顿&#xff0c;苹果也是在一个版本一个版本的改进&#xff0c;这次的iOS…