码迷，mamicode.com
首页 > 其他好文 > 详细

4、easyUI-七种布局（layout）

时间：2016-07-11 23:39:29      阅读：233      评论：0      收藏：0      [点我收藏+]

标签：

1、为网页创建边框布局

边框布局（border layout）提供五个区域：east、west、north、south、center。以下是一些通常用法：

  • north 区域可以用来显示网站的标语。
  • south 区域可以用来显示版权以及一些说明。
  • west 区域可以用来显示导航菜单。
  • east 区域可以用来显示一些推广的项目。
  • center 区域可以用来显示主要的内容。

 

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>为网页创建边框布局</title>
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/color.css">
    <script src="../../../ui/jquery-easyui-1.4.5/jquery.min.js"></script>
    <script src="../../../ui/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
    <script src="../../../ui/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script>
    <script src="../../../js/crud/bus_pubuser.js"></script>
    <style>
        .rtitle{
            font-size:18px;
            font-weight:bold;
            padding:5px 10px;
            background:#336699;
            color:#fff;
        }
    </style>
    <script>
        $(function(){
            showcontent(‘http://www.cnblogs.com/jianyeLee/p/5656968.html‘);
        });
    </script>
    </script>
</head>
<body>
    <div class="easyui-layout" style="width:100%;height:100%;">
        <div region="north" border="false" class="rtitle">
            RSS 在线阅读
        </div>
        <div region="west" split="true" title="博文栏目" style="width:150px;">
            <ul class="easyui-tree" lines="true" >
                <li>
                    <span>我的博文</span>
                    <ul>
                        <li>
                            <span>easyUI</span>
                            <ul>
                                <li><a href="javascript:void(0)" onclick="showcontent(‘http://www.cnblogs.com/jianyeLee/p/5656968.html‘)" target="bowen"><span>1、easyUI-创建 CRUD普通dataGrid（表格）</span></a></li>
                                <li><a href="javascript:void(0)" onclick="showcontent(‘http://www.cnblogs.com/jianyeLee/p/5657657.html‘)" target="bowen"><span>2、easyUI-创建 CRUD可编辑dataGrid（表格）</span></a></li>
                            </ul>
                        </li>
                        <li state="closed">
                            <span>Highcharts</span>
                            <ul>
                                <li>
                                    <span>折线图</span>
                                    <ul>
                                        <li><span>1-Highcharts环境介绍及配置</span></li>
                                        <li><span>2-Highcharts曲线图之折线图</span></li>
                                        <li><span>3-Highcharts曲线图之显示点值折线图</span></li>
                                        <li><span>4-Highcharts曲线图之时间轴折线图</span></li>
                                        <li><span>5-Highcharts曲线图之轴反转</span></li>
                                        <li><span>6-Highcharts曲线图之带标识</span></li>
                                        <li><span>7-Highcharts曲线图之分辨带</span></li>
                                        <li><span>8-Highcharts曲线图之对数直线图</span></li>
                                    </ul>
                               </li> 
                               <li>
                                    <span>3D图</span>
                                    <ul>
                                        <li><span>1-Highcharts 3D图之普通3D柱状图与带空值</span></li>
                                        <li><span>2-Highcharts 3D图之3D柱状图带可调试倾斜角度</span></li>
                                        <li><span>3-Highcharts 3D图之3D柱状图分组叠堆3D图</span></li>
                                        <li><span>4-Highcharts 3D图之3D普通饼图</span></li>
                                        <li><span>5-Highcharts 3D图之3D双饼图</span></li>
                                    </ul>
                               </li> 
                            </ul>
                        </li>
                    </ul>
                    
                </li>
            </ul>
        </div>
        <div id="content" region="center" title="在线阅读" style="padding:5px;">
            <iframe id="bowen" name="bowen"  style="border: none;width: 100%;height: 100%;"></iframe>
        </div>
    </div>
</body>
<html>
/*
 * layout布局
 */
function showcontent(url){
    $(‘#bowen‘).attr(‘src‘,url);
}

技术分享

2、在面板中创建复杂布局

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>在面板中创建复杂布局</title>
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/color.css">
    <script src="../../../ui/jquery-easyui-1.4.5/jquery.min.js"></script>
    <script src="../../../ui/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
    <script src="../../../ui/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script>
    <script src="../../../js/crud/bus_pubuser.js"></script>
    <style>
        .p-search{
            background:#fafafa;
            padding:5px;
            border:1px solid #ccc;
            border-bottom:0;
            overflow:hidden;
        }
        .p-search input{
            width:300px;
            border:1px solid #ccc;
            background: #fff url(‘../../../img/search.png‘) no-repeat right top;
        }
        .p-right{
            text-align:center;
            border:1px solid #ccc;
            border-left:0;
            width:150px;
            background:#fafafa;
            padding-top:10px;
        }
    </style>
</head>
<body>
    <div class="easyui-panel" title="可收缩查询框" iconCls="icon-search" collapsible="true" style="padding:5px;width:100%;height:600;">
        <div class="easyui-layout" fit="true">
            <div region="north" border="false" class="p-search">
                <label>查询:</label><input></input>
            </div>
            <div region="center" border="false">
                <div class="easyui-layout" fit="true">
                    <div region="east" border="false" class="p-right">
                        <img src="../../../img/msn.gif"/>
                    </div>
                    <div region="center" border="false" style="border:1px solid #ccc;">
                        <div class="easyui-layout" fit="true">
                            <div region="south" split="true" border="false" style="height:60px;">
                                <textarea style="border:0;width:100%;height:100%;resize:none">Hi,I am easyui.</textarea>
                            </div>
                            <div region="center" border="false">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<html>

技术分享

3、创建折叠面板

附上所有icon

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>创建折叠面板</title>
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/color.css">
    <script src="../../../ui/jquery-easyui-1.4.5/jquery.min.js"></script>
    <script src="../../../ui/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
    <script src="../../../ui/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script>
    <script src="../../../js/crud/bus_pubuser.js"></script>
</head>
<body>
    <div class="easyui-accordion" style="width: 400px;height: 1000px;">
        <div title="accordion1" iconCls="icon-ok" >
            <h3 style="color:#0099FF;">Accordion for jQuery</h3>
            <p>content1</p>
        </div>
        <div title="easyUI" selected="true" iconCls="icon-reload">
            <p>content2</p>
        </div>
        <div title="tree menu" iconCls="icon-cut">
            <ul class="easyui-tree" lines="true">
                <li>
                    <span>menu1</span>
                    <ul>
                        <li>
                            <span>sub menu1</span>
                            <ul>
                                <li>111</li>
                                <li>111</li>
                                <li>111</li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <span>menu2</span>
                </li>
            </ul>
        </div>
        <div title="icon-blank"  iconCls="icon-blank">
            <p>icon-blank</p>
        </div>
        <div title="icon-add"  iconCls="icon-add">
            <p>icon-add</p>
        </div>
        
        <div title="icon-edit"  iconCls="icon-edit">
            <p>icon-edit</p>
        </div>
        
        <div title="icon-clear"  iconCls="icon-clear">
            <p>icon-clear</p>
        </div>
        
        <div title="icon-remove"  iconCls="icon-remove">
            <p>icon-remove</p>
        </div>
        <div title="icon-save"  iconCls="icon-save">
            <p>icon-save</p>
        </div>
        
        <div title="icon-cut" iconCls="icon-cut">
            <p>icon-cut</p>
        </div>
        <div title="icon-ok"  iconCls="icon-ok">
            <p>icon-ok</p>
        </div>
        <div title="icon-no" iconCls="icon-no">
            <p>icon-no</p>
        </div>
        <div title="icon-cancel"  iconCls="icon-cancel">
            <p>icon-cancel</p>
        </div>
        <div title="icon-reload"  iconCls="icon-reload">
            <p>icon-reload</p>
        </div>
        
        <div title="icon-search"  iconCls="icon-search">
            <p>icon-search</p>
        </div>
        
        <div title="icon-print"  iconCls="icon-print">
            <p>icon-print</p>
        </div>
        
        <div title="icon-help"  iconCls="icon-help">
            <p>icon-help</p>
        </div>
        
        <div title="icon-undo"  iconCls="icon-undo">
            <p>icon-undo</p>
        </div>
        
        <div title="icon-redo"  iconCls="icon-redo">
            <p>icon-redo</p>
        </div>
        
        <div title="icon-back"  iconCls="icon-back">
            <p>icon-back</p>
        </div>
        
        <div title="icon-sum"  iconCls="icon-sum">
            <p>icon-sum</p>
        </div>
        
        <div title="icon-tip"  iconCls="icon-tip">
            <p>icon-tip</p>
        </div>
        
        <div title="icon-filter"  iconCls="icon-filter">
            <p>icon-filter</p>
        </div>
        
        <div title="icon-man"  iconCls="icon-man">
            <p>icon-man</p>
        </div>
        
        <div title="icon-lock"  iconCls="icon-lock">
            <p>icon-lock</p>
        </div>
        
        <div title="icon-more"  iconCls="icon-more">
            <p>icon-more</p>
        </div>
        
        <div title="icon-mini-add"  iconCls="icon-mini-add">
            <p>icon-mini-add</p>
        </div>
        
        <div title="icon-mini-edit"  iconCls="icon-mini-edit">
            <p>icon-mini-edit</p>
        </div>
        
        <div title="icon-mini-refresh"  iconCls="icon-mini-refresh">
            <p>icon-mini-refresh</p>
        </div>
        
        <div title="icon-large-picture"  iconCls="icon-large-picture">
            <p>icon-large-picture</p>
        </div>
        
        <div title="icon-large-clipart"  iconCls="icon-large-clipart">
            <p>icon-large-clipart</p>
        </div>
        
        <div title="icon-large-shapes"  iconCls="icon-large-shapes">
            <p>icon-large-shapes</p>
        </div>
        
        <div title="icon-large-smartart"  iconCls="icon-large-smartart">
            <p>icon-large-smartart</p>
        </div>
        <div title="icon-large-chart"  iconCls="icon-large-chart">
            <p>icon-large-chart</p>
        </div>
    </div>
</body>
<html>

技术分享技术分享

4、创建标签页（Tabs）

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>创建标签页（Tabs）</title>
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/color.css">
    <script src="../../../ui/jquery-easyui-1.4.5/jquery.min.js"></script>
    <script src="../../../ui/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
    <script src="../../../ui/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script>
    <script src="../../../js/crud/bus_pubuser.js"></script>
</head>
<body>
    <div class="easyui-tabs" fit="false" style="width: 100%;height: 100%;" plain="false" >
        <div title="页签1">
            <p>width number 选项卡容器宽度。  </p>
            <p>height number 选项卡容器高度。 </p>
            <p>plain boolean 设置为true时，将不显示控制面板背景。 </p>
            <p>fit boolean 设置为true时，选项卡的大小将铺满它所在的容器。 </p>
            
        </div>
        <div title="页签2" selected="2">
            <p>selected number 初始化选中一个tab页。 </p>
        </div>
        <div title="页签3">
            <p>showHeader boolean 设置为true时，显示tab页标题。  </p>
        </div>
    </div>
</body>
<html>

技术分享

5、动态添加标签页（Tabs）

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>动态添加标签页（Tabs）</title>
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/color.css">
    <script src="../../../ui/jquery-easyui-1.4.5/jquery.min.js"></script>
    <script src="../../../ui/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
    <script src="../../../ui/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script>
    <script src="../../../js/crud/bus_pubuser.js"></script>
    <style>
        .rtitle{
            font-size:18px;
            font-weight:bold;
            padding:5px 5px;
            background:#336699;
            color:#fff;
        }
    </style>
</head>
<body>
    <div style="margin-bottom:10px" class="rtitle">
        <a href="#" class="easyui-linkbutton" onclick="addTab(‘bokeyuan‘,‘http://www.cnblogs.com/jianyeLee/p/5656968.html‘)">bokeyuan</a>
        <a href="#" class="easyui-linkbutton" onclick="addTab(‘jquery‘,‘http://jquery.com/‘)">jquery</a>
        <a href="#" class="easyui-linkbutton" onclick="addTab(‘easyui‘,‘http://jeasyui.com/‘)">easyui</a>
    </div>
    <div id="tt" class="easyui-tabs" style="width: 100%;height: 90%;" fit="false" pain="true">
        <div title="Home">
        </div>
    </div>
</body>
<html>
function addTab(title, url){
    if ($(‘#tt‘).tabs(‘exists‘, title)){
        $(‘#tt‘).tabs(‘select‘, title);
    } else {
        var content = ‘<iframe scrolling="auto" frameborder="0"  src="‘+url+‘" style="width:100%;height:100%;"></iframe>‘;
        $(‘#tt‘).tabs(‘add‘,{
            title:title,
            content:content,
            closable:true
        });
    }
}

技术分享

6、添加自动播放标签页（Tabs）

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>添加自动播放标签页（Tabs）</title>
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/color.css">
    <script src="../../../ui/jquery-easyui-1.4.5/jquery.min.js"></script>
    <script src="../../../ui/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
    <script src="../../../ui/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script>
    <script src="../../../js/crud/bus_pubuser.js"></script>
    <script>
        $(function(){
            var index = 0;
            var t = $(‘#tt‘);
            var tabs = t.tabs(‘tabs‘);
            setInterval(function(){
                t.tabs(‘select‘, tabs[index].panel(‘options‘).title);
                index++;
                if (index >= tabs.length){
                    index = 0;
                }
            }, 1000);
        });
    </script>
</head>
<body>
    <div id="tt" class="easyui-tabs" style="width: 100%;height: 100%;" fit="false" pain="true">
        <div title="s1">
            <img src="../../../img/shirt1.gif" />
        </div>
        <div title="s2">
            <img src="../../../img/shirt2.gif" />
        </div>
        <div title="s3">
            <img src="../../../img/shirt3.gif" />
        </div>
        <div title="s4">
            <img src="../../../img/shirt4.gif" />
        </div>
        <div title="s5">
            <img src="../../../img/shirt5.gif" />
        </div>
    </div>
</body>
<html>

技术分享

 

 

7、创建 XP 风格左侧面板

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>创建 XP 风格左侧面板</title>
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/color.css">
    <script src="../../../ui/jquery-easyui-1.4.5/jquery.min.js"></script>
    <script src="../../../ui/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
    <script src="../../../ui/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script>
    <script src="../../../js/crud/bus_pubuser.js"></script>
    <style>
        .demo{
            width:200px;height:auto;padding:10px;
        }
        .panel-body{
            background:#f0f0f0;
        }
        .panel-header{
            background:#fff url(‘../../../img/panel_header_bg.gif‘) no-repeat top right;
        }
        .panel-tool-collapse{
            background:url(‘../../../img/arrow_up.gif‘) no-repeat 0px -3px;
        }
        .panel-tool-expand{
            background:url(‘../../../img/arrow_down.gif‘) no-repeat 0px -3px;
        }
    </style>
</head>
<body>
    <div style="width:200px;height:auto;background:#7190E0;padding:5px;">
        <div class="easyui-panel demo" title="工具" collapsible="true">
            <p>content</p>
        </div>
        <br/>
        <div class="easyui-panel demo" title="文件夹" collapsible="true" collapsed="true">
            <p>content</p>
        </div>
        <br/>
        <div class="easyui-panel demo" title="地址" collapsible="true" collapsed="true">
            <p>content</p>
        </div>
        <br/>
        <div class="easyui-panel demo" title="详情" collapsible="true" collapsed="true">
            <p>content</p>
        </div>
    </div>
</body>
<html>

技术分享

这些代码布局 都不需要什么js，直接使用class即可；

 

4、easyUI-七种布局（layout）

标签：

原文地址：http://www.cnblogs.com/jianyeLee/p/5661951.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！