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. Linux TCP自连接问题

    [参考文章]:net.ipv4.ip_local_port_range 的值究竟影响了啥 [参考文章]:Linux内核参数优化 最近卸载MySQL服务偶尔会遇到MySQL端口自连接问题.导致MySQL ...

  2. 【Blog怎么玩】什么叫EntryName友好地址名？

    EntryName友好地址名 其实就是你这个页面的别名,如果设置的好的话,在SEO搜索中,会更清晰的显示出来. 好处1:清晰的URL 比如我有一篇展示可爱兔子的博文,我想让它的网址清晰的显示出来,而不 ...

  3. 前端单点登录（SSO）实现方法（二级域名与主域名）

    1.单点登录介绍 单点登录 SSO 全称 Singn Sign On .SSO 是指在多个应用系统中,用户只需要登录一次用户系统,就可以访问其他互相信任的应用系统.例如:在网易官网登录账户,那么再进入 ...

  4. 前世今生：Hive、Shark、spark SQL

    Hive (http://en.wikipedia.org/wiki/Apache_Hive )(非严格的原文顺序翻译)  Apache Hive是一个构建在Hadoop上的数据仓库框架,它提供数据的 ...

  5. springboot三种配置文件上传下载大小的配置

    配置文件为application.yml格式: spring: http: multipart: enabled: true max-file-size: 30MB max-request-size: ...

  6. LC 966. Vowel Spellchecker

    Given a wordlist, we want to implement a spellchecker that converts a query word into a correct word ...

  7. 求一个整型数字中有没有相同的部分，例如12386123这个整型数字中相同的部分是123，相同的部分至少应该是2位数，如果有相同部分返回1，如果没有则返回0。方法是先将整型数字转换到数组中，再判断。函数为 int same（int num）其中num是输入的整型数字

    import java.util.ArrayList; import java.util.List; import java.util.Scanner; public class Test { pub ...

  8. alt + tab 替代品 switcheroo

    作为windows10 alt+tab的增强品: 分享下: 原版: https://github.com/elig0n/Switcheroo 单击版本 https://github.com/elig0 ...

  9. 七十三：flask信号之信号机制和使用场景

    若安装flask是未默认安装blinker,则pip install blinker 使用信号分为3步,第一是定义一个信号,第二是监听一个信号,第三是发送一个信号 1.定义信号:定义信号需要使用到bl ...

  10. linux常用、常见错误

    1.md5加密使用 oppnssl md5 加密字符串的方法 [root@lab3 ~]# openssl //在终端中输入openssl后回车. OpenSSL> md5 //输入md5后回车 ...