Jquery学习---Easy UI 框架
Jquery的easyui
1.1. easyui的目录分析
以 jquery Easy UI 1.3.2 版本学习
demo 实例
locale 国际化信息
plugins 框架一些插件
src 源码
themes 样式文件
easyloader.js 框架核心加载器 (加载其它plugin)
jquery-1.8.0.min.js jQuery类库
jquery.easyui.min.js 框架类库 (等价于 easyloader.js + plugins 所有插件 )
1.2. 在项目中引入 EasyUI
必须引入
<!-- 先引入 jquery的 js -->
<script type="text/javascript"
src="${pageContext.request.contextPath }/js/jquery-1.8.3.js">
</script>
<!-- 引入 easyui的js -->
<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>
<!-- 引入国际化 js -->
<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/locale/easyui-lang-zh_CN.js"></script>
<!-- 引入 默认样式 css -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css"/>
<!-- 引入 icon图标 css -->
<link rel="stylesheet"
type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css"/>
1.3. easyui 的layout 控件使用
布局控件 对一个div使用,也可以对 整个页面 body元素使用
1.4. easyui 的accordion 折叠面板使用
设置fit属性,让面板占满父容器
<!-- 折叠面板 -->
<!-- fit属性,使当前div大小占满父容器 -->
<div class="easyui-accordion" data-options="fit:true">
<!-- 通过iconCls 设置图标,找 icon.css中 类定义 -->
<div data-options="title:'基本功能',iconCls:'icon-mini-add'">面板一</div> <!-- 这里每个div就是一个面板 -->
<div data-options="title:'高级功能'">面板二</div>
<div data-options="title:'管理员功能'">面板三</div>
</div>
1.5. easyui 的 tabs 选项卡面板 使用
<div data-options="region:'center'">
<!-- 选项卡面板 -->
<div class="easyui-tabs" data-options="fit:true">
<div data-options="title:'选项卡一'">内容一</div>
<!-- 这里每个div 就是一个选项卡 -->
<!-- closeable 可关闭 -->
<div data-options="title:'选项卡二',closable:true">内容二</div>
<div data-options="title:'选项卡三'">内容三</div>
</div>
</div>
1.6. 树形菜单的制作
使用 ztree插件,制作树形菜单
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。
下载 ztree 3.5.02 版本
api 文档
css 样式
demo 案例
js 核心类库文件
all.js = core + check + edit + hide 开发中只需要引入 all.js
在页面引入 ztree
<!-- 引入ztree --> <script type="text/javascript" src="${pageContext.request.contextPath }/js/ztree/jquery.ztree.all-3.5.js"></script>
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath }/js/ztree/zTreeStyle.css"/>
案例一: 标准数据tree
1、 在显示树位置写 <ul> 标签
<!-- 显示树 -->
<ul id="basicTree" class="ztree"></ul>
2、 通过js 编写setting对象
// 设置树参数
var setting = {};
3、 设置树节点数据
// 数据 var zNodes = [
{"name":"菜单一"}, // 每个{} 就是一个节点
{"name":"菜单二"}
];
4、初始化树
// 初始化树
$.fn.zTree.init($("#basicTree"), setting, zNodes);
复杂树
问题: 标准数据树,不适用大数据的树结构
案例二: 简单数据ztree
1、 在显示ztree位置定义 ul
<!-- 显示树(简单数据 ) -->
<ul id="simpleTree" class="ztree"></ul>
2、 设置ztree参数 setting
// 设置树参数 var setting = {
data : {
simpleData : {
enable : true
}
}
};
3、 树节点数据
// 数据
var zNodes = [
// id 代表本节点编号,pId代表父节点编号
{"id":"1","pId":"0","name":"菜单一"},
{"id":"2","pId":"0","name":"菜单二"}
];
4、 初始化树
// 初始化树
$.fn.zTree.init($("#simpleTree"), setting, zNodes);
复杂树
通过url 属性,完成树节点跳转
通过icon属性,定制节点图标
文档下载
Jquery学习---Easy UI 框架的更多相关文章
- easy ui 框架
Easy UI 准备工作(搭建) 1.在WebRoot 的目录下创建js 文件夹,在文件夹中倒入一下两个包 Jquery.easyui.min.js jquery.min.js 2.在WebRoot ...
- 基于jquery开发的UI框架整理分析
根据调查得知,现在市场中的UI框架差不多40个左右,不知大家都习惯性的用哪个框架,现在市场中有几款UI框架稍微的成熟一些,也是大家比较喜欢的一种UI框架,那应该是jQuery,有部分UI框架都是根据j ...
- jquery与各种UI框架的导入要注意的地方
前端的处理我们会使用easyUI,amazeUI,bootstrap等等框架,然而每个页面都要导入这些js css 文件,所以我们将要导入的文件提取出来,写在一个页面上,每次只要倒入该页面就行,如 ...
- 项目一:第一天 1、项目概述 2、环境搭建(重点) 3、Jquery Easyui 前端UI框架 4、Jquery Ztree 树形插件使用
1.项目环境 注:添加jar包直接在common_parent里面添加. 搭建数据库 create tablespace bos317space datafile 'c:\ bos317.dbf' ...
- 【JQuery Easy UI】后台管理系统的简单布局分享
重要说明:本博已迁移到 石佳劼的博客.有疑问请到 文章新地址 留言..! 近期做的一个简单的后台管理系统,当中用到了JQuery Easy UI框架,对于撸主这样的把控件能摆整齐就谢天谢地的码农来说, ...
- Jquery Easy UI初步学习(一)
Easy UI 1.3.2 以前听说Easy UI很不错,当了一个dome,闲着没事就看了一下,也整理一下为了自己更好的记忆,也希望对象我这样小菜有帮助吧 先从后台管理的主页面开始,如要要做主页需要了 ...
- jquery easy ui 验证框架
引入参考最下面API ) var reg = /^1[3|4|5|8|9]\d{9}$/; return reg.test(value); }, message: '输入手机号码格式不准确.' } } ...
- 关于ExtJS、JQuery UI和easy UI的选择问题
转自百度知道. 问:做企业级应用,比如***管理系统,不需要华丽的特效,只希望简单,风格统一.能用到的只有messagebox.tree.grid大概这几个,其他特效不要,忘大神根据自己的见解以及我这 ...
- jQuery Easy UI Panel(面板)组件
panel(面板)组件,跟前面的组件使用方法差点儿都差点儿相同,也是从设置一些面板属性.操作面板触发的事件.我们可针对面板对象的操作方法这三个点去学习. 后面有一些组件要依赖于这个组件. 另一点跟前面 ...
随机推荐
- 【ExtJS】FormPanel表单验证
在Extjs中,FormPane表单提供了各种各样的验证. 在表单验证前需要在onReady的function({})内添加以下代码: Ext.QuickTips.init(); //为组件提供 ...
- Node.js 文件夹目录结构创建
第一次接触NodeJS的文件系统就被它的异步的响应给搞晕了,后来发现NodeJS判断文件夹是否存在和创建文件夹是还有同步方法的,但是还是想尝试使用异步的方法去实现. 使用的方法:fs.exists(p ...
- 【LESS系列】简介和使用
LESS —— 一个CSS预编译框架,它在CSS的语法基础之上,引入了变量.Mixin(混入).运算以及函数等功能,大大简化了CSS的编写,并且降低了CSS的维护成本,就像它的名称所说的那样,LESS ...
- 压缩图片或pdf
压缩图片或pdf { /// <summary> /// 压缩图片或pdf大小的Level /// </summary> public enum ReduceSizeLevel ...
- Oracle 数据库字典 sys.col$ 表中关于type#的解释
sys.col$ 表是oracle基础数据字典表中的列表,表中描述了数据库中各列信息,其中type#是列的数据类型.以下表格说明了各个数值的含义,以供参考. 值 说明 1 如果列 charsetfor ...
- JavaScript获取当前站点的域名和端口号
获取域名(第一种方法): document.hostname 获取域名(第二种方法): document.domin 获取端口号: location.port 获取主机+端口号: location.h ...
- 基于Node.js的ghost开源博客平台
Ghost 是一套基于Node.js 构建的开源博客平台(Open source blogging platform),具有易用的书写界面和体验. 1.安装node windows 下安装npm:ht ...
- 四层协议和Socket编程
<四层协议图> <Soclet编程模型图>
- Effective C++ .05 一些不自动生成copy assigment操作的情况
主要讲了 1. 一般情况下编译器会为类创建默认的构造函数,拷贝构造函数和copy assignment函数 2. 执行默认的拷贝构造/copy assignment函数时,如果成员有自己的拷贝构造/c ...
- javascript检查数据中是否存在相同的元素
这里是两个用于数组中查找重复元素的demo,可以看看啦 <!DOCTYPE html><html lang="en"><head> <me ...