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来定义这些控件的属性、方法和事件):
使用JS代码创建控件(要点是:1.combobox,每个控件都有特定的名称,如这个例子就是一个combobox;2.):
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的样式文件和脚本,如下:
另外,EasyUI也有一些缺点,表现在:
EasyUI界面比较漂亮,但为实现漂亮的界面,在网页中添加了大量无语义的标签,这显然不符合Web语义、表现、行为分离的原则,但对于模拟桌面程序界面来讲,这个分离好像也不是特别重要;
样式修改不方便,EasyUI的样式是固定写好的,如果你想自己调整一下,那么需要修改EasyUI的CSS文件,这基本上挺麻烦的。
所以,接下来的问题就是,我们要学些、掌握这些控件的用法,有几点首先要明白:
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文件,这基本上挺麻烦的。
相关文章推荐
- 使用easyui 做后台管理界面,在Tab中的链接点击后添加一个新TAB的解决方法
- 处理Asp.net中使用 Jquery-easyui的 Confirm
- jQueryEasyUI Messager基本使用
- jQuery EasyUI API 中文文档 - Calendar日历使用
- ASP.NET MVC中使用jQuery EasyUI TreeGrid教程
- jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
- easyUI布局篇使用jquery easy UI的panel和layout实现界面的自适用窗口
- jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
- easyui事件和方法的使用方法
- [原]ASP.NET中使用JQUERY-EASYUI后,解决ClientScript.RegisterStartupScript 所注册脚本执行两次
- 使用jquery-easyui写的CRUD插件(3)
- asp.net Ajax 页中使用jquery-easyui的显示问题处理
- AjaxPro与easyUI配合使用的问题
- 在ASP.NET的server form 中使用easyui的layout布局控件
- ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
- ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
- 使用jquery-easyui写的CRUD插件(2)
- 使用Jquery EasyUi常见问题解决方案 刷新 easyui datagrid 数据
- jQuery EasyUI API 中文文档 - Spinner微调器使用
- 【原创】c#讲数据库数据转换为json格式(使用extjs,easyui中的datagrid)