jQuery Easy UI之旅---布局篇

　　jQuery easyUI 布局主要有四种，分别是面板、选项卡、分类以及布局。这里只是简单列举一些小例子，easyUI的其他更加强大的功能以及其妙用还是要在实际开发中自己去体会~~~

　　

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>EasyUI布局</title>
    <script type="text/javascript" src="js/jquery-1.11.2.js"></script>
    <script type="text/javascript" src="js/EasyUI/jquery.easyui.min.js"></script>
    <link type="text/css" rel="stylesheet" href="js/EasyUI/themes/default/panel.css" />
    <link type="text/css" rel="stylesheet" href="js/EasyUI/themes/default/linkbutton.css" />
    <link type="text/css" rel="stylesheet" href="js/EasyUI/themes/default/tabs.css" />
    <link type="text/css" rel="stylesheet" href="js/EasyUI/themes/default/accordion.css" />
    <link type="text/css" rel="stylesheet" href="js/EasyUI/themes/default/layout.css" />
    <link type="text/css" rel="stylesheet" href="js/EasyUI/themes/default/resizable.css" />
    <link type="text/css" rel="stylesheet" href="js/EasyUI/themes/icon.css" />
    <script type="text/javascript">
        $(function () {
            $('#p').panel({
                width: 500,
                height: 150,
                title: 'My Panel',
                tools: [{
                    iconCls: 'icon-add',
                    handler: function () { alert('new') }
                }, {
                    iconCls: 'icon-save',
                    handler: function () { alert('save') }
                }],
                closable: true,//是否显示关闭按钮
                collapsible: true,//是否显示折叠按钮
                minimizable: true,//是否显示最小号按钮
                maximizable:true,//是否显示最大号按钮
                onMove: function (left,top) {
                    alert("新的位置，距离上方：" + top + "px,距离左边：" + left + "px");
                }
            });
            //点击按钮，panel从后台加载数据，并显示在panel里面
            $("#btnMove").click(function () {
                $("#p").panel("move", {
                    left: 300,
                    top: 100
                });
                $("#p").panel(
                {
                    href: "PanelHandler.ashx",
                    onLoad: function () {
                        alert("hah");
                    }
                });
            });
            $('#tt').tabs({
                border: true,
                tabPosition: "left",//设定选项卡位置
                onSelect: function (title) {
                    alert(title + ' is selected');
                }
            });
            $("#btnAdd").click(function () {
                $('#tt').tabs('add', {
                    title: 'New Tab',
                    content: 'Tab Body',
                    closable: true,
                    tools: [{
                        iconCls: 'icon-mini-refresh',
                        handler: function () {
                            alert('refresh');
                        }
                    }]
                });
            });
            $('#aa').accordion({
                animate: false
            });
            $("#btnReflesh").click(function () {
                var pp = $('#aa').accordion('getSelected'); // 获取选择的面板 
                if (pp) {
                    pp.panel('refresh', 'PanelHandler.ashx');  // 调用'refresh'方法刷新 
                }
            });

            $('#cc').layout();
            $('#cc').layout('add', {
                region: 'west',
                width: 100,
                title: 'West Title',
                split: true
            });
            $('#cc').layout('add', {
                region: 'south',
                height: 100,
                title: 'South Title',
                split: true
            });
            $('#cc').layout('add', {
                region: 'north',
                height:100,
                title: 'North Title',
                split: true
            });
            $('#cc').layout('add', {
                region: 'east',
                width:100,
                title: 'East Title',
                split: true
                //collapsed:true
            });
            
            $("#btnTest").click(function () {
                //alert(1);
                //$("#cc").layout("collapse", "north");
                //alert(2);
            });
        });
    </script>
</head>
<body>
    <div style="width:98%;margin:0 auto;">
        <!--第一个小例子，panel面板，使用标签的形式创建，需要引入panel.css-->
        <div id="p1" class="easyui-panel" title="My Panel"
             style="width:500px;height:150px;padding:10px;background:#fafafa;"
             data-options="iconCls:'icon-save',closable:true,
                collapsible:true,minimizable:true,maximizable:true">
            <p>panel content.</p>
            <p>panel content.</p>
        </div>
        <br />
        <!--使用js创建panel-->
        <div id="p" style="padding:10px;">
            <p>panel content.</p>
            <p>panel content.</p>
        </div>  
        <input type="button" id="btnMove" value="移动面板" />
        <br />
        <br />
        <!--第二个小例子，选项卡需要引入linkbutton.css,tabs.css-->
        <div id="tt1" class="easyui-tabs" style="width:500px;height:250px;">
            <div title="Tab1" style="padding:20px;display:none;">
                tab1
            </div>
            <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
                tab2
            </div>
            <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
                tab3
            </div>
        </div>
        <br />
        <!--通过js创建tabs-->
        <div id="tt" style="width:500px;height:250px;">
            <div title="Tab1" style="padding:20px;display:none;">
                tab1
            </div>
            <div title="Tab2" style="overflow:auto;padding:20px;display:none;">
                tab2
            </div>
            <div title="Tab3" style="padding:20px;display:none;">
                tab3
            </div>
        </div>
        <input type="button" id="btnAdd" value="添加选项卡" />
        <br />
        <br />
        <!--第三个小例子，分类-->
        <div id="aa1" class="easyui-accordion" style="width:300px;height:200px;">
            <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
                <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">
                content3
            </div>
        </div>
        <br />
        <!--使用js方式创建分类-->
        <div id="aa" style="width:300px;height:200px;">
            <div title="Title1" style="overflow:auto;padding:10px;">
                <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" style="padding:10px;">
                content2
            </div>
            <div title="Title3">
                content3
            </div>
        </div>
        <input type="button" id="btnReflesh" value="重新加载内容" />
        <br />
        <br />
        <!--第四个小例子，布局,需要引入resizable.css,layout.css-->
        <div id="cc1" 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',iconCls:'icon-reload',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>
        <br />
        <!--使用js的方式创建布局-->
        <div id="cc" style="width:600px;height:400px;">
            
        </div>
        <!--<input type="button" id="btnTest" value="折叠北方面板" />-->
    </div>
</body>
</html>

有需要的可以点击下载项目源代码。在此附上jQuery EasyUI中文API文档一个。

posted @ 2015-04-09 21:09  尋找一個證明  阅读(290)  评论(0)    收藏  举报