oa_mvc_easyui_后台布局(3)

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="150px; padding:2px;">
        <div class="easyui-accordion" style="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="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="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>

View Code

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>