一.三大前端框架的

1.easyui=jquery+html4（用来做后台的管理界面）

不要钱，开发速度快，不好看，不支持响应式

2.bootstrap=jquery+html5

好看，开发速度快，部分免费，支持响应式

3.alyui

好看，开发速度快，免费，支持响应式c

二.jQuery EasyUI （layout， Tabs，tree)

下载程序库并导入EasyUI和javascript文件

<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">

<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">

<script type="text/javascript" src="easyui/jquery-1.7.2.min.js"></script>

<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

1.layout(布局)

1.布局容器有5个区域：北、南、东、西和中间。
中间区域面板是必须的，边缘的面板都是可选的。
每个边缘区域面板都可以通过拖拽其边框改变大小，也可以点击折叠按钮将面板折叠起来。
布局可以进行嵌套，用户可以通过组合布局构建复杂的布局结构。
注意：嵌套在内部的布局面板的左侧(西面)面板是折叠的。

创建布局：

为<div/>标签增加名为'easyui-layout'的类ID

<body class="easyui-layout">

	<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">north region</div>

	<div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">west content</div>

	<div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>

	<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>

	<div data-options="region:'center',title:'Center'"></div>

</body>

　　

2.Tabs（工具菜单）

通过标签可以更容易的创建选项卡，我们不需要写任何Javascript代码。只需要给<div/>标签添加一个类ID'easyui-tabs'。每个选项卡面板都通过子<div/>标签进行创建，用法和panel(面板)相同。

<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">

    <div title="Tab1" style="padding:20px;display:none;">

        tab1

    </div>

    <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">

        tab2

    </div>

    <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">

        tab3

    </div>

</div>

3.tree（树形展示）

树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。

<ul id="tt" class="easyui-tree">

    <li>

        <span>Folder</span>

        <ul>

            <li>

                <span>Sub Folder 1</span>

                <ul>

                    <li>

                        <span><a href="#">File 11</a></span>

                    </li>

                    <li>

                        <span>File 12</span>

                    </li>

                    <li>

                        <span>File 13</span>

                    </li>

                </ul>

            </li>

            <li>

                <span>File 2</span>

            </li>

            <li>

                <span>File 3</span>

            </li>

        </ul>

    </li>

    <li>

        <span>File21</span>

    </li>

</ul>

　　树控件也可以定义在一个空<ul>元素中并使用Javascript加载数据。

<ul id="tt"></ul>  

$('#tt').tree({

    url:'tree_data.json'

});

　　使用loadFilter函数处理来自Web Services的JSON数据。

$('#tt').tree({

    url: ...,

    loadFilter: function(data){

        if (data.d){

            return data.d;

        } else {

            return data;

        }

    }

});

 

 

树控件数据格式化

每个节点都具备以下属性：

  • id：节点ID，对加载远程数据很重要。
  • text：显示节点文本。
  • state：节点状态，'open' 或 'closed'，默认：'open'。如果为'closed'的时候，将不自动展开该节点。
  • checked：表示该节点是否被选中。
  • attributes: 被添加到节点的自定义属性。
  • children: 一个节点数组声明了若干节点。

一些案例：

[{

    "id":1,

    "text":"Folder1",

    "iconCls":"icon-save",

    "children":[{

        "text":"File1",

        "checked":true

    },{

        "text":"Books",

        "state":"open",

        "attributes":{

            "url":"/demo/book/abc",

            "price":100

        },

        "children":[{

            "text":"PhotoShop",

            "checked":true

        },{

            "id": 8,

            "text":"Sub Bookds",

            "state":"closed"

        }]

    }]

},{

    "text":"Languages",

    "state":"closed",

    "children":[{

        "text":"Java"

    },{

        "text":"C#"

    }]

　　

前端框架easyui layout， Tabs，tree的更多相关文章

  1. 前端框架Easyui学习积累

    前端框架Easyui学习积累 1.easyui textbox 赋值:$("#id").textbox("setValue","xx"); ...

  2. 前端框架 EasyUI （0） 重新温习（序言）

    几年前,参与过一个项目.那算是一个小型的信息管理系统,BS 结构的,前端用的是基于 jQuery 的 EasyUI 框架. 我进 Team 的时候,项目已经进入开发阶段半个多月了.听说整个项目的框架是 ...

  3. 前端框架 EasyUI （2）页面布局 Layout

    在 Web 程序中,页面布局对应用程序的用户体验至关重要. 在一般的信息管理类的 Web 应用程序中,页面结构通常有一个主工作区,然后在工作区上下左右靠近边界的区域设置一些边栏,用于显示信息或放置一些 ...

  4. 前端框架 EasyUI （1）熟悉一下EasyUI

    jQuery EasyUI 官方网站 http://www.jeasyui.com/ .去年新开了个中文网 http://www.jeasyui.net/,不知道是不是官方的,不过看着挺像样.但是,广 ...

  5. EasyUI+bootsrtap混合前端框架

    EasyUI+bootsrtap混合前端框架 http://www.jeasyui.com/download/index.php用户没有登录前浏览的页面用bootsrtap框架用户登录进去后的商家管理 ...

  6. easyui前端框架01

    一. 三大前端框架的特点 1.easyui=jquery+html4 优点:快速开发.功能齐全 .免费 缺点:不好看.不支持相应式开发 2.bootstrap=jquery+html5 优点: 功能强 ...

  7. ASP.NET MVC+EF框架+EasyUI实现权限管理系列(23)-设置角色遗留问题和为权限设置角色以及EasyUI Tabs的使用

    ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   (1):框架搭建    (2):数据库访问层的设计Demo    (3):面向接口编程   (4 ):业务逻辑层的封装    ...

  8. EasyUI搭建前端框架

    EasyUI搭建前端框架 前言: 最近在忙公司的项目,也没太多时间来更新博客,谢谢大家的关注. 好啦,有了前面的系统整体简介和用户登录界面,我们开始使用EasyUI搭建前端页面框架! EasyUI官方 ...

  9. 布局-EasyUI Panel 面板、EasyUI Tabs 标签页/选项卡、EasyUI Accordion 折叠面板、EasyUI Layout 布局

    EasyUI Panel 面板 通过 $.fn.panel.defaults 重写默认的 defaults. 面板(panel)当做其他内容的容器使用.它是创建其他组件(比如:Layout 布局.Ta ...

随机推荐

  1. day25-2 random,os,sys模块

    目录 random 为什么要有random模块,random模块有什么用 os 为什么要有os模块,os模块有什么用 sys 为什么要有sys模块,sys模块有什么用 random import ra ...

  2. JavaScript进阶【五】利用JavaScript实现动画的基本思路

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. [poj 3539] Elevator (同余类bfs)

    Description Edward works as an engineer for Non-trivial Elevators: Engineering, Research and Constru ...

  4. [luogu3726 HNOI2017] 抛硬币 （拓展lucas）

    传送门 数学真的太优秀了Orz 数据真的太优秀了Orz 题目描述 小 A 和小 B 是一对好朋友,他们经常一起愉快的玩耍.最近小 B 沉迷于**师手游,天天刷本,根本无心搞学习.但是已经入坑了几个月, ...

  5. 2018年九个很受欢迎的vue前端UI框架

    最近在逛各大网站,论坛,SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,小编自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在做自己 ...

  6. 【hdu 6406】Taotao Picks Apples

    [链接] 我是链接,点我呀:) [题意] 题意相当于问你改变一个位置之后. 从左往右扫描最大值.这个最大值会改变多少次. [题解] 假设我们改变的是i这个位置,下面说的a[i]都是改成q之后的a[i] ...

  7. js 现给数字加三位一逗号间隔的种方法

    方法一:(ie下有问题) <script type= "text/javascript"> var num_s = "1232134456.546 " ...

  8. （转）关于使用iText导出pdf

    一.iText简介 iText是著名的开放源码的站点sourceforge一个项目,是用于生成PDF文档的一个java类库.通过iText不仅可以生成PDF或rtf的文档,而且可以将XML.Html文 ...

  9. 【Web API系列教程】3.4 — 实战：处理数据（处理实体关系）

    前言 本部分描写叙述了EF怎样载入相关实体的细节,而且怎样在你的模型类中处理环形导航属性.(本部分预备了背景知识,而这不是完毕这个教程所必须的.你也能够跳到第五节) 预载入和延迟载入 预载入和延迟载入 ...

  10. 今天又犯了Java/Scala里面substring的错误

    每次都误以为是 substring(startIndex, length) 其实是 substring(startIndex, endIndex) 嗯 Java/Scala 跟 C++ 是不一样的.