esayUI
前端开发： 企业中java工程师，大多不擅于HTML+CSS 网页布局设计 ，门户网站 （由前端工程师设计 ）， 企业内部应用软件 （java工程师，选择前端UI框架  ExtJS 、Flex 、 Easy UI ）
    ----------------------  Easy UI 学习成本非常低
easyui 最新版本 1.3.4， bos开发使用 1.3.2版本
    ExtJS 2.x 免费， 3.x 开始收费
    Easy ui 1.2.3版本开始收费
   
问题： 为什么你不用ExtJS ?
easy ui 学习成本低，很容易在项目中集成使用 ，ExtJS 学习成本高昂
EasyUI+tutorial.CHM  官方demo例子
jQuery_EasyUI.doc demo例子
EasyUI-API+1.3.2.chm 中文api
jquery.EasyUI-1.3.1+API.chm 英文api
jquery-easyui-1.3.2.zip 框架开发包
目录结构分析
demo  示例
locale 国际化信息文件 （默认英文提示信息）
plugins 框架功能js文件
src 源码
themes 主题样式
自带5套主题， icons 图标文件
easyloader.js 核心加载器 （加载plugins 功能js）
jquery-1.8.0.min.js  jquery开发js文件
jquery.easyui.min.js  easy ui 框架功能js合集
jquery.easyui.min.js == easyloader.js + plugins/*
1.如何在页面中使用 easy ui ？
引入 四个文件
<link rel="stylesheet" type="text/css" href="${tPath}/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${tPath}/js/easyui/themes/icon.css">
<script type="text/javascript" src="${tPath}/js/easyui/jquery-1.8.3.js"></script>
<script type="text/javascript"
src="${tPath}/js/easyui/jquery.easyui.min.js"></script>
2、 学习使用easy ui 布局功能
layout 布局控件使用
将 body、div 分成东西南北中，五个部分
<body class="easyui-layout">
   
    <div region="north"  style="height: 100px" title="北部面板">北部</div>
    <div data-options="region:'south',title:'南部面板'" style="height: 100px">南部</div>
    <div data-options="region:'west',title:'西部面板'"  style="width: 100px">西部</div>
    <div data-options="region:'east',title:'东部面板'" style="width: 100px">东部</div>
    <div data-options="region:'center',title:'中部面板'">中部</div>
</body>
注意，只有center区域的必须的
3、 可折叠菜单  accordion 布局
        <!-- 如果子div占满父容器 fit=true -->
        <div class="easyui-accordion" data-options="fit:true">
           
            <div data-options="title:'基本菜单'">aa</div>
            <div data-options="title:'系统菜单'">bb</div>
        </div>
通过 iconCls:'icon-help' 指定图标 （必须引入 icon.css文件 ）
4、 选项卡布局  tabs 布局
closable为true , 选项卡可以被关闭 jquery在线免费学习
       
        <div class="easyui-tabs" data-options="fit:true">
            <div data-options="title:'选项卡一'">选项卡一</div>
            <div data-options="title:'选项卡二',closable:true">选项卡二</div>
            <div data-options="title:'选项卡三'">选项卡三</div>
        </div>
ztree
主页菜单栏 树形菜单 生成
树形结构菜单，通常使用 js 类库制作的 
bos 菜单树，使用ztree 制作的
1、zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。
开发使用 ztree 3.5 (jquery 插件 )
api 文档
css 样式表
demo 案例
js 核心类库
今天目标： 简单树两种方式 （标准数据 和 简单数据 ）
导入 all-3.5.js 、 zTreeStyle.css （依赖 img 图标文件夹）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。