一.三大前端框架的

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. MySQL安装部署

    MySQL安装部署 使用自动化脚本

  2. windows 端口号占用和解决方法

    https://blog.csdn.net/qq_39657909/article/details/80378983

  3. navicat Premium远程链接mysql报错

    1,报错1057,原来是没有远程权限连接mysql 2.打开my.ini文件,添加skip-grant-tables跳过验证 3.添加到path环境变量,前面是英文下的分号 4.切换到cmd,输入my ...

  4. 实验二：编写输出"Hello World!"

    1.首先打开eclipse这个软件,新建Java项目,执行“文件→ 新建→Java项目 ”菜单命令,打开新建Java对话框,在项目名的编辑框中输入项目名编写输出"Hello World!”, ...

  5. 【SPOJ 104】HIGH - Highways (高斯消元)

    题目描述 In some countries building highways takes a lot of time- Maybe that's because there are many po ...

  6. [tyvj 1061] Mobile Service (线性dp 滚动数组)

    3月15日第一题! 题目限制 时间限制 内存限制 评测方式 题目来源 1000ms 131072KiB 标准比较器 Local 题目描述 一个公司有三个移动服务员.如果某个地方有一个请求,某个员工必须 ...

  7. Cocos2d切换场景出现的问题-error C2653: “***”不是类或命名空间名称

    1,在开头引入头文件 2,在要引入的头文件中,去除以下代码: #ifndef __HELLOWORLD_SCENE_H__ #define __HELLOWORLD_SCENE_H__ #endif ...

  8. js中Number()、parseInt()和parseFloat()的区别进行详细介绍

    http://www.jb51.net/article/100606.htm 区别: parseFloat,parseInt  解析的过程中如果前面有空格,结果不会有任何影响,Number解析的时候结 ...

  9. JAVA的基本数据类型和引用数据类型的区别

        引用数据类型: 类.接口类型.数组类型.枚举类型.注解类型:   基本数据类型和引用数据类型的区别: 基本数据类型在被创建时,在栈上给其划分一块内存,将数值直接存储在栈上: 引用数据类型在被创 ...

  10. CAD教程-AL对其命令

    AL可以实现不规则的对其功能 1.第一步按下AL,按下Enter 2.选择第一个源点 3.选择第一个目标点 4.选择第二个源点 5.选择第二个目标点 6.按下Enter,完成移位