Easyui协议:
Current Version: 1.3.5
======================
This software is allowed to use under GPL or you need to buy commercial license for better support or other purpose.
Please contact us at info@jeasyui.com
GPL协议,如果需要商业支持,请联系jeasyui.com
Easyui是一个很好用的jquery框架。它包装了很多jquery在做界面时常用的方法,让我们用jquery做起界面时,更加的轻松。它的特点是功能强大,而且使用简单。
Easyui的主页地址是:http://www.jeasyui.com/
第一章 Easyui的配置与基础操作
使用Easyui需要做下面的一些准备工作
1. 引用Easyui相关的JS
相关的JS包括:
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
2. 引用Easyui相关的CSS
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
其中icon.css是用来显示小图标的CSS,也可以不加。
3. 如何使用easyui的组件
使用easyui可以通过,Javascript的方式,如:
$("#content").panel({
width:100,
height:100
});
也可以用指定class的方式,如:
<div class="easyui-panel" style="width:100px;height:100px"></div>
3. 使用Easyloader
我们也可以直接导入JS文件和CSS文件在页面中,而是使用Easyloader组件。
如:
<script type="text/javascript" src="../easyui/easyloader.js"></script>
如果你放了完整的jqeuryui文件夹到项目里面的话,你可以直接引用easyloader.js,easyloader.js会自动把需要的js和css,导入到你的页面里面。
不过这样做,会看到一个延迟加载的过程。如下图,下面是使用了easyui布局的页面,一开始会出现没有布局的界面:
片刻后,恢复正常:
所以如果你在页面中,使用了很多class="easyui-组件名"这种形式的页面,最好还是手工加入CSS和JS的文件引入。
第二章
Easyui所提供的组件:
1. Accordion
Accordion提供了抽屉式的菜单组件。
class:easyui
显示的效果,如下图:
同时它还支持增加,删除和选中的功能,如下:
function selectPanel(){
$.messager.prompt('Prompt','Please enter the panel title:',function(s){
if (s){
$('#aa').accordion('select',s);
}
});
}
var idx = 1;
function addPanel(){
$('#aa').accordion('add',{
title:'Title'+idx,
content:'<div style="padding:10px">Content'+idx+'</div>'
});
idx++;
}
function removePanel(){
var pp = $('#aa').accordion('getSelected');
if (pp){
var index = $('#aa').accordion('getPanelIndex',pp);
$('#aa').accordion('remove',index);
}
}
另外,Accordion支持页面载入:
如:
<div class="easyui-accordion">
<div title="系统管理" data-options="iconCls:'icon-edit',href:'sys.php'" style="overflow:auto;padding:10px;">
<a href="sys.php">系统管理</a><br />
</div>
<div title="产品管理" data-options="iconCls:'icon-edit'" style="overflow:auto;padding:10px;">
<a href="product.php">产品管理</a><br />
</div>
<div title="新闻管理" data-options="iconCls:'icon-edit'" style="overflow:auto;padding:10px;">
<a href="newscenter">新闻管理</a>
</div>
</div>
相关的属性:
collapsible:true表示可以折叠,false则表示不能
selected:true表示当前被选中,false则表示没有选中
tools:工具,会生成一个按钮,可以定义其中的方法,如:
tools:[{
iconCls:'icon-reload',
handler:function(){
$('#dg').datagrid('reload');
}
}]
2. Combo组件
Combo组件也是Easyui中很好用的组件。
如下图所示:
他是一个下拉菜单,并且还有搜索的功能
- 大小: 3.2 KB
- 大小: 1.5 KB
- 大小: 133.7 KB
- 大小: 42.2 KB
分享到:
相关推荐
jquery-easyui中文详细说明文档
jQuery EasyUI 1.5.1 版 API 中文(高清)版以及PDF(高清)版. 文档详细介绍了easyui相关属性,使用方法;在1.5的基础上修复了一些bug,并且新增了一些组件.
easyui的介绍详细操作,和各种使用场景,还有各种的特点
本项目采用struts2+JDBC+easyui进行编写,对easyui各个组件进行详细介绍。 由于水平有限,项目bug在所难免,欢迎指正。 博文参考地址:http://blog.csdn.net/itmyhome1990/article/details/37502601 使用方法: 1、...
非常全的,不知道的那去用,运行小demo看看。文档介绍详细,包括中文帮助文档。
第11课(介绍一些easyui群,介绍easyui论坛等信息。datagrid冻结列讲解,datagrid右键菜单讲解,forzenColumns与fitColumns的应用) 第12课(讲解datagrid的formatter的应用,格式化时间、行样式、列样式、表头居中,...
使用easyui框架的web应用,详细介绍了使用easyui框架的的使用
本资源是EasyUI1.4版本中文手册,详细介绍了基础、布局、菜单和按钮、表单、窗口、表格和树,以及扩展部分。
文档详细描述jquery-easyui的使用方法,以及属性的详细介绍和使用实例,简单通俗易懂
《jQuery+EasyUI开发指南》书本详细的介绍了开发过程中遇到的各个问题,讲解的很到位,也很通俗易懂
easyui常用技术,linkbutton、menubutton、datagrid、treegrid、combobox、updateRow、tree的汉化、构建tree...等的介绍详细代码。
第11课(介绍一些easyui群,介绍easyui论坛等信息。datagrid冻结列讲解,datagrid右键菜单讲解,forzenColumns与fitColumns的应用) 第12课(讲解datagrid的formatter的应用,格式化时间、行样式、列样式、表头居中,...
EasyUI入门教程--第02课_介绍easyloader组件和easyui怎样使用.avi,这是由孙宇老师录制的视频,现在很难找了,讲得很详细,授人以鱼,不如授人以渔。
主要为大家详细介绍了EasyUI实现下拉框多选功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
基于easyui的文档管理系统springmvc+mybaits实现,有详细的设计过程以及数据库设计文档等,并且可以直接运行使用,具体可以查看介绍https://my.oschina.net/u/3500033/blog/1828156
easyui 的详细介绍,可以给你权威的解释!
目前jquery easyui用的地方太多了,你懂的。但介绍的文档却不太好找。这个也在网上找了久才找到的。共享下。文档最后的那个地址是在线的中文文档,每个控件讲的都很详细,很有价值。
这是本人在一个网站上看到的,觉得是非常好的资源,就拔下来了作为离线文件分享,里面包括easyui每个组件的所有属性、事件、方法的详细介绍和用法,最可贵的是 中文 的
主要为大家详细介绍了EasyUI学习之Combobox级联下拉列表的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
自己开发过程中使用中文版EasyUI的API,里面界面介绍比较详细,简单上手。