Jquery学习---Easy UI 框架
2023-09-11 14:20:11 时间
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分页插件(jquery.page.js)的使用
- js jquery - 获取元素(父节点,子节点,兄弟节点),元素筛选 (转载)
- jQuery - 下拉框
- jquery与ajax应用
- 《jquery权威指南2》学习笔记------ jquery获取复选框的值
- jQuery展开收缩2
- Ajax学习(二):模仿jQuery的Ajax封装工具
- 读jQuery源码之整体框架分析
- jQuery Custom Selector JQuery自定义选择器
- 学写jQuery插件开发方法
- JQuery模板插件jquery.tmpl-动态ajax扩展
- 电子签章盖章之jQuery插件jquery.zsign
- Jquery学习笔记一
- jQuery图片延迟加载插件:jquery.lazyload
- js jquery vue 网络请求封装 服务器 后台
- jQuery最方便的前端验证方式2种(非空验证与比较验证)
- OpenLayers学习笔记3——使用jQuery UI美化界面设计
- js和jquery获取textarea输入的内容
- js-jquery-SweetAlert2【一】使用
- jquery-easyui 树的使用笔记
- 白学jquery Mobile《构建跨平台APP:jQuery Mobile移动应用实战》连续7-电话问卷调查
- jQuery EasyUI 应用 - 创建展开行明细编辑表单的 CRUD 应用
- python web py入门(71)- jQuery - 通过键盘实现页面显示字体的格式切换