zoukankan      html  css  js  c++  java
  • 前端框架easyui layout, Tabs,tree

    一.三大前端框架的

    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="150px;padding:10px;">west content</div>
    	<div data-options="region:'east',split:true,collapsed:true,title:'East'" style="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="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#"   
        }]    
    

      

  • 相关阅读:
    RabbitMQ
    连接池,为什么要使用连接池?
    mac 安装arcanist
    感触
    UDP socket
    Servlet过滤器
    PL、SQL
    springmvc 文件上传实现(不是服务器的)
    注解spring
    excel工具类
  • 原文地址:https://www.cnblogs.com/chenjiahao9527/p/11006705.html
Copyright © 2011-2022 走看看