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. 2018-2019-2 20165205 网络对抗技术 Exp9 Web安全基础

    2018-2019-2 20165205 网络对抗技术 Exp9 Web安全基础 1.基础问题 SQL注入攻击原理,如何防御 原理: SQL注入指攻击者在提交查询请求时将SQL语句插入到请求内容中,同 ...

  2. drawable SVG 使用

    Android会使用一些规则来去帮我们匹配最适合的图片.什么叫最适合的图片?比如我的手机屏幕密度是xxhdpi,那么drawable-xxhdpi文件夹下的图片就是最适合的图片.因此,当我引用andr ...

  3. ccf 201612-3 权限查询

     ccf 201612-3 权限查询 解题思路: 建立一个二维矩阵存储权限和角色 还差30分emmm #include<iostream> #include<cstring> ...

  4. GitHub：Tencent

    ylbtech-GitHub:Tencent 1.返回顶部 1. https://opensource.tencent.com/ 2. 2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶 ...

  5. JavaScript日常学习3

    JavaScript函数  函数就是包裹在花括号中的代码块,前面使用了关键词 function: function functionname()     {执行代码} function myFunct ...

  6. 七十一：flask钩子函数之关于context_processor的钩子函数

    context_processor:使用这个钩子函数,必须返回一个字典,这个字典的值在所有模板中都可以使用,这个钩子函数作用是,如果一些在很多模板中都要用到的变量,那么就可以使用此钩子函数来返回,而不 ...

  7. ESP32开发之Windows开发环境

    电脑出了问题linux系统下的环境不知道怎么就挂了,在一次搭建,总是出错,没办法,只能在win10下一试. 1 下载交叉编译工具,最新版 找到并下载最新的工具链: https://dl.espress ...

  8. 4、kubernetes应用入门

    本随笔接前两两章,建立离master主节点和node01.node02.node03三个节点 kubectl子命令 master ~]# kubectl kubectl controls the Ku ...

  9. springboot整合mybatis时java.sql.SQLException: The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized or represents more than one time zone.

    时区问题造成的,解决方法是在数据源配置文件中在数据库链接处增加参数&serverTimezone=GMT%2B8对时区进行配置,配置为东八区. 修改前:spring.datasource.ur ...

  10. Vue中的slot

    个人理解:是对组件的扩展,通过slot插槽向组件内部指定位置传递内容,通过slot可以父子传参: Slot的通俗理解 是“占坑”,在组件模板中占好了位置,当使用该组件标签时候,组件标签里面的内容就会自 ...