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 框架的更多相关文章

  1. easy ui 框架

    Easy UI 准备工作(搭建) 1.在WebRoot 的目录下创建js 文件夹,在文件夹中倒入一下两个包 Jquery.easyui.min.js jquery.min.js 2.在WebRoot ...

  2. 基于jquery开发的UI框架整理分析

    根据调查得知,现在市场中的UI框架差不多40个左右,不知大家都习惯性的用哪个框架,现在市场中有几款UI框架稍微的成熟一些,也是大家比较喜欢的一种UI框架,那应该是jQuery,有部分UI框架都是根据j ...

  3. jquery与各种UI框架的导入要注意的地方

    前端的处理我们会使用easyUI,amazeUI,bootstrap等等框架,然而每个页面都要导入这些js   css 文件,所以我们将要导入的文件提取出来,写在一个页面上,每次只要倒入该页面就行,如 ...

  4. 项目一:第一天 1、项目概述 2、环境搭建(重点) 3、Jquery Easyui 前端UI框架 4、Jquery Ztree 树形插件使用

    1.项目环境 注:添加jar包直接在common_parent里面添加. 搭建数据库 create tablespace bos317space datafile 'c:\ bos317.dbf'   ...

  5. 【JQuery Easy UI】后台管理系统的简单布局分享

    重要说明:本博已迁移到 石佳劼的博客.有疑问请到 文章新地址 留言..! 近期做的一个简单的后台管理系统,当中用到了JQuery Easy UI框架,对于撸主这样的把控件能摆整齐就谢天谢地的码农来说, ...

  6. Jquery Easy UI初步学习(一)

    Easy UI 1.3.2 以前听说Easy UI很不错,当了一个dome,闲着没事就看了一下,也整理一下为了自己更好的记忆,也希望对象我这样小菜有帮助吧 先从后台管理的主页面开始,如要要做主页需要了 ...

  7. jquery easy ui 验证框架

    引入参考最下面API ) var reg = /^1[3|4|5|8|9]\d{9}$/; return reg.test(value); }, message: '输入手机号码格式不准确.' } } ...

  8. 关于ExtJS、JQuery UI和easy UI的选择问题

    转自百度知道. 问:做企业级应用,比如***管理系统,不需要华丽的特效,只希望简单,风格统一.能用到的只有messagebox.tree.grid大概这几个,其他特效不要,忘大神根据自己的见解以及我这 ...

  9. jQuery Easy UI Panel(面板)组件

    panel(面板)组件,跟前面的组件使用方法差点儿都差点儿相同,也是从设置一些面板属性.操作面板触发的事件.我们可针对面板对象的操作方法这三个点去学习. 后面有一些组件要依赖于这个组件. 另一点跟前面 ...

随机推荐

  1. 【ExtJS】FormPanel表单验证

    在Extjs中,FormPane表单提供了各种各样的验证. 在表单验证前需要在onReady的function({})内添加以下代码: Ext.QuickTips.init();    //为组件提供 ...

  2. Node.js 文件夹目录结构创建

    第一次接触NodeJS的文件系统就被它的异步的响应给搞晕了,后来发现NodeJS判断文件夹是否存在和创建文件夹是还有同步方法的,但是还是想尝试使用异步的方法去实现. 使用的方法:fs.exists(p ...

  3. 【LESS系列】简介和使用

    LESS —— 一个CSS预编译框架,它在CSS的语法基础之上,引入了变量.Mixin(混入).运算以及函数等功能,大大简化了CSS的编写,并且降低了CSS的维护成本,就像它的名称所说的那样,LESS ...

  4. 压缩图片或pdf

    压缩图片或pdf { /// <summary> /// 压缩图片或pdf大小的Level /// </summary> public enum ReduceSizeLevel ...

  5. Oracle 数据库字典 sys.col$ 表中关于type#的解释

    sys.col$ 表是oracle基础数据字典表中的列表,表中描述了数据库中各列信息,其中type#是列的数据类型.以下表格说明了各个数值的含义,以供参考. 值 说明 1 如果列 charsetfor ...

  6. JavaScript获取当前站点的域名和端口号

    获取域名(第一种方法): document.hostname 获取域名(第二种方法): document.domin 获取端口号: location.port 获取主机+端口号: location.h ...

  7. 基于Node.js的ghost开源博客平台

    Ghost 是一套基于Node.js 构建的开源博客平台(Open source blogging platform),具有易用的书写界面和体验. 1.安装node windows 下安装npm:ht ...

  8. 四层协议和Socket编程

    <四层协议图> <Soclet编程模型图>

  9. Effective C++ .05 一些不自动生成copy assigment操作的情况

    主要讲了 1. 一般情况下编译器会为类创建默认的构造函数,拷贝构造函数和copy assignment函数 2. 执行默认的拷贝构造/copy assignment函数时,如果成员有自己的拷贝构造/c ...

  10. javascript检查数据中是否存在相同的元素

    这里是两个用于数组中查找重复元素的demo,可以看看啦 <!DOCTYPE html><html lang="en"><head> <me ...