您的位置：首页 > 产品设计 > UI/UE

easyUI学习记录（一）- Helloword&&easyloader介绍

2014-09-18 06:17 316 查看
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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航