首页 > 其他 > 详细

4、easyUI-七种布局（layout）

时间：2016-07-11 23:39:25      阅读：332      评论：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年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
教程昨日排行
更多>
友情链接
汇智网   PHP教程   插件网  
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣，分享程序人生！