文档章节

easyui layout 布局实例

whoru
 whoru
发布于 2015/09/18 00:22
字数 416
阅读 396
收藏 1

版本:easyui1.4.2

下载:http://www.jeasyui.com/download/downloads/jquery-easyui-1.4.3.zip

以常用的 admin 后台布局为例

最终效果如图:

参考代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Admin layout</title>
    <!-- 引入核心js文件 -->
    <link rel="stylesheet" type="text/css" href="./assets/css/easyui.css">
    <link rel="stylesheet" type="text/css" href="./assets/css/icon.css">
    <!-- 引入核心脚本文件 -->
    <script type="text/javascript" src="./assets/js/jquery.min.js"></script>
    <script type="text/javascript" src="./assets/js/jquery.easyui.min.js"></script>
    <!-- 测试样式代码 -->
    <style>
        #logo {
            width: auto;
            height: 40px;
            line-height: 52px;
            font-size: 24px;
            padding-left: 40px;
        }
        #footer {
            background: #E7F0FF;
            height: 30px;
            /*line-height: 45px;*/
            text-align: center;
            font-size: 14px;
            color: #666;
            padding-top: 5px;
        }
    </style>
</head>
<body class="easyui-layout">
    <!-- header -->
    <div data-options="region:'north',split:true" style="height:60px;background:#E7F0FF;">
        <div id="logo">
            Admin
        </div>
    </div><!-- // end header -->
    <!-- main -->
    <div data-options="region:'center',border:false">
        <div class="easyui-layout" data-options="fit:true">
            <!-- siderbar -->
            <div data-options="region:'west',split:true" title="功能菜单" style="width:18%;">
                <div class="easyui-accordion" data-options="fit:true,border:false">
                    <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:15px;">
                        <h3 style="color:#0099FF;">Accordion for jQuery</h3>
                        <p>Accordion is a part of easyui framework for jQuery.
                        It lets you define your accordion component on web page more easily.</p>
                    </div>
                    <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
                        content2
                    </div>
                    <div title="Title3" style="padding:10px">
                        content3
                    </div>
                </div>
            </div><!-- // end siderbar -->
            <!-- content -->
            <div data-options="region:'center'">
                <div class="easyui-tabs" data-options="fit:true,border:false,plain:true">
                    <div title="首页" data-options="href:''" style="padding:10px">
                        这是首页 哈哈~
                    </div>
                    <div title="数据表格" style="padding:5px">
                        <table class="easyui-datagrid"
                                data-options="url:'datagrid_data1.json',method:'get',singleSelect:true,fit:true,fitColumns:true">
                            <thead>
                                <tr>
                                    <th data-options="field:'itemid'" width="80">Item ID</th>
                                    <th data-options="field:'productid'" width="100">Product ID</th>
                                    <th data-options="field:'listprice',align:'right'" width="80">List Price</th>
                                    <th data-options="field:'unitcost',align:'right'" width="80">Unit Cost</th>
                                    <th data-options="field:'attr1'" width="150">Attribute</th>
                                    <th data-options="field:'status',align:'center'" width="50">Status</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div><!-- // end content -->
        </div>
    </div><!-- // end main -->
    <!-- footer -->
    <div data-options="region:'south',split:true" id="footer" >
        Copyright 2015 &copy; xxxx. All Rights Reserved.
    </div><!-- // end footer -->
</body>
</html>


© 著作权归作者所有

whoru
粉丝 19
博文 167
码字总数 79254
作品 0
济南
高级程序员
私信 提问
jQuery EasyUI使用教程之创建Web页面的边框布局

<jQuery EasyUI最新版下载> 本教程主要为大家演示如何使用jQuery EasyUI创建Web页面的边框布局。该边框布局提供五个区域:east、west、north、south、center,以下是一些常见的用法: north区...

Miss_Hello_World
2015/11/05
437
0
jQuery-EasyUI 1.2.3 发布

Current Version: 1.2.3 ChangeLog: Bug window: Cannot resize the window with iframe content. fixed. tree: The node will be removed when dragging to its child. fixed. combogrid: T......

ejzhang
2011/04/26
6.2K
3
EasyUI基础入门之Parser(解析器)

前言 JQuery EasyUI提供的组件包括功能强大的DataGrid,TreeGrid、面板、下拉组合等。用户可以组合使用这些组件,也可以单独使用其中一个。(使用的形式是以插件的方式提供的) EasyUI体系结构 ...

LCore
2014/07/11
2.4K
9
如何用jquery插件生成的组件添加easyui属性

我想做一个插件来画页面,中间需要用到easyui代码如下: $.fn.workflow=function workflow(){ debug("test"); return this.each(function(){ var target = $(this); var mainDiv = $(' '); m......

spring_李璐
2013/04/08
460
0
easyui 框架Layout插件

1:引入的css: <link rel="stylesheet" href="${rc.contextPath}/static/easyui/themes/custom/easyui.css"> <link rel="stylesheet" href="${rc.contextPath}/static/easyui/themes/icon.css......

赵作文
2015/11/16
121
0

没有更多内容

加载失败,请刷新页面

加载更多

golang-字符串-地址分析

demo package mainimport "fmt"func main() {str := "map.baidu.com"fmt.Println(&str, str)str = str[0:5]fmt.Println(&str, str)str = "abc"fmt.Println(&s......

李琼涛
今天
4
0
Spring Boot WebFlux 增删改查完整实战 demo

03:WebFlux Web CRUD 实践 前言 上一篇基于功能性端点去创建一个简单服务,实现了 Hello 。这一篇用 Spring Boot WebFlux 的注解控制层技术创建一个 CRUD WebFlux 应用,让开发更方便。这里...

泥瓦匠BYSocket
今天
6
0
从0开始学FreeRTOS-(列表与列表项)-3

FreeRTOS列表&列表项的源码解读 第一次看列表与列表项的时候,感觉很像是链表,虽然我自己的链表也不太会,但是就是感觉很像。 在FreeRTOS中,列表与列表项使用得非常多,是FreeRTOS的一个数...

杰杰1号
今天
8
0
Java反射

Java 反射 反射是框架设计的灵魂(使用的前提条件:必须先得到代表的字节码的 Class,Class 类 用于表示.class 文件(字节码)) 一、反射的概述 定义:JAVA 反射机制是在运行状态中,对于任...

zzz1122334
今天
6
0
聊聊nacos的LocalConfigInfoProcessor

序 本文主要研究一下nacos的LocalConfigInfoProcessor LocalConfigInfoProcessor nacos-1.1.3/client/src/main/java/com/alibaba/nacos/client/config/impl/LocalConfigInfoProcessor.java p......

go4it
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部