easyUI学习记录（一）- Helloword&&easyloader介绍
2014年9月17日
easyUI1.4文件以及中文版ＡＰＩ下载地址：http://pan.baidu.com/s/1jG7QkF8
1. 怎样使用easyUI？
① 引入jQuery文件（建议使用easyUI版本中自带的）
② 引入easyUI文件
③ 引入easyUI样式
④ 引入easyUI图标
⑤ 引入本地化文件
|
<scripttype="text/javascript"src="../js/jquery-easyui-1.4/jquery.min.js"></script> <scripttype="text/javascript"src="../js/jquery-easyui-1.4/jquery.easyui.min.js"></script> <linkrel="stylesheet"href="../js/jquery-easyui-1.4/themes/default/easyui.css"type="text/css"></link> <link rel="stylesheet" href="../js/jquery-easyui-1.4/themes/icon.css"type="text/css"></link> <script type="text/javascript" src="../js/jquery-easyui-1.4/locale/easyui-lang-zh_CN.js"></script> |
在引入js文件时，要注意jQuery和easyUI的顺序，由于easyUI是基于jQuery开发的，所以要先引入jQuery。
2. 实例
作为程序员的我们每学习一种语言首先要写的程序是Helloworld程序。easyUI也不例外。下面我们以dialog为例：
2.1 纯HTML语言的方式：
|
<div id="dd" class="easyui-dialog" title="My Dialog" style="width:400px;height:200px;">Hello</div> |
在没有js时：通过配置calss=”easyui-*” *为组件名称。这样就能将easyUI的组件样式引入进来。但是为什么呢？其功能要归功于easyUI的parser（暂时不说）。
2.2 JS方式：
|
<div id="dd" title="My Dialog" style="width:400px;height:200px;">Hello</div> |
|
<scripttype="text/javascript"> $(function(){ $("#dd").dialog({ modal:true //模式化 }); }); </script> |
介绍一个调试打印功能的方法console.info($("#dd"));这样在debug的控制台上打印出来。如果用alert的话，永远都是object。
Dialog本身没有modal的属性但是Dialog继承与window，window下面具有modal属性。
3. Easyloader(简单加载)
对于有严重洁癖的人来说，会对上述引入的多个js、css等有点恐惧。同时由于easyUI文件的大小为300K左右，css大小50K，会在一定程度上影响网速。对于网速较低的用户会出现延迟等。这样就可以使用Easyloader进行使用的简单加载。
首先我们看一下Easyloader组件的API：下面是easyloader的一个唯一的方法
API的使用方法：
API属性：
使用方法：
以js方式实现：
|
<html> <head> <metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"> <title>Insert title here</title> <scripttype="text/javascript"src="../js/jquery-easyui-1.4/jquery.min.js"></script> <scripttype="text/javascript"src="../js/jquery-easyui-1.4/easyloader.js"></script> <scripttype="text/javascript"> $(function(){ //console.info() easyloader.load(["dialog","messager"],function(){ $("#dd").dialog({ modal:true //模式化 }); $.messager.alert('Title','load ok'); }); }); </script> </head> <body> <ahref="www.baidu.com">baidu</a> <divid="dd"title="My Dialog"style="width:400px;height:200px;">Dialog Demos</div> </body> </html> |
在这里easyloader.load（）可以简写成using
以HTML方式实现
|
<html> <head> <metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"> <title>Insert title here</title> <scripttype="text/javascript"src="../js/jquery-easyui-1.4/jquery.min.js"></script> <scripttype="text/javascript"src="../js/jquery-easyui-1.4/easyloader.js"></script> <scripttype="text/javascript">
</script> </head> <body> <ahref="www.baidu.com">baidu</a> <divid="dd" class="easyui-dialog"title="My Dialog"style="width:400px;height:200px;">Dialog Demos</div> </body> </html> |
