1.新建HomeController控制器,并创建视图，后台的主页

2.easyUI的引用：

<link href="~/Content/default/easyui.css" rel="stylesheet" /> <!--easyui样式-->

    <link href="~/Content/icon.css" rel="stylesheet" /> <!--easyui样式-->

    <script src="~/Scripts/jquery-1.8.2.min.js"></script> <!--jquery引用文件-->

    <script src="~/Scripts/jquery.easyui.min.js"></script> <!--引用easyui文件-->

    <script src="~/Scripts/easyui-lang-zh_CN.js"></script> <!--easyui语言包-->

3.后台布局

easyui--layout，中间部分采用tabs页签，里面的采用iframe框架

<body class="easyui-layout">

    @*顶部*@

    <div data-options="region:'north',border:false" style="height:80px;background:#B3DFDA;padding:10px">north region</div>

    @*左边*@

    <div data-options="region:'west',split:true,title:'导航菜单'" style="width:150px; padding:2px;">

        <div class="easyui-accordion" style="width:auto;height:100%;">

            <div title="About" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">

                <a class="detailLink123" href="javascript:void(0)" url="/AdminNewInfo/Index"><h3>test1</h3></a>

                <a class="detailLink123" href="javascript:void(0)" url="/AdminNewInfo/Index"><h3>test2</h3></a>

                <a class="detailLink123" href="javascript:void(0)" url="/AdminNewInfo/Index"><h3>test3</h3></a>

            </div>

            <div title="Help" data-options="iconCls:'icon-help'" style="padding:10px;">

            </div>

            <div title="TreeMenu" data-options="iconCls:'icon-search'" style="padding:10px;">

            </div>

        </div>

    </div>

    @*右边*@

    <div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>

    @*底部*@

    <div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>

    @*中间*@

    <div data-options="region:'center'">

        <div id="tt" class="easyui-tabs" style="width:100%;height:100%" fit="true">

            <div title="首页" style="padding:10px">

                <iframe src="/AdminNewInfo/Index" scrolling="no" frameborder="0" width="100%" height="100%"></iframe>

            </div>

        </div>

    </div>

</body>

4.tabs标签中的:exists,select,add方法，用于页签功能的编写

<script>

        $(function () {

            bindEvent();

        })

        //绑定事件

        function bindEvent() {

            $(".detailLink123").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: createContent(url),

                    closable: true

                });

            });

        }

        function createContent(url) {

            var strHtml = '<iframe src="' + url + '" scrolling="no" frameborder="0" width="100%" height="100%"></iframe>';

            return strHtml;

        }

    </script>

oa_mvc_easyui_后台布局(3)的更多相关文章

  1. 2、rbac组件 后台布局模板，权限按钮，菜单，可拔插，路径重定向

    1.后台布局管理 https://www.cnblogs.com/venicid/p/7772742.html#_label0 1.通用模板 overflow: auto; //在a和b模板中进行切换 ...

  2. HTML meta 文本 格式排版 链接图表 列表 表单 frame后台布局实例

    meta标签 content属性必须和http-equiv或者name属性一起使用 http-equiv属性,就是http当量,用于和服务器发送数据前的提交交互使用.(另层含义这个当量在浏览器和服务器 ...

  3. 使用absolute实现的后台布局，包括小图标定位，菜单弹出等完整版

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 前端武器库系列之html后台管理页面布局

    设计网页,让网页好看:网上找模板 搜 HTML模板 BootStrap 一.页面布局之主站页面 主站布局一般不占满页面,分为菜单栏.主页面.底部 上中下三部分.伪代码如下: <div class ...

  5. HTML后台管理页面布局

    设计网页,让网页好看:网上找模板 搜 HTML模板 BootStrap 一.内容回顾: HTML 一大堆的标签:块级.行内 CSS position background text-align mar ...

  6. Vue + Element-ui实现后台管理系统(2)---项目搭建 + ⾸⻚布局实现

    项目搭建 + ⾸⻚布局实现 上篇对该项目做了个总述 :Vue + Element-ui实现后台管理系统(1) --- 总述 这篇主要讲解 项目搭建 + 后台⾸⻚布局实现 : 整体效果 后台首页按布局一 ...

  7. 从零开始，搭建博客系统MVC5+EF6搭建框架（4）下，前后台布局实现、发布博客以及展示。

    一.博客系统进度回顾 目前已经完成了,前台展示,以及后台发布的功能,最近都在做这个,其实我在国庆的时候就可以弄完的,但是每天自己弄,突然最后国庆2天,连电脑都不想碰,所以就一直拖着,上一篇写了前端实现 ...

  8. CSS补充之--页面布局、js补充，dom补充

    CSS补充之--页面布局 主站一:(下面是一个大致的模板) <div class="pg-header"> <div style="width: 120 ...

  9. css 关于两栏布局，左边固定，右边自适应

    好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...

随机推荐

  1. 08.青蛙跳台阶 Java

    题目描述 一只青蛙一次可以跳上1级台阶,也可以跳上2级.求该青蛙跳上一个n级的台阶总共有多少种跳法(先后次序不同算不同的结果). 思路 暴力枚举(自顶向下递归): 若台阶数小于等于0,返回0: 若台阶 ...

  2. Java——重写hashCode()和euqals()方法

    1.顺序表的问题 查找和去重效率较低 对于这样的顺序表来说,如果需要查找元素,就需要从第一个元素逐个检查,进行查找.对于需要去重的存储来说,每次存入一个元素之前,就得将列表中的每个元素都比对一遍,效率 ...

  3. 显示Pl/Sql Developer window list窗口

    默认情况下Window List窗口是不显示的,这十分不方便 (一)在菜单项的Tools下的Preference选项中的UserInterface中选择Option,在右边对于的Autosave de ...

  4. openerp学习笔记 对象调用(创建、修改)，用于后台代码创建和更新对象

    #服务卡创建,自动更新服务卡为开卡状态    def create(self, cr, uid, values, context=None):        values['state'] = '1' ...

  5. Struts2类数据封装

  6. linux 执行：pip3 install -r requirements.txt 报错

    错误内容: 解决办法:

  7. Linux Shell 中 > 和 >> 的异同点和应用场景

    Linux Shell 中 > 和 >> 的异同点和应用场景 > 和 >> 的异同点 举例说明(start.sh 为某个服务的启动脚本,start.log 为某服务 ...

  8. C# Await

    每次提到异步我都选择绕开,感觉深不可测,最近打算看看异步,但又不愿意看书,网上找了几个视频看,发现传智播客的老师讲异步都不是很深入,关键的问题一笔带过,倒是把我弄糊涂了,印象最深刻的是那个老师说的一句 ...

  9. Class文件内容解析

    一.概述 任何一个Class文件都对应唯一一个类或接口的定义信息,但是不是所有的类或接口都得定义在文件中(它们也可以通过类加载器直接生成). Class文件是一组以8位字节为基础单位的二进制流,各个数 ...

  10. flannel下k8s pod及容器无法跨主机互通问题

    参照文档    https://blog.csdn.net/a610786189/article/details/80340556 https://blog.csdn.net/weixin_43092 ...