写给自己！

最新推荐文章于 2024-04-19 17:11:53 发布

qq_31377515

最新推荐文章于 2024-04-19 17:11:53 发布

阅读量239

点赞数 1

分类专栏：写给自己的文章标签：布局 easyui jquery

本文链接：https://blog.csdn.net/qq_31377515/article/details/50779630

版权

写给自己的专栏收录该内容

1 篇文章 0 订阅

订阅专栏

为了巩固自己的学习，直接把代码拿过来了。方便以后再看。

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">
    <title>Fluid Layout - jQuery EasyUI Demo</title>
    <link href="~/script/jquery-easyui-1.4.4/themes/default/easyui.css" rel="stylesheet" />
    <link href="~/script/jquery-easyui-1.4.4/themes/icon.css" rel="stylesheet" />
    <link href="~/script/jquery-easyui-1.4.4/demo/demo.css" rel="stylesheet" />
    <script src="~/script/jquery-easyui-1.4.4/jquery.min.js"></script>
    <script src="~/script/jquery-easyui-1.4.4/jquery.easyui.min.js"></script>
    <script>
        $(function () {
            binClick();
        });
        function binClick() {
            $(".x").click(function () {
                var title = $(this).text();
                var url = $(this).attr("url")
                var IsExt = $("#tt").tabs("exists", title);//判断页标签 是否存在;
                if (IsExt)
                {
                    $("#tt").tabs("select", title)
                    return;
                }
                $('#tt').tabs('add', {
                    title: title,
                    content: show(url),
                    closable: true
                });

            });
        }
        function show(url) {
            var strhtml = '<iframe src="' + url + '" scrolling="no" width="100%" height="100%" frameborder="0"></iframe>';
            return strhtml;
        };


    </script>



</head>
<body class="easyui-layout">
    <div data-options="region:'north',border:false" style="height:100px;background:#B3DFDA;padding:1px;overflow:hidden" >

        <img src="~/script/Photo/mxcp200652421492871117.jpg" style="width:100%;height:100%" />
    </div>
    @*左边布局*@
    <div data-options="region:'west',split:true,title:'West'" style="width: 150px; padding: 1px; overflow: hidden">

        <div class="easyui-accordion" data-options="multiple:true" style="width: 500px; height: auto; ">
            <div title="XXX管理" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;" >
                <a href="javascript:void(0)"class="x" url="/home/list">XXX管理</a>
            </div>
            <div title="YYY管理" style="padding:10px;" data-options="iconCls:'icon-ok'">
                <a href="javascript:void(1)"class="y">YYY管理</a>
            </div>

        </div>

    </div>
    @*左边布局结束*@
    @*底部布局*@
    <div data-options="region:'south',border:false" style="height:30px;background:#A9FACD;padding:10px;text-align:center;">版权 &copy;所有</div>
    @*底部布局结束*@
    @*中单页标签布局*@
    <div data-options="region:'center',title:'Center'">
        <div class="easyui-tabs" style="width:700px;height:250px" fit="true" id="tt">
            <div title="欢迎使用xxx" style="padding:10px" data-options="iconCls:'icon-help',closable:true">
              欢迎使用xxx
            </div>

        </div>
        </div>



</body>


</html>

上述代码用了JqueryEasyUI的布局。下面，就来看一下这个东西。
EasyUI Layout 布局
布局（layout）是有五个区域（北区 north、南区 south、东区 east、西区 west 和中区 center）的容器。中间的区域面板是必需的，边缘区域面板是可选的。每个边缘区域面板可通过拖拽边框调整尺寸，也可以通过点击折叠触发器来折叠面板。布局（layout）可以嵌套，因此用户可建立复杂的布局。
这里写图片描述

依赖

·panel
·resizable

用法

创建布局（Layout）

1、通过标记创建布局（Layout）。

添加 ‘easyui-layout’ class 到 <div> 标记。

<div id="cc" class="easyui-layout" style="width:600px;height:400px;">
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
    <div data-options="region:'east',title:'East',split:true" style="width:100px;"></div>
    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
</div>

2、在整个页面上创建布局（Layout）。

<body class="easyui-layout">
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
    <div data-options="region:'east',title:'East',split:true" style="width:100px;"></div>
    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
</body>

3、创建嵌套布局。请注意，内部布局的西区面板是折叠的。

<body class="easyui-layout">
    <div data-options="region:'north'" style="height:100px"></div>
    <div data-options="region:'center'">
        <div class="easyui-layout" data-options="fit:true">
            <div data-options="region:'west',collapsed:true" style="width:180px"></div>
            <div data-options="region:'center'"></div>
        </div>
    </div>
