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…

php如何在某个时间上加一天?一小时? 时间加减(转)

<?php date_default_timezone_set(PRC); //默认时区 echo "今天:",date("Y-m-d",time()),"<br>"; echo "今天:",date("Y-m-d",strtotime("18 june 2008")),"<br>"; echo "昨天:&q…

c语言结构体中整形数组初始化,c – 将{0,0}在结构体中初始化数组?

线A C {0,0};8.5.1聚合[dcl.init.aggr] / 12Braces can be elided in an initializer-list as follows. If theinitializer-list begins with a left brace,then the succeedingcomma-separated list of initializer-clauses initializes the members ofa subaggregate; it is…

Android数据的存储方式简介

作为一个完整的应用程序&#xff0c;数据存储操作是必不可少的。因此&#xff0c;Android系统一共提供了四种数据存储方式。分别是&#xff1a;SharePreference、SQLite、Content Provider和File。由于Android系统中&#xff0c;数据基本都是私有的的&#xff0c;都是存放于“d…

c 语言试题及解析,C语言试题及答案解析.pdf

C语言一、 选择题(第题 2 分&#xff0c;共 20 分)1&#xff0e; 一个 C程序的执行是从 A 。A) 本程序的 main 函数开始&#xff0c;到 main 函数结束B) 本程序文件的第一个函数开始&#xff0c;到本程序文件的最后一个函数结束C) 本程序文件的第一个函数开始&#xff0c;到本程…

sql sever 2008基础知识

下面是一些总结&#xff0c;如果执行时发现错误&#xff0c;可以查看错误消息进行解决&#xff0c;也可上网查资料 数据库的组成&#xff1a; 主数据文件&#xff1a;有且只有一个&#xff0c;扩展名为.mdf。 次数据文件&#xff1a;可以没有&#xff0c;也可以有任意个。扩展名…

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.…

c语言的class,Objective-C中Class的本质

类(class)和元类(meta-class)底层都是 objc_class 结构体的指针&#xff0c;内存中就是结构体。struct objc_class {Class _Nonnull isa OBJC_ISA_AVAILABILITY;#if !__OBJC2__Class _Nullable super_class OBJC2_UNAVAILABLE;const char * _Nonnull name OBJC2_UNAVAILABLE;lo…

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 ;定义用户…

白--留白与游戏设计

我所谓之白,非颜色之白,乃设计之白,思想之白也。 我对白的理解得益于对日本传统艺术与现代设计的些许了解&#xff0c;前几日偶得日本设计业前辈原研哉先生的一本书《白》。阅后颇有所思,不禁联想至游戏行业。白&#xff0c;也可称间或空。是日本艺术创造中一直沿承的一种创作思…

文件共享服务器搭建

详细需求描述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…

[20150629]12c物化视图刷新Out of place

[20150629]12c物化视图刷新Out of place.txt --11G物化视图刷新有1个参数atomic_refresh. --如果为false&#xff0c;采用的方式是truncate&#xff0c;再使用/* append */ 提示insert。这样redo最少&#xff0c;但是刷新期间无法访问。 --如果为true&#xff0c;采用的方式是d…

VBScript学习笔记 - 数组

数组声明 dim var(10) 数组声明指出了数组名和索引(index)的最大值。数组索引从0开始。因此该语句创建一个11个元素的数组&#xff0c;其中值为var(0), var(1), …和var(10) 遍历数组的所有元素 可用for each循环&#xff0c;不需事先指明数组中元素的个数。如果不想处理每一个…

android logo在线生成工具,在线生成logo

在线生成logo是一款为大家提供logo设计的手机服务软件&#xff0c;平台上面的logo设计都是基于AI技术提供的&#xff0c;然后再搭配上一些创意&#xff0c;平台上面会根据用户的行业及喜好来提供6款的成品logo&#xff0c;用户可以从中选择一款自己最喜欢的进行定稿&#xff0c…

在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函数中访问或执…

任意阶幻方(魔方矩阵)C语言实现

魔方又称幻方、纵横图、九宫图&#xff0c;最早记录于我国古代的洛书。据说夏禹治水时&#xff0c;河南洛阳附近的大河里浮出了一只乌龟&#xff0c;背上有一个很奇怪的图形&#xff0c;古人认为是一种祥瑞&#xff0c;预示着洪水将被夏禹王彻底制服。后人称之为"洛书&quo…

android防谷歌滑动效果,谷歌是如何做到这一点的?在Android应用程序中滑动ActionBar...

事实上&#xff0c;有一种方法可以做到这一点。即使没有实施自己的ActionBar。看看hierachyviewer吧&#xff01;(位于工具目录中)还有的DecorView&#xff0c;并且LinearLayout作为一个孩子。这LinearLayout包含ActionBar其他内容和其他内容。所以&#xff0c;你可以简单地应用…

thinkphp框架使用心得

接触的第一个PHP框架就是TP&#xff0c;在使用的了一段时间后就放弃了&#xff0c;说实话TP的弊端挺多&#xff0c;之后又接触laravel框架&#xff0c;慢慢的就爱上laravel这个框架了。这段时间由于公司的原因&#xff0c;又不得不使用thinkphp框架,在这里分享下使用心得。 TP框…