Jquery学习---Easy UI 框架

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属性,定制节点图标

原文地址:https://www.cnblogs.com/ftl1012/p/easyUI.html

时间: 2024-10-26 22:52:27

Jquery学习---Easy UI 框架的相关文章

JQuery EasyUI后台UI框架使用连载

在正式了解 jQuery EasyUI 之前,我们先了解一下什么是 jQuery EasyUI.它的学习条件.市场上的同类产品.所支持的浏览器等.然后配置运行 jQuery EasyUI. 一.什么是JQuery EasyUI jQuery EasyUI 是一组基于 jQuery 的 UI 插件集合,而 jQuery EasyUI 的目标就是帮助Web 开发者更轻松的打造出功能丰富并且美观的 UI 界面.开发者不需要编写复杂的JavaScript,也不需要对 css 样式有深入的了解,开发者需要

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

根据调查得知,现在市场中的UI框架差不多40个左右,不知大家都习惯性的用哪个框架,现在市场中有几款UI框架稍微的成熟一些,也是大家比较喜欢的一种UI框架,那应该是jQuery,有部分UI框架都是根据jQuery研发出来的产品,现在也很常见了. 国产jQuery UI框架 (jUI) DWZ DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架.设计目标是简单实用,快速开发,降低ajax开发成本. jQuery 部件布局

easy ui 框架

一.jQueryEasyUI Messager基本使用 jQuery.messager.alert("提示", "请完成必填项","warning"); 参考: http://www.cnblogs.com/libingql/archive/2011/07/17/2109020.html

Jquery Easy UI初步学习(二)datagrid的使用

第一篇学的是做一个管理的外框,接着就是数据datagrid绑定了,这里我用asp.net mvc3来做的,主要就是熟悉属性.方法. 打开easyui的demo 就可以看到如下一段代码: 和上篇一样class="easyui-datagrid", data-options="...",这是一样的,其他我在网上查了查,并做了整理 DataGrid 属性 参数名 类型 描述 默认值 title string Datagrid面板的标题 null iconCls strin

Jquery Easy UI初步学习(三)数据增删改

第二篇只是学了加载用datagrid加载数据,数据的增删改还没有做,今天主要是解决这个问题了. 在做增删改前需要弹出对应窗口,这就需要了解一下EasyUi的弹窗控件. 摘自:http://philoo.cnblogs.com/ 我的理解,就是panel有的属性Window.dialog都有,同时保留自己的扩展属性方法 , 所以主要展示pannel的属性. Pannel 属性 名称 类型 说明 默认值 title string 显示在Panel头部的标题文字. null iconCls strin

Jquery Easy UI初步学习(一)

Easy UI 1.3.2 以前听说Easy UI很不错,当了一个dome,闲着没事就看了一下,也整理一下为了自己更好的记忆,也希望对象我这样小菜有帮助吧 先从后台管理的主页面开始,如要要做主页需要了解以下几项 data-options是jQuery Easyui 最近两个版本才加上的一个特殊属性.通过这个属性,我们可以对easyui组件的实例化可以完全写入到html中,例如: <div class="easyui-dialog" style="width:400px;

jQuery Easy UI Panel(面板)组件

panel(面板)组件,跟前面的组件用法几乎都差不多,也是从设置一些面板属性.操作面板触发的事件.我们可针对面板对象的操作方法这三个点去学习. 后面有一些组件要依赖于这个组件. 还有一点跟前面不同的就是面板内容可以请求远程数据. 示例: <!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <s

Jquery Easy UI 实现页面的Loading效果(类似于Android的ProgressDialog)

前言 很常用的一种前端效果,比如当用户点击网页的某个按钮发送了一条异步请求,如果响应时间过长容易导致用户重复点击,一方面影响用户体验一方面容易造成不必要的服务端压力,Easy UI有现成的mask样式,简单封装一下就可以使用,之前查阅搜集了相关资料和文章,发现都介绍的都不是很完整,所以本篇blog就完整的记录一下通过Easy UI快速实现这种效果以及如何集成到项目中. 引入.封装和调用 首先当然是在我们的项目中集成jquery以及easyui的相关资源包,除了jquery的核心js文件,easy

jquery easy ui 1.5最新版本 简单的权限分配

jquery easy 1.5 Maven+servlet+jsp+jdbc实现权限管理分配 首先,我先说明下,我只是一个菜鸟,我只是在编程道路上摸索的一个的小码农.做开发三年了,这好像是我第一次写博客.以前接触过类似于jquery easy  ui 的DWZ,是我第一家公司用的UI框架.所以用easy ui感觉很快能上手.都是基于jquery 的ui框架.好,废话少说.此次项目我是用最基础的jsp+servlet+jdbc写的,同时加入了maven管理jar包以及发布.应该很好理解的. 1.准