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

EasyUI的使用

2014-12-21 20:55 127 查看
EasyUI包含有很多“UI控件”,实现了网页中常见的(或者是一些模拟桌面的)效果,这样我们就不用“重新造轮子”了,只要掌握了这些控件的用法,就可以容易的在网页上实现这些效果了。

所以,接下来的问题就是,我们要学些、掌握这些控件的用法,有几点首先要明白:

EasyUI定义的控件,也是具有“属性”、“方法”和“事件”,用于设置控件的外观和行为。

EasyUI是基于HTML和JQuery的,基于HTML的意思是说:EasyUI就是通过为普通的HTML元素定义样式、扩展其属性而使这些元素成为“控件”的;基于JQuery的意思是说,我们可以使用JQuery的语法为普通的元素定义样式和扩展属性(包括修改样式和属性,当然也可直接设置这些样式和属性);下面的例子演示这两种方法(这两个例子就是EasyUI官网首页的例子):

使用HTML定义控件(要点是:1.定义了class属性,每个控件都有特定的class属性,如这个例子就是定义了一个dialog;2.使用data-options来定义这些控件的属性、方法和事件):

<div class="easyui-dialog" style="width:400px;height:200px"
data-options="title:'My Dialog',iconCls:'icon-ok',onOpen:function(){}">
dialog content.
</div>


使用JS代码创建控件(要点是:1.combobox,每个控件都有特定的名称,如这个例子就是一个combobox;2.):

<input id="cc" style="width:200px" />
$('#cc').combobox({
url: ...,
required: true,
valueField: 'id',
textField: 'text'
});


EasyUI的控件是有“层次”关系的,如datagrid控件是基于panel/pagination等控件建立的,那么datagrid除了有自身的属性、方法和事件外,也会“继承”这两个控件的属性、方法和属性。

基本上,这三点是基础,适用于所有控件。所以知道这三点之后,后面的就是学习、掌握各个控件的具体属性、方法和事件了。在官网上,最重要的应该是这个“API”的说明:http://www.jeasyui.com/documentation/index.php,这里说明看不明白的,在看一下Tutorial(http://www.jeasyui.com/tutorial/index.php)中的例子,基本上都能够搞定。

在VS中,EasyUI可通过nuget获取,在页面中使用上述的方法定义控件之前,首先需要引用JQuery和EasyUI的样式文件和脚本,如下:

<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>


另外,EasyUI也有一些缺点,表现在:

EasyUI界面比较漂亮,但为实现漂亮的界面,在网页中添加了大量无语义的标签,这显然不符合Web语义、表现、行为分离的原则,但对于模拟桌面程序界面来讲,这个分离好像也不是特别重要;

样式修改不方便,EasyUI的样式是固定写好的,如果你想自己调整一下,那么需要修改EasyUI的CSS文件,这基本上挺麻烦的。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: