前端框架easyui layout, Tabs,tree

Posted chenjiahao9527

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端框架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="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的主要内容,如果未能解决你的问题,请参考以下文章

JS-jQuery-EasyUI-Layout-Tabs:Tabs 标签页/选项卡

jQuery EasyUI 中文API Layout(Tabs)

jQuery easyui刷新当前tabs的方法

网站前端_EasyUI.基础入门.0002.带你玩转jQuery EasyUI Panel组件 ?

jQueryeasyui的easyui-tabs相互嵌套问题,图中MMMM包含了 abcd区域 其中bd区域为空闲区,现在我只想要ac

easyui实现树形菜单Tab功能layout布局