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. pytype

    与mypy相比不仅可以显示错误行数,还可以看到哪个函数错误. mypy的图 pytype的图

  2. dom4j读写XML文档

    dom4j 最常用最简单的用法(转) 要使用dom4j读写XML文档,需要先下载dom4j包,dom4j官方网站在 http://www.dom4j.org/目前最新dom4j包下载地址:http:/ ...

  3. linux 下载jdk

    1.官方下载jdk的地方 jdk8下载地址:https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-213315 ...

  4. Spring Boot 线程池的使用和扩展 - 转载

    转载:http://blog.csdn.net/boling_cavalry/article/details/79120268 1.实战环境 windowns10: jdk1.8: springboo ...

  5. python 面对对象 类(继承, 多态)

    继承,继承其它实例化样本的属性和方法,需要在声明里重新定义和使用 class School(object): def __init__(self, name, addr): self.name = n ...

  6. JS判定数据类型

    1.typeof                我们能够使用typeof判断变量的身份,判断字符串得到string,数字和NaN得到number,函数会得到function等,但是判断数组,对象和nu ...

  7. 原来项目更换svn地址

    近期公司由于旧地址装修,临时更换办公地址:同时相应的网络地址也更换了.我们开发项目的svn地址根目录也得改变.所以怎么解决呢? 1.找到项目根文件夹: 右键:

  8. kettle的数据库配置的表分析

    以下场景,用mysql来举例说明.本文是在初步了解了kettle的数据库配置之后,做的总结和分析.将kettle中的配置用数据库管理的时候,在创建了一个新的数据库,还没有做任何kettle中的job和 ...

  9. js 中文字符串转base64

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. 有关命令行的vue操作

    1.安装node.js ,通过node -v  和  npm -v  来查看node 和 npm 版本. 2. 安装bower,bower 可以说是(前端)包管理器 npm install bower ...