oa_mvc_easyui_後臺布局(3)
阿新 • • 發佈：2017-05-26
his 事件 arch overflow efault tex href ast 主頁 
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"> @*頂部*@ <divView Codedata-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)