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. Rust格式化输出

    打印操作由 https://doc.rust-lang.org/std/fmt/ 里面所定义的一系列宏来处理,包括: format!:将格式化文本写到字符串(String).(译注:字符串是返 回值不 ...

  2. 伪分布式下Hadoop3.2版本打不开localhost:50070，可以打开localhost:8088

    一.问题描述 伪分布式下Hadoop3.2版本打不开localhost:50070,可以打开localhost:8088 二.解决办法 Hadoop3.2版本namenode的默认端口配置已经更改为9 ...

  3. [SQL Server创建视图时的注意点]

    创建视图的查询语句必须要遵守一定的限制 1. 要对某些列取别名,并保证列名的唯一 (具有相同的列名的表,在创建视图的时候,需要使用别名,表名.列名 也是不可以的) 当我们在通过新建视图来创建视图的话, ...

  4. HttpServletRequest中getRemoteUser和getUserPrincipal方法

    HttpServletRequest是一个接口类,继承自ServletRequest,并且又新增了许多抽象方法,getRemoteUser()方法和getUserPrincipal()方法就在其中.许 ...

  5. Linux内存简单汇总

    Linux内存主要用来存储系统和应用程序的指令,数据,缓存等 一,内存映射 1,内核给每个进程提供一个独立的虚拟机地址空间,并且这个地址空间是连续的 2,虚拟地址空间内部又被分为内核空间和用户空间 3 ...

  6. ansible报错处理

    [root@localhost ~]# ansible testhosts -m command -a 'rm -rf /tmp/haha' [WARNING]: Consider using the ...

  7. Sublime Text3学习参考集

    1.如何优雅地使用Sublime Text: http://jeffjade.com/2015/12/15/2015-04-17-toss-sublime-text/#three 持续更新中..... ...

  8. Invalid Django TIME_ZONE

    在linux操作系统运行,设置的时区在系统文件/usr/share/zoneinfo/中找不到会出现以下错误 raceback (most recent call last): File , in & ...

  9. vue项目中使用组件化开发

    最近在使用vue-cli结合webpack打包工具开发一个后台管理系统,使用vue难免需要运用组件化思想,而这也正是vue的一大特点. 在之前做的vue项目中,稍微有一点组件化的思想,可能是对组件化不 ...

  10. 关于torchvision.datasets.CIFAR10

    在Pytorch0.4版本的DARTS代码里,有一行代码是 trn_data = datasets.CIFAR10(root=data_path, train=True, download=False ...