EasyUI 主布局整合。

博文学习地址:http://www.cnblogs.com/xishuai/p/3620327.html

html:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EasyUILoutMain.aspx.cs" Inherits="WebFM.EasyUILoutMain" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="EasyUI/themes/default/easyui.css" rel="stylesheet" />
    <link href="EasyUI/themes/icon.css" rel="stylesheet" />
    <link href="css/admin.css" rel="stylesheet" />
    <script src="EasyUI/jquery.min.js"></script>
    <script src="EasyUI/jquery.easyui.min.js"></script>
    <script src="EasyUI/locale/easyui-lang-zh_CN.js"></script>
</head>
<body class="easyui-layout">
    <div data-options="region:‘north‘,border:false" style="height: 74px; background: #2596ea; padding: 10px">
        <img src="images/main.png" />EasyUIDemo
    </div>
    <div data-options="region:‘south‘,border:false" style="height: 23px;">
        <div class="footer">EasyUIDemo</div>
    </div>

    <div data-options="region:‘west‘,split:true" title="导航栏菜单" style="width: 170px;">
        <div class="easyui-accordion" data-options="fit:true,border:false">
            <div title="系统设置1" data-options="selected:true">
                <div style="margin: 5px">
                    <ul class="tree easyui-tree" data-options="animate:true,lines:true">
                        <li data-options="iconCls:‘icon-group‘">
                            <span>基本设置</span>
                            <ul>
                                <li data-options="iconCls:‘icon-group_add‘">
                                    <span>test1</span>
                                </li>
                                <li data-options="iconCls:‘icon-group_delete‘">
                                    <span>test2</span>
                                </li>
                                <li data-options="iconCls:‘icon-group_edit‘">
                                    <span>test3</span>
                                </li>
                            </ul>
                        </li>
                        <li data-options="state:‘closed‘,iconCls:‘icon-joystick‘">
                            <span>系统设置</span>
                            <ul>
                                <li data-options="iconCls:‘icon-joystick_add‘">
                                    <span>test4</span>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            <div title="系统设置2" style="padding: 10px;">
                content2
            </div>
            <div title="系统设置3" style="padding: 10px">
                content3
            </div>
        </div>
    </div>

    <div data-options="region:‘center‘">
      <div id="tabs" class="easyui-tabs" data-options="tools:‘#tab-tools‘">
            <div title="主页" data-options="iconCls:‘icon-house‘" style="padding: 10px; height: 100%;">主页</div>
        </div>

        <iframe style="width:inherit" src="showdialog.aspx"></iframe>

        <div id="tab-tools">
            <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:‘icon-add‘" onclick="addPanel()"></a>
            <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:‘icon-remove‘" onclick="removePanel()"></a>
       </div>

    <div style="margin: 10px 0;"></div>
    <div style="padding: 10px 0 10px 60px">
        <form id="ff" method="post">
            <table>
                <tr>
                    <td>名称:</td>
                    <td>
                        <input class="easyui-validatebox" type="text" name="name" data-options="required:true"></input></td>
                </tr>
                <tr>
                    <td>邮箱:</td>
                    <td>
                        <input class="easyui-validatebox" type="text" name="email" data-options="required:true,validType:‘email‘"></input></td>
                </tr>
                <tr>
                    <td>标题:</td>
                    <td>
                        <input class="easyui-validatebox" type="text" name="subject" data-options="required:true"></input></td>
                </tr>
                <tr>
                    <td>内容:</td>
                    <td>
                        <textarea name="message" style="height: 60px;"></textarea></td>
                </tr>
                <tr>
                    <td>语言:</td>
                    <td>
                        <select class="easyui-combobox" name="language">
                            <option value="ar">Arabic</option>
                            <option value="bg">Bulgarian</option>
                            <option value="ca">Catalan</option>
                            <option value="zh-cht">Chinese</option>
                            <option value="cs">Czech</option>
                            <option value="da">Danish</option>
                            <option value="nl">Dutch</option>
                            <option value="en" selected="selected">English</option>
                            <option value="et">Estonian</option>
                            <option value="fi">Finnish</option>
                            <option value="fr">French</option>
                            <option value="de">German</option>
                            <option value="el">Greek</option>
                            <option value="ht">Haitian Creole</option>
                            <option value="he">Hebrew</option>
                            <option value="hi">Hindi</option>
                            <option value="mww">Hmong Daw</option>
                            <option value="hu">Hungarian</option>
                            <option value="id">Indonesian</option>
                            <option value="it">Italian</option>
                            <option value="ja">Japanese</option>
                            <option value="ko">Korean</option>
                            <option value="lv">Latvian</option>
                            <option value="lt">Lithuanian</option>
                            <option value="no">Norwegian</option>
                            <option value="fa">Persian</option>
                            <option value="pl">Polish</option>
                        </select>
                    </td>
                </tr>
            </table>
        </form>
    </div>
    <div style="padding: 5px; margin-left: 100px;">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">提交</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">清除</a>
    </div>
    <div id="dlg" class="easyui-dialog" title="提示..." style="width: 250px; height: 120px; padding: 10px"
        data-options="
                iconCls: ‘icon-save‘,
                buttons: [{
                    text:‘Ok‘,
                    iconCls:‘icon-ok‘,
                    handler:function(){
                        alert(‘ok‘);
                    }
                },{
                    text:‘Cancel‘,
                    handler:function(){
                        alert(‘cancel‘);;
                    }
                }]
            ">
        确认提交吗？
    </div>

    </div>

    <div id="mm" class="easyui-menu" style="width: 150px;">
        <div id="refresh" data-options="iconCls:‘icon-arrow_refresh‘">刷新</div>
        <div class="menu-sep"></div>
        <div id="close">关闭</div>
        <div id="closeall">全部关闭</div>
        <div id="closeother">除此之外全部关闭</div>
        <div class="menu-sep"></div>
        <div id="closeright">当前页右侧全部关闭</div>
        <div id="closeleft">当前页左侧全部关闭</div>
        <div class="menu-sep"></div>
        <div id="exit">退出</div>
    </div>

      <script type="text/javascript">
        var index = 0;
        function addPanel() {
            index++;
            $(‘#tabs‘).tabs(‘add‘, {
                title: ‘Tab‘ + index,
                content: ‘<div style="padding:10px">Content‘ + index + ‘</div>‘,
                closable: true
            });
        }
        function removePanel() {
            var tab = $(‘#tabs‘).tabs(‘getSelected‘);
            if (tab) {
                var index = $(‘#tabs‘).tabs(‘getTabIndex‘, tab);
                $(‘#tabs‘).tabs(‘close‘, index);
            }
        }

        var onlyOpenTitle = "主页";//不允许关闭的标签的标题
        $(function () {
            tabClose();
            tabCloseEven();
        })

        function tabClose() {
            /*双击关闭TAB选项卡*/
            $(".tabs-inner").dblclick(function () {
                var subtitle = $(this).children(".tabs-closable").text();
                $(‘#tabs‘).tabs(‘close‘, subtitle);
            })
            /*为选项卡绑定右键*/
            $(".tabs-inner").bind(‘contextmenu‘, function (e) {
                $(‘#mm‘).menu(‘show‘, {
                    left: e.pageX,
                    top: e.pageY
                });
                var subtitle = $(this).children(".tabs-closable").text();
                $(‘#mm‘).data("currtab", subtitle);
                $(‘#tabs‘).tabs(‘select‘, subtitle);
                return false;
            });
        }
        //绑定右键菜单事件
        function tabCloseEven() {
            $(‘#mm‘).menu({
                onClick: function (item) {
                    closeTab(item.id);
                }
            });
            return false;
        }

        //创建/移除tab
        var index = 0;
        function addTab(subtitle, url, icon) {
            index++;
            if (!$(‘#tabs‘).tabs(‘exists‘, subtitle)) {
                $(‘#tabs‘).tabs(‘add‘, {
                    title: ‘Tab‘ + index,
                    content: createFrame(‘http://www.baidu.com/‘),
                    closable: true,
                    icon: ‘‘
                });
            } else {
                $(‘#tabs‘).tabs(‘select‘, subtitle);
                $(‘#mm-tabupdate‘).click();
            }
            tabClose();
        }
        function removeTab() {
            var tab = $(‘#tabs‘).tabs(‘getSelected‘);
            if (tab) {
                var index = $(‘#tabs‘).tabs(‘getTabIndex‘, tab);
                $(‘#tabs‘).tabs(‘close‘, index);
            }
        }
        //创建Frame
        function createFrame(url) {
            var s = ‘<iframe scrolling="auto" frameborder="0"  src="‘ + url + ‘" style="width:100%;height:100%;"></iframe>‘;
            return s;
        }

        //关闭tab
        function closeTab(action) {
            var alltabs = $(‘#tabs‘).tabs(‘tabs‘);
            var currentTab = $(‘#tabs‘).tabs(‘getSelected‘);
            var allTabtitle = [];
            $.each(alltabs, function (i, n) {
                allTabtitle.push($(n).panel(‘options‘).title);
            })
            switch (action) {
                case "refresh":
                    var iframe = $(currentTab.panel(‘options‘).content);
                    var src = iframe.attr(‘src‘);
                    $(‘#tabs‘).tabs(‘update‘, {
                        tab: currentTab,
                        options: {
                            content: createFrame(src)
                        }
                    })
                    break;
                case "close":
                    var currtab_title = currentTab.panel(‘options‘).title;
                    $(‘#tabs‘).tabs(‘close‘, currtab_title);
                    break;
                case "closeall":
                    $.each(allTabtitle, function (i, n) {
                        if (n != onlyOpenTitle) {
                            $(‘#tabs‘).tabs(‘close‘, n);
                        }
                    });
                    break;
                case "closeother":
                    var currtab_title = currentTab.panel(‘options‘).title;
                    $.each(allTabtitle, function (i, n) {
                        if (n != currtab_title && n != onlyOpenTitle) {
                            $(‘#tabs‘).tabs(‘close‘, n);
                        }
                    });
                    break;
                case "closeright":
                    var tabIndex = $(‘#tabs‘).tabs(‘getTabIndex‘, currentTab);

                    if (tabIndex == alltabs.length - 1) {
                        alert(‘亲，后边没有啦 ^@^!!‘);
                        return false;
                    }
                    $.each(allTabtitle, function (i, n) {
                        if (i > tabIndex) {
                            if (n != onlyOpenTitle) {
                                $(‘#tabs‘).tabs(‘close‘, n);
                            }
                        }
                    });
                    break;
                case "closeleft":
                    var tabIndex = $(‘#tabs‘).tabs(‘getTabIndex‘, currentTab);
                    if (tabIndex == 1) {
                        alert(‘亲，前边那个上头有人，咱惹不起哦。 ^@^!!‘);
                        return false;
                    }
                    $.each(allTabtitle, function (i, n) {
                        if (i < tabIndex) {
                            if (n != onlyOpenTitle) {
                                $(‘#tabs‘).tabs(‘close‘, n);
                            }
                        }
                    });
                    break;
                case "exit":
                    $(‘#closeMenu‘).menu(‘hide‘);
                    break;
            }
        }
    </script>

      <script>
        $(function () {
            $(‘#dlg‘).dialog(‘close‘)
        })
        function submitForm() {
            $(‘#dlg‘).dialog(‘open‘)
            //$(‘#ff‘).form(‘submit‘);
        }
        function clearForm() {
            $(‘#ff‘).form(‘clear‘);
        }
    </script>
</body>
</html>

效果图：

时间： 2024-10-06 12:51:37

EasyUI 主布局整合。的相关文章

获取联系人【自己定义布局文件与主布局文件相连，数据库内容查找并显示】

一.自己定义布局文件list_item_users.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_

【开源】OSharp框架解说系列（2.2）：EasyUI复杂布局及数据操作

一.目录 一.目录 二.EasyUI复杂布局 三.EasyUI动态工具栏 四.EasyUI增删改操作 五.开源说明 系列导航 二.EasyUI复杂布局 接上篇,前面我们已经定义了一个 datagrid父视图 _DataGridLayout.cshtml,实现一个表格是相当的容易.但是,实际业务中,并非所有的数据列表并非只是单一的datagrid列表,还可能需要把datagrid与其他组件配合使用,比如角色信息是来源于各个组织机构的,就需要增加一个组织机构的分类,来更好的管理各种角色.最终效果图如

【EasyUI】——EasyUI的布局

做一个站点首先要有站点的布局,所谓的布局事实上就是网页的排版.就是说你的网页显示时是什么样子的. 就比方百度的首页: 无论是谁登录.网页都是这个样式的. EasyUI中的网页布局一共分为五部分,分别为东.西.南,北,中.在设计自己的网页布局时,中间部分是必需要有的.其余四部分能够不用.由于其余四部分的位置是依据中间部分位置来计算的.EasyUI的布局样式有非常多.能够选择自己合适的布局使用,另外能够设置布局中的一些属性值.来使布局更适合自己的网页. 分类 1.基本布局 watermark/2/t

ASP.NET MVC+EasyUI+Entity FrameWork 整合开发

本文详细讲解怎么用ASP.NET MVC+EasyUI+Entity FrameWork 来开发一个项目 对于ASP.NET MVC的Jscript库,主要引用 <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.7.2.min.js")"></script> <script src="@Url.Content("

jquery+easyui主界面布局一例

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="workbench.aspx.cs" Inherits="WebApp.workbench" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <me

CRM -EasyUI 主界面设计

<!DOCTYPE html> <html> <head>     <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">     <link rel="stylesheet" type="text/css"

easyui的datagrid整合struts2，以及Ajax,实现局部刷新功能，并设置分页的实现---------投票案例

========================================================================================================= 1.登陆功能- ----表单内容----------------------------------------------------- <pre name="code" class="java"><div class="log

easyui layout 布局title

<script> function aclick(){ $("a").click(function () { var name=this.innerHTML; $($("#mainFrm").prev()[0]).html(name); //$("#mainFrm") }); } </script> <!--主窗体--> <div id="mainFrm" data-options=&

EasyUI - Layout 布局控件

效果: Html代码: <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> <di