首页 > 代码库 > 页面布局
页面布局
采用jquery-easyui布局传统结构，将themes加入项目
@{ Layout = null;}<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width" /> <title>OA传统布局</title> <link href="~/Content/themes/default/easyui.css" rel="stylesheet" /> <link href="~/Content/themes/icon.css" rel="stylesheet" /> <script src="~/Scripts/jquery-1.10.2.min.js"></script> <script src="~/Scripts/jquery.easyui.min.js"></script> <script src="~/Scripts/easyui-lang-zh_CN.js"></script> <style type="text/css"> .txt { font-size:20px; color:blue; font-weight:bolder; float:left; margin-left:30px; margin-top:15px; } .txt1 { font-size:14px; float:right; margin-top:15px; margin-right:20px; } </style> <script type="text/javascript"> $(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: createContetn(url), closable: true }); }); } function createContetn(url) { var str = ‘<iframe src="http://www.mamicode.com/‘+url+‘" scrolling="no" frameborder="0" width="100%" height="100%"></iframe>‘; return str; } </script></head><body class="easyui-layout"> <!---------顶部布局---------------> <div data-options="region:‘north‘,border:false" style="height:73px;background:#B3DFDA;padding:10px; overflow:hidden;background-image:url(‘/Content/Images/bg3.png‘)"> <img src="/Content/Images/logo.gif" style="float:left" /> <span class="txt">传智播客OA系统</span> <span class="txt1">欢迎 @ViewData["userName"] 登录</span> </div> <!---------顶部布局---------------> <!--------------左侧布局--------------------> <div data-options="region:‘west‘,split:true,title:‘West‘" style="width:150px;padding:3px;"> <div class="easyui-accordion" style="width:auto;height:auto;"> <div title="用户管理" data-options="iconCls:‘icon-ok‘" style="overflow:auto;padding:5px;"> <a href="javascript:void(0)" class="detailLink123" url="/UserInfo/Index">用户管理</a> </div> <div title="角色管理" data-options="iconCls:‘icon-help‘" style="padding:5px;"> <a href="javascript:void(0)" class="detailLink123" url="/RoleInfo/Index">角色管理</a> </div> </div> </div> <!------------------左侧布局结束-----------------------> <div data-options="region:‘south‘,border:false" style="height:20px;background:#A9FACD;padding:5px; overflow:hidden; text-align:center">版权©itcast.cn</div> <!--------------中间布局--------------------> <div data-options="region:‘center‘,title:‘Center‘"> <div class="easyui-tabs" style="width:700px;height:250px" fit="true" id="tt"> <div title="用户管理" style="padding:10px"> <iframe src="/UserInfo/Index" scrolling="no" frameborder="0" width="100%" height="100%"></iframe> </div> <div title="My Documents" style="padding:10px"> <ul class="easyui-tree" data-options="url:‘tree_data1.json‘,method:‘get‘,animate:true"></ul> </div> <div title="Help" data-options="iconCls:‘icon-help‘,closable:true" style="padding:10px"> This is the help content. </div> </div> </div> <!--------------中间结束--------------------></body></html>
采用ligerui布局WEBQQ模式布局,将lib文件夹加入项目（采用ligerui布局、WEBQQ）结合布局系统
@{ Layout = null;}<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width" /> <title>OA管理系统</title> <link href="~/Content/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" /> <link href="~/Content/lib/ligerUI/skins/ligerui-icons.css" rel="stylesheet" /> <script src="~/Scripts/jquery-1.10.2.min.js"></script> <script src="~/Content/lib/ligerUI/js/ligerui.min.js"></script> <script type="text/javascript"> $(function () { $("#layout1").ligerLayout({ allowTopResize: false, topHeight:65 }); }); </script> <style type="text/css"> .l-case-title { font-weight: bold; margin-top: 20px; margin-bottom: 20px; } body, html { width: 100%; height: 100%; } * { margin: 0; padding: 0; } #winlinks { position: absolute; left: 20px; top: 20px; width: 100%; } #winlinks ul { position: relative; } #winlinks li { width: 70px; cursor: pointer; height: 80px; position: absolute; z-index: 101; list-style: none; text-align: center; } #winlinks li img { width: 36px; height: 36px; } #winlinks li span { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.3); border-radius: 10px 10px 10px 10px; display: block; font-size: 12px; margin-top: 1px; color: White; line-height: 18px; text-align: center; } #winlinks li.l-over div.bg { display: block; } #winlinks li div.bg { display: none; position: absolute; top: -2px; left: -2px; z-index: 0; width: 75px; height: 64px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #000; opacity: 0.1; filter: alpha(opacity=10); } .l-taskbar-task-icon { top: 3px; left: 6px; background-image: none; } .l-taskbar-task-content { margin-left: 30px; } .l-taskbar-task-icon img { width: 22px; height: 22px; } .txt { font-size: 20px; color: blue; font-weight: bolder; float: left; margin-top: 15px; margin-left: 30px; } .l-dialog-content { overflow-y: hidden; } </style></head><body style="overflow: hidden; background: url(/Content/lib/images/applebg.jpg) no-repeat center center;"> <div id="layout1"> <div position="center" title="标题" style="background: url(/Content/lib/images/applebg.jpg) no-repeat center center;"> <div id="winlinks"> <ul></ul> </div> </div> <div position="top" style="background-image:url(‘/Content/images/bg3.png‘)"> <img src="/Content/Images/logo.gif" style="float:left" /> <span class="txt">传智播客OA系统</span> <span style="float:right;font-size:14px;margin-top:15px;margin-right:20px">欢迎 @ViewData["userName"] 登录 <a href="/Login/Logout">退出</a></span> </div> </div></body><script type="text/javascript"> var LINKWIDTH = 90, LINKHEIGHT = 90, TASKBARHEIGHT = 43; var winlinksul = $("#winlinks ul"); function f_open(url, title, icon) { var win = $.ligerDialog.open( { height: 650, url: url, width: 750, showMax: true, showToggle: true, showMin: true, isResize: true, modal: false, title: title, slide: false, buttons: [ { text: ‘确定‘, onclick: function (item, Dialog, index) { win.hide(); } } ] }); var task = jQuery.ligerui.win.tasks[win.id]; if (task) { $(".l-taskbar-task-icon:first", task).html(‘<img src="http://www.mamicode.com/‘ + icon + ‘" />‘); } return win; } var links = [ //{ icon: ‘/Content/lib/images/3DSMAX.png‘, title: ‘用户管理‘, url: ‘/UserInfo/Index‘ }, //{ icon: ‘/Content/lib/images/3DSMAX.png‘, title: ‘角色管理‘, url: ‘/RoleInfo/Index‘ }, //{ icon: ‘/Content/lib/images/3DSMAX.png‘, title: ‘权限管理‘, url: ‘/ActionInfo/Index‘ }, //{ icon: ‘images/Program Files Folder.png‘, title: ‘固定列‘, url: ‘../grid/frozen/frozengrid.htm‘ }, //{ icon: ‘images/Program Files Folder.png‘, title: ‘可拖动‘, url: ‘../base/drag.htm‘ }, //{ icon: ‘images/Alien Folder.png‘, title: ‘树‘, url: ‘../tree/draggable.htm‘ }, //{ icon: ‘images/Xp-G5 006.png‘, title: ‘下拉框‘, url: ‘../comboBox/comboBoxGrid.htm‘ }, //{ icon: ‘images/Xp-G5 006.png‘, title: ‘下拉框‘, url: ‘../comboBox/comboBoxGrid.htm‘ }, //{ icon: ‘images/Alien Folder.png‘, title: ‘layout‘, url: ‘../layout/layoutFullHeight.htm‘ }, // { icon: ‘images/Alien Folder.png‘, title: ‘menu‘, url: ‘../menu/menubar.htm‘ }, // { icon: ‘images/Xp-G5 006.png‘, title: ‘tab‘, url: ‘../tab/tabHtml.htm‘ }, // { icon: ‘images/3DSMAX.png‘, title: ‘分组‘, url: ‘../grid/groupable/checkbox.htm‘ } ]; function onResize() { var linksHeight = $(window).height() - TASKBARHEIGHT-70; var winlinks = $("#winlinks"); winlinks.height(linksHeight); var colMaxNumber = parseInt(linksHeight / LINKHEIGHT);//一列最多显示几个快捷方式 for (var i = 0, l = links.length; i < l; i++) { var link = links[i]; var jlink = $("li[linkindex=" + i + "]", winlinks); var top = (i % colMaxNumber) * LINKHEIGHT, left = parseInt(i / colMaxNumber) * LINKWIDTH; if (isNaN(top) || isNaN(left)) continue; jlink.css({ top: top, left: left }); } } function linksInit() { for (var i = 0, l = links.length; i < l; i++) { var link = links[i]; var jlink; var jlink = $("<li></li>"); jlink.attr("linkindex", i); jlink.append("<img src=http://www.mamicode.com/‘" + link.icon + "‘ />"); jlink.append("<span>" + link.title + "</span>"); jlink.append("<div class=‘bg‘></div>"); jlink.hover(function () { $(this).addClass("l-over"); }, function () { $(this).removeClass("l-over"); }).click(function () { var linkindex = $(this).attr("linkindex"); var link = links[linkindex]; f_open(link.url, link.title, link.icon); }); jlink.appendTo(winlinksul); } } $(window).resize(onResize); $.ligerui.win.removeTaskbar = function () { }; //不允许移除 $.ligerui.win.createTaskbar(); //页面加载时创建任务栏 //校验登录用户的菜单权限 $.getJSON("/Home/GetMenus", {}, function (data) { links = data; linksInit(); onResize(); });</script></html>
页面布局
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。