</body>

4、通过 ajax 加载内容。布局（layout）是基于面板（panel）创建的。各区域面板提供从 URL 动态加载内容的内建支持。使用动态加载技术，用户可以让他们的布局页面更快地显示。

<body class="easyui-layout">
    <div data-options="region:'west',href:'west_content.php'" style="width:180px" ></div>
    <div data-options="region:'center',href:'center_content.php'" ></div>
</body>

折叠布局面板（Collpase Layout Panel）

$('#cc').layout();
// collapse the west panel
$('#cc').layout('collapse','west');

通过工具按钮添加西区面板

$('#cc').layout('add',{
    region: 'west',
    width: 180,
    title: 'West Title',
    split: true,
    tools: [{
        iconCls:'icon-add',
        handler:function(){alert('add')}
    },{
        iconCls:'icon-remove',
        handler:function(){alert('remove')}
    }]
});

布局选项（Layout Options）

这里写图片描述

区域面板选项（Region Panel Options）

区域面板选项（Region Panel Options）是定义在面板（panel）组件中，下面是一些共同的和新增的属性： ##
这里写图片描述

方法

这里写图片描述

EasyUI Tabs 标签页/选项卡

这里写图片描述
**

依赖

panel
linkbutton

用法

创建标签页（Tabs）

1、通过标记创建标签页（Tabs）从标记创建标签页（Tabs）更容易，我们不需要写任何 JavaScript 代码。记住把 ‘easyui-tabs’ class 添加到
标记。每个标签页面板（tab panel）通过子
标记被创建，其用法与面板（panel）一样。

$('#tt').tabs({
    border:false,
    onSelect:function(title){
        alert(title+' is selected');
    }
});

2、编程创建标签页（Tabs）
现在我们编程创建标签页（Tabs），我们同时捕捉 ‘onSelect’ 事件。

$('#tt').tabs({
    border:false,
    onSelect:function(title){
        alert(title+' is selected');
    }
});

添加新的标签页面板（tab panel）

通过迷你工具添加一个新的标签页面板（tab panel），迷你工具图标（8x8）放置在关闭按钮前。

// 添加一个新的标签页面板（tab panel）
$('#tt').tabs('add',{
    title:'New Tab',
    content:'Tab Body',
    closable:true,
    tools:[{
        iconCls:'icon-mini-refresh',
        handler:function(){
            alert('refresh');
        }
    }]
});
```获取选中的标签页（Tab）





<div class="se-preview-section-delimiter"></div>

// 获取选中的标签页面板（tab panel）和它的标签页（tab）对象
var pp = $(‘#tt’).tabs(‘getSelected’);
var tab = pp.panel(‘options’).tab; // 相应的标签页（tab）对象
“`
这里写图片描述

这里写图片描述
事件

时间及其标签页面版这里就不一一描述了。链接送上http://www.jeasyui.net/plugins/160.html

接下来，在看一些其他的有关于JqueryEasyUI的知识。

EasyUI Pagination 分页

用法
通过标记创建分页（pagination）。
<div id="pp" class="easyui-pagination" style="background:#efefef;border:1px solid #ccc;"
    data-options="total:2000,pageSize:10">
</div>
使用 javascript 创建分页（pagination）。
<div id="pp" style="background:#efefef;border:1px solid #ccc;"></div>
$('#pp').pagination({
    total:2000,
    pageSize:10
});
让我们通过面板（panel）和分页（pagination）插件创建 ajax 分页（pagination）。当用户选择一个新的页面时，面板（panel）将显示指定页面的相应内容。
<div id="content" class="easyui-panel" style="height:200px"
    data-options="href:'show_content.php?page=1'">
</div>
<div class="easyui-pagination" style="border:1px solid #ccc;"
    data-options="
    total: 2000,
    pageSize: 10,
    onSelectPage: function(pageNumber, pageSize){
    $('#content').panel('refresh', 'show_content.php?page='+pageNumber);
    }">
</div>
顶部的面板（panel）默认显示第一个页面的内容。当用户导航页面时，'onSelectPage' 事件将被触发，该事件为内容面板（panel）调用 'refresh' 方法来加载带有一个新的 URL 参数的新页面内容。
属性及其实践方法见链接。
http://www.jeasyui.net/plugins/155.html

qq_31377515

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
写给自己！

为了巩固自己的学习，直接把代码拿过来了。方便以后再看。@{ Layout = null;}<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Fluid Layout - jQuery EasyUI Demo</title> <link href="~/script/jquery-easyui-1.4
复制链接

扫一扫