首頁 > 文章 > 後端開發 > easyui datagrid分頁 4、easyUI-七種佈局（layout）

easyui datagrid分頁 4、easyUI-七種佈局（layout）

PHP中文网原創: 2017-03-23 17:30:563819瀏覽

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(&#39;http://www.cnblogs.com/jianyeLee/p/5656968.html&#39;);
        });    </script>
    </script>
</head>
<body>
    <p class="easyui-layout" style="width:100%;height:100%;">
        <p region="north" border="false" class="rtitle">
            RSS 在线阅读        </p>
        <p 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(&#39;http://www.cnblogs.com/jianyeLee/p/5656968.html&#39;)" 
                                target="bowen"><span>1、easyUI-创建 CRUD普通dataGrid（表格）</span></a></li>
                                <li><a href="javascript:void(0)" 
                                onclick="showcontent(&#39;http://www.cnblogs.com/jianyeLee/p/5657657.html&#39;)" 
                                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>
        </p>
        <p id="content" region="center" title="在线阅读" style="padding:5px;">
            <iframe id="bowen" name="bowen"  style="border: none;width: 100%;height: 100%;"></iframe>
        </p>
    </p>
</body>
<html>

/*
 * layout布局 */function showcontent(url){
    $(&#39;#bowen&#39;).attr(&#39;src&#39;,url);
}