一.三大前端框架的

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. （4.33）sql server2014内存数据库（内存中OLTP（In-Memory OLTP））

    查看文章:https://blog.51cto.com/ultrasql/1626514

  2. 【leecode】小练习(简单8题)

    def twoSum(nums, target): """ 给定 nums = [2, 7, 11, 15], target = 9 因为 nums[0] + nums[ ...

  3. hibernate注解--@transient

    @transient:表示该属性并非一个到数据库表的字段的映射,ORM框架将忽略该属性. 如果一个属性并非数据库表的字段映射,就务必将其标示为@Transient,否则,ORM框架默认其注解为@Bas ...

  4. centos7 选定默认启动内核，及删除无用内核

    #使用cat /boot/grub2/grub.cfg |grep menuentry 查看系统可用内核 [root@bigapp-slave27 ~]# cat /boot/grub2/grub.c ...

  5. HDU 1164 Eddy's research I（ 试除法 & 筛法改造试除法 分解整数 ）

    链接:传送门 题意:给出一个整数 n ,输出整数 n 的分解成若干个素因子的方案 思路:经典的整数分解题目,这里采用试除法 和 用筛法改造后的试除法 对正整数 n 进行分解 方法一:试除法对正整数 n ...

  6. Mac python3 环境下 完善pdf转jpg脚本

    由于样本图片数据都是保存在pdf里,想拿到样本必须先把图片从pdf中提取出来,算是数据清洗中的一点小小的积累吧. 这里不得不吐槽一下公司存储图片的机制,业务员把jpg格式的照片放到word里,然后用工 ...

  7. 基础框架整合-ssm框架+前后台交互完整教程

    1.基本概念 ssm:spring+springMVC+mybatis 2.开发环境 Eclipse mars + jdk1.7 + maven + tomcat7 3.使用maven构建web项目 ...

  8. bzoj 1266 1266: [AHOI2006]上学路线route

    1266: [AHOI2006]上学路线route Time Limit: 3 Sec  Memory Limit: 162 MBSubmit: 2356  Solved: 841[Submit][S ...

  9. 4418: [Shoi2013]扇形面积并|二分答案|树状数组

    为何感觉SHOI的题好水. ..又是一道SB题 从左到右枚举每个区间,遇到一个扇形的左区间就+1.遇到右区间就-1,然后再树状数组上2分答案,还是不会码log的.. SHOI2013似乎另一道题发牌也 ...

  10. 1003. 我要通过！(20) （ZJUPAT 模拟）

    题目链接:http://pat.zju.edu.cn/contests/pat-b-practise/1003 "答案正确"是自己主动判题系统给出的最令人欢喜的回复.本题属于PAT ...