一.三大前端框架的

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. day09网络编程

    一 操作系统基础 操作系统:(Operating System,简称OS)是管理和控制计算机硬件与软件资源的计算机程序,是直接运行在“裸机”上的最基本的系统软件,任何其他软件都必须在操作系统的支持下才 ...

  2. BZOJ 2716/2648 SJY摆棋子 (三维偏序CDQ+树状数组)

    题目大意: 洛谷传送门 这明明是一道KD-Tree,CDQ分治是TLE的做法 化简式子,$|x1-x2|-|y1-y2|=(x1+y1)-(x2+y2)$ 而$CDQ$分治只能解决$x1 \leq x ...

  3. 转[总结]FFMPEG视音频编解码零基础学习方法 .

    http://blog.csdn.net/leixiaohua1020/article/details/15811977 在CSDN上的这一段日子,接触到了很多同行业的人,尤其是使用FFMPEG进行视 ...

  4. selenium+java实现浏览器前进、后退和刷新

  5. xml00

    <?xml verson="1.0" encoding="ISO-8859-1"?> xml声明<note> <to>jon ...

  6. BZOJ 3674 可持久化并查集加强版(路径压缩版本)

    /* bzoj 3674: 可持久化并查集加强版 http://www.lydsy.com/JudgeOnline/problem.php?id=3674 用可持久化线段树维护可持久化数组从而实现可持 ...

  7. 【LeetCode-面试算法经典-Java实现】【120-Triangle（三角形）】

    [120-Triangle(三角形)] [LeetCode-面试算法经典-Java实现][全部题目文件夹索引] 原题 Given a triangle, find the minimum path s ...

  8. [GraphQL] Fetch Server Data and Client-side State in One Query using React Apollo + GraphQL

    In this lesson we look at how the Apollo @client directive can be used to fetch client-side state al ...

  9. C++数值类型极限值的获取

    C/C++中基本类型的数值极限值一般来说都是与详细平台有关的,在程序设计的过程中为了写出与平台无关的程序则必须通过合理科学的方法去获取各种类型的极值,经常使用的获取方法有两种:一种是传统的C语言所採用 ...

  10. 如何在IE浏览器里模仿DomContentLoaded

    稍微了解一点框架的事件绑定的都知道 window.onload 事件需要在页面所有内容(包括图片.flash.iframe等)加载完后,才执行,但往往我们更希望在 DOM 一加载完就执行脚本,而各大框 ...