構建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的後臺管理系統（2）-easyui構建前端頁面框架[附源碼]
開始，咱們有了一系列的解決方案，咱們將動手搭建新系統吧。javascript
用戶的體驗已經須要愈來愈注重，此次咱們是左右分欄，左邊是系統菜單，右邊是一個以tabs頁組成的頁面集合，每個tab均可以單獨刷新和關閉，由於他們會是一個iframephp
工欲善其事必先利其器。須要用到如下工具。css
Visual Studio 2012html
您能夠安裝MVC4 for vs2010用VS2010來開發，可是貌似你將不能使用EF5.0將會是EF4.4版本，但這沒有多大的關係。java
MVC4將掛載在.NET Framework4.5上。jquery
好！web
打開咱們熟悉的VS建立一個空解決方案。我起了個名字叫AppSolution，類庫命名空間將與App開頭，如App.BLL,App.Web等命名，喜歡酷一點的朋友你能夠用的名字來命名express
如Joy.BLL,Jason.BLL,zhangsan.BLL，隨便你。直接是BLL也能夠json
咱們將建立項目mvc
1. MVC4.0的App.Admin 網站 Internet選項，選擇Razor視圖
先下載Easyui1.3.2
最高版本是1.3.4咱們選擇1.3.2是由於1.3.2以上的是jquery 2.0
jquery2.0將不支持IE8.假如你已經拋棄IE8，那您能夠體驗更高的版本和更小更快的js庫。（官方他是這樣說的）
刪掉沒必要要的東西，由於有些東西咱們要了，有些保留，複製easyui到相應目錄下，我喜歡把腳本和樣式分開放。
- 1.把jquery.easyui.min.js放到scripts目錄下
- 2.主題themes放到到content下 這裏我只保留灰色和藍色主題，其餘主題個人審美有限度，你們能夠到easyui官方下載新的主題
- 3.把Images文件夾移動到content下
- 4.Filters文件刪掉
- 5.把素材和site.css放到content目錄下，我已經爲你們準備好這個項目所要用到的圖片素材，不夠咱們再添加
- 6.把controllers的AccountController.cs,HomeController.cs刪除
- 7.把View視圖自帶的cshtml刪掉。
- 8.把script無關或者不是壓縮的我都刪掉了，由於我認爲沒必要要調試。之後咱們遇到問題，用其餘工具來輔助調試，如httpAnalyes軟件等
好了，咱們開始搭建
仍是新建一個「空」的控制器HomeController，添加index視圖
index代碼
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<meta name="viewport" content="width=device-width" />
<script src="@Url.Content("~/Scripts/jquery.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.easyui.min.js")" type="text/javascript"></script>
@Styles.Render("~/Content/css")
@Styles.Render("~/Content/themes/blue/css")
@Scripts.Render("~/bundles/home")
</head>
<body class="easyui-layout">
<div id="OverTimeLogin" class="easyui-dialog" data-options="closed:true,modal:true">
<iframe width="726px" scrolling="no" height="497px" frameborder="0" id="iOverTimeLogin"></iframe>
</div>
<div data-options="region:'north',border:false,split:true" style="height: 60px;">
<div class="define-head">
<div class="define-logo">
<div id="LoginTopLine">System Manage</div>
<div id="LoginBotoomLine">MVC4+EF5.0+EasyUI</div>
</div>
<div class="define-account">
</div>
</div>
</div>
<div data-options="region:'west',split:true,title:'菜單列表'" style="width: 200px; height:100%; padding-top: 2px; background-color:#fff; overflow:auto">
<div id="RightTree" style=" background-color:#fff;">
<div class="panel-loading">加載中...</div>
</div>
</div>
<div data-options="region:'south',border:false" style="height: 20px;">
<div class="define-bottom">
</div>
</div>
<div data-options="region:'center',border:false">
<div id="mainTab" class="easyui-tabs" data-options="fit:true">
<div title="個人桌面" data-options="closable:true" style="overflow: hidden; background:#fff">
<iframe scrolling="auto" frameborder="0" src="" style="width: 100%; height: 100%;"></iframe>
</div>
</div>
</div>
<div id="tab_menu" class="easyui-menu" style="width: 150px;">
<div id="tab_menu-tabrefresh" data-options="iconCls:'icon-reload'">
刷新</div>
<div id="tab_menu-openFrame">
在新的窗體打開</div>
<div id="tab_menu-tabcloseall">
關閉全部</div>
<div id="tab_menu-tabcloseother">
關閉其餘標籤頁</div>
<div class="menu-sep">
</div>
<div id="tab_menu-tabcloseright">
關閉右邊</div>
<div id="tab_menu-tabcloseleft">
關閉左邊</div>
<div id="tab_menu-tabclose" data-options="iconCls:'icon-remove'">
關閉</div>
<div id="menu" class="easyui-menu" style="width: 150px;">
</div>
</div>
</body>
</html>
這裏咱們看到head @Styles.Render("~/Content/css")這些代碼，這是MVC4的捆版壓縮技術，將css和javascript壓縮輸出到頁面。我已經作好了因此你們只要看下就能夠。也能夠谷歌一下他的原理組成。博客園不少大蝦也都給出了答案。其文件是App_Start下的BundleConfig.cs
$(function () {
$('#tab_menu-tabrefresh').click(function () {
/*從新設置該標籤 */
var url = $(".tabs-panels .panel").eq($('.tabs-selected').index()).find("iframe").attr("src");
$(".tabs-panels .panel").eq($('.tabs-selected').index()).find("iframe").attr("src", url);
});
//在新窗口打開該標籤
$('#tab_menu-openFrame').click(function () {
var url = $(".tabs-panels .panel").eq($('.tabs-selected').index()).find("iframe").attr("src");
window.open(url);
});
//關閉當前
$('#tab_menu-tabclose').click(function () {
var currtab_title = $('.tabs-selected .tabs-inner span').text();
$('#mainTab').tabs('close', currtab_title);
if ($(".tabs li").length == 0) {
//open menu
$(".layout-button-right").trigger("click");
}
});
//所有關閉
$('#tab_menu-tabcloseall').click(function () {
$('.tabs-inner span').each(function (i, n) {
if ($(this).parent().next().is('.tabs-close')) {
var t = $(n).text();
$('#mainTab').tabs('close', t);
}
});
//open menu
$(".layout-button-right").trigger("click");
});
//關閉除當前以外的TAB
$('#tab_menu-tabcloseother').click(function () {
var currtab_title = $('.tabs-selected .tabs-inner span').text();
$('.tabs-inner span').each(function (i, n) {
if ($(this).parent().next().is('.tabs-close')) {
var t = $(n).text();
if (t != currtab_title)
$('#mainTab').tabs('close', t);
}
});
});
//關閉當前右側的TAB
$('#tab_menu-tabcloseright').click(function () {
var nextall = $('.tabs-selected').nextAll();
if (nextall.length == 0) {
$.messager.alert('提示', '前面沒有了!', 'warning');
return false;
}
nextall.each(function (i, n) {
if ($('a.tabs-close', $(n)).length > 0) {
var t = $('a:eq(0) span', $(n)).text();
$('#mainTab').tabs('close', t);
}
});
return false;
});
//關閉當前左側的TAB
$('#tab_menu-tabcloseleft').click(function () {
var prevall = $('.tabs-selected').prevAll();
if (prevall.length == 0) {
$.messager.alert('提示', '後面沒有了!', 'warning');
return false;
}
prevall.each(function (i, n) {
if ($('a.tabs-close', $(n)).length > 0) {
var t = $('a:eq(0) span', $(n)).text();
$('#mainTab').tabs('close', t);
}
});
return false;
});
});
$(function () {
/*爲選項卡綁定右鍵*/
$(".tabs li").live('contextmenu', function (e) {
/*選中當前觸發事件的選項卡 */
var subtitle = $(this).text();
$('#mainTab').tabs('select', subtitle);
//顯示快捷菜單
$('#tab_menu').menu('show', {
left: e.pageX,
top: e.pageY
});
return false;
});
});
function addTab(subtitle, url, icon) {
if (!$("#mainTab").tabs('exists', subtitle)) {
$("#mainTab").tabs('add', {
title: subtitle,
content: createFrame(url),
closable: true,
icon: icon
});
} else {
$("#mainTab").tabs('select', subtitle);
$("#tab_menu-tabrefresh").trigger("click");
}
$(".layout-button-left").trigger("click");
//tabClose();
}
function createFrame(url) {
var s = '<iframe frameborder="0" src="' + url + '" scrolling="auto" style="width:100%; height:99%"></iframe>';
return s;
}
$(function () {
$(".ui-skin-nav .li-skinitem span").click(function () {
var theme = $(this).attr("rel");
$.messager.confirm('提示', '切換皮膚將從新加載系統！', function (r) {
if (r) {
$.post("../../Home/SetThemes", { value: theme }, function (data) { window.location.reload(); }, "json");
}
});
});
});
index的腳本，這個home.js的腳本，他集成了tab頁的右鍵菜單我已經集成到系統。運行以前要在Global.asax啓用壓縮
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Http;
using System.Web.Mvc;
using System.Web.Optimization;
using System.Web.Routing;
namespace App.Admin
{
// 注意: 有關啓用 IIS6 或 IIS7 經典模式的說明，
// 請訪問 http://go.microsoft.com/?LinkId=9394801
public class MvcApplication : System.Web.HttpApplication
{
protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();
WebApiConfig.Register(GlobalConfiguration.Configuration);
FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
RouteConfig.RegisterRoutes(RouteTable.Routes);
//啓用壓縮
BundleTable.EnableOptimizations = true;
BundleConfig.RegisterBundles(BundleTable.Bundles);
AuthConfig.RegisterAuth();
}
}
}
在BundleConfig.RegisterBundles(BundleTable.Bundles);前面加入
//啓用壓縮
BundleTable.EnableOptimizations = true;
好，咱們來看看效果！
若是你要啓用灰色主題那麼在將@Styles.Render("~/Content/themes/blue/css")
修改成@Styles.Render("~/Content/themes/gray/css")便可
其實這一些沒什麼好說的，只是爲系統搭建了一個簡單的框架。若是用easyui沒有不下幾個小時也是很難搭建起來的，不過別擔憂，我爲你們準備了原代碼
代碼下載 下載的源碼有的同窗運行有問題請把App_Start下的BundleConfig.cs更改成
using System.Web;
using System.Web.Optimization;
namespace App.Admin
{
public class BundleConfig
{
// 有關 Bundling 的詳細信息，請訪問 http://go.microsoft.com/fwlink/?LinkId=254725
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/common").Include(
"~/Scripts/common.js"));
bundles.Add(new ScriptBundle("~/bundles/home").Include(
"~/Scripts/home.js"));
bundles.Add(new ScriptBundle("~/bundles/account").Include(
"~/Scripts/Account.js"));
//easyui
bundles.Add(new StyleBundle("~/Content/themes/blue/css").Include("~/Content/themes/blue/easyui.css"));
bundles.Add(new StyleBundle("~/Content/themes/gray/css").Include("~/Content/themes/gray/easyui.css"));
bundles.Add(new StyleBundle("~/Content/themes/metro/css").Include("~/Content/themes/metro/easyui.css"));
bundles.Add(new ScriptBundle("~/bundles/jqueryfrom").Include(
"~/Scripts/jquery.form.js"));
bundles.Add(new ScriptBundle("~/bundles/easyuiplus").Include(
"~/Scripts/jquery.easyui.plus.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate.unobtrusive.plus.js"));
// 使用 Modernizr 的開發版本進行開發和了解信息。而後，當你作好
// 生產準備時，請使用 http://modernizr.com 上的生成工具來僅選擇所需的測試。
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
}
}
}
1 html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, button, textarea, select, p, blockquote, th, td {margin: 0;padding: 0;} 2 html, body {height: 100%;width: 100%;} 3 body {font: 12px/1.33 "微軟雅黑",Verdana,"宋體",Helvetica,sans-serif;background-color:#fff} 4 /*通用 5 ===============================================*/ 6 table {border-spacing: 0;} 7 .tablespacing {border-spacing: 3px;} 8 .clear{ clear:both} 9 fieldset, img {border: 0 none;} 10 li {list-style: none outside none;} 11 h1, h2, h3, h4, h5, h6 {font-size: 100%;font-weight: normal;} 12 cite, em {font-style: normal;} 13 input[type="button"], input[type="reset"], input[type="submit"], input[type="radio"], input[type="checkbox"] {cursor: pointer;} 14 input[type="text"],input[type="password"],textarea{border:1px solid #ccc} 15 input[type="text"],input[type="password"]{ padding:2px; height:16px;} 16 .clearfix:after {clear: both;content: ".";display: block;height: 0;visibility: hidden;} 17 label[disabled="true"], label[disabled=""], label[disabled="disabled"] {color: #000000;} 18 a:link, a:visited {text-decoration: none;} 19 a:hover {text-decoration:none;} 20 21 .displaynone{display:none} 22 .fl{ float:left} 23 .fr{ float:right} 24 header,footer,nav,section {display: block;} 25 .pd10{ padding:10px} 26 .pd3{ padding:3px} 27 .pd0{ padding:0px} 28 .pt5{ padding-top:5px} 29 .pt10{ padding-top:10px} 30 .pr5{ padding-right:5px} 31 .pr10{ padding-right:10px} 32 .pr20{ padding-right:20px} 33 .pb5{ padding-bottom:5px} 34 .pb10{ padding-bottom:10px} 35 .pl5{ padding-left:5px} 36 .pl10{ padding-left:10px} 37 .pl20{ padding-left:20px} 38 .mt2{ margin-top:2px} 39 .mb2{ margin-bottom:2px} 40 .mt5{ margin-top:5px} 41 .mb5{ margin-bottom:5px} 42 .mb-3{ margin-bottom:-3px} 43 .lh24{ line-height:24px} 44 .lh30{ line-height:30px} 45 46 .wid100f{width:100%}.wid80{ width:80px}.wid100{ width:100px}.wid120{ width:120px}.wid150{ width:150px}.wid590{ width:590px} 47 48 /*選擇*/ 49 .SelLookUp{ background:url('Images/icon/lookup.png') no-repeat center; padding:8px 11px} 50 .ui-state-default .SelLookUp{ background-position:right; padding:2px 20px 2px 5px; color:#2B77BD; font-weight:normal} 51 52 /*全部按鈕樣式 53 ===============================================*/ 54 .mvctool 55 { 56 height:30px; 57 } 58 .searchText{float:left; margin:2px 5px 0 0} 59 60 .icon-reload{background:url(Images/tools.png) no-repeat 0px -180px;height:16px;padding-left:18px;display:inline-block} 61 .icon-search{background:url(Images/tools.png) no-repeat -1px -259px;height:16px;padding-left:18px;display:inline-block} 62 .icon-save{background:url(Images/tools.png) no-repeat 0px -137px;height:16px;height:16px;padding-left:18px;display:inline-block} 63 .icon-ok{background:url(Images/tools.png) no-repeat 0px -218px;height:16px;height:16px;padding-left:18px;display:inline-block} 64 .icon-remove{background:url(Images/tools.png) no-repeat 0px -30px;height:16px;height:16px;padding-left:18px;display:inline-block} 65 .icon-add{background:url(Images/tools.png) no-repeat 0px 0px;height:16px;padding-left:18px;display:inline-block} 66 .icon-edit{background:url(Images/tools.png) no-repeat 0px -62px;height:16px;height:16px;padding-left:18px;display:inline-block} 67 .icon-details{background:url(Images/tools.png) no-repeat 0px -97px;height:16px;height:16px;padding-left:18px;display:inline-block} 68 .icon-man{background:url(Images/icons.png) no-repeat 0px 0px;height:16px;padding-left:18px;} 69 .icon-return{background:url(Images/icons.png) no-repeat 0px -311px;height:16px;padding-left:18px;} 70 .icon-group{background:url(Images/icons.png) no-repeat 0px -42px;height:16px;padding-left:18px;} 71 .icon-key{background:url(Images/icons.png) no-repeat 0px -374px;height:16px;padding-left:18px;} 72 .icon-send{background:url(Images/icons.png) no-repeat 0px -293px;height:16px;padding-left:18px;} 73 .icon-show{background:url(Images/icons.png) no-repeat 0px -333px;height:16px;padding-left:18px;} 74 .icon-uncheck{background:url(Images/icons.png) no-repeat 0px -190px;height:16px;padding-left:18px;} 75 .icon-settings{background:url(Images/icons.png) no-repeat 0px -107px;height:16px;padding-left:18px;} 76 .icon-share{background:url(Images/icons.png) no-repeat 0px -128px;height:16px;padding-left:18px;} 77 .icon-flag{background:url(Images/icons.png) no-repeat 0px -148px;height:16px;padding-left:18px;} 78 .icon-clock{background:url(Images/icons.png) no-repeat 0px -169px;height:16px;padding-left:18px;} 79 .icon-close{background:url(Images/icons.png) no-repeat 0px -64px;height:16px;padding-left:18px;} 80 .icon-cancelclose{background:url(Images/icons.png) no-repeat 0px -87px;height:16px;padding-left:18px;} 81 .icon-check{background:url(Images/icons.png) no-repeat 0px -210px;height:16px;padding-left:18px;} 82 .icon-comment{background:url(Images/icons.png) no-repeat 0px -352px;height:16px;padding-left:18px;} 83 .icon-export{background:url(Images/icons.png) no-repeat 0px -230px;height:16px;padding-left:18px;} 84 .icon-female{background:url(Images/icons.png) no-repeat 0px -19px;height:16px;padding-left:18px;} 85 .icon-copy{background:url(Images/icons.png) no-repeat 0px -250px;height:16px;padding-left:18px;} 86 .icon-error{background:url(Images/icons.png) no-repeat 0px -271px;height:16px;padding-left:18px;} 87 88 select.select,select.select2{ height:22px; line-height:22px; border:1px solid #E1E1E1; color:#7A7A7A; background:#FAFAFA; vertical-align:middle; } 89 select.select{padding:1px;} 90 select.select2{padding:2px;} 91 input.normal{ width:255px; } 92 input.small{ width:95px;} 93 input.small2{ width:50px; } 94 input.small3{ width:130px; } 95 input.middle{ width:210px; } 96 .txtInput{ margin-right:5px; padding:0 3px 0 3px; height:22px; line-height:22px; background:#FAFAFA; border:1px solid #D7D7D7; vertical-align:middle; font-size:12px; font-family:'微軟雅黑'; } 97 .txtInput2{ padding:0 3px 0 3px; height:20px; line-height:20px; background:#FAFAFA; border:1px solid #D7D7D7; vertical-align:middle; font-family:'微軟雅黑'; } 98 .btnSubmit{ padding:0 10px; height:28px; line-height:28px; color:#3D80B3; font-weight:bold; border:1px solid #AED0EA; background:url(Images/btn_bg.gif) 0 -44px repeat-x; cursor:pointer; vertical-align:middle; overflow:hidden; } 99 .btnSubmit:hover{ background-position:0 -72px;} 100 .btnSearch{ padding:0 8px; height:24px; line-height:24px; color:#707070; border:1px solid #D7D7D7; background:url(Images/btn_bg.gif) repeat-x; cursor:pointer; vertical-align:middle; overflow:hidden; } 101 .btnSearch:hover{ background-position:0 -22px; color:#005eac; } 102 .btnSelect{ padding:0; border:1px #e1e1e1 solid; color:#707070; cursor:pointer; vertical-align:middle; overflow:hidden; background:url(Images/btn_bg.gif) repeat-x; } 103 .btnSelect:hover{ background-position:0 -22px; color:#005eac; } 104 .btnSelect span.add{ display:block; height:20px; line-height:20px; padding:1px 3px 1px 18px; white-space:nowrap; background:url(tools_icon.gif) 2px -27px no-repeat; } 105 .btnInput{ margin:auto; padding:0 5px; border:1px #e1e1e1 solid; color:#707070; background:url(Images/btn_bg.gif) repeat-x; cursor:pointer; vertical-align:middle; line-height:24px; height:22px; overflow:hidden; } 106 107 /*file容器樣式*/ 108 a.files{ width:52px; height:22px; overflow:hidden; display:block; border:1px solid #d7d7d7; background:url(Images/upfile_bg.gif) left top no-repeat;text-decoration:none; } 109 /*file設爲透明，並覆蓋整個觸發面*/ 110 a.files input{ margin-left:-270px; font-size:24px; cursor:pointer; filter:alpha(opacity=0); opacity:0; } 111 /*取消點擊時的虛線框*/ 112 a.files, a.files input{ outline:none;/*ff*/hide-focus:expression(this.hideFocus=true);/*ie*/ } 113 .expic{cursor: pointer; width: 140px; height: 140px; border: 1px #ccc solid;} 114 .uploading{ float:left; background:url(Images/loading2.gif) no-repeat left center; padding-left:18px;display:none; line-height:24px; height:24px; color:#333; } 115 #FileUpload{ width:140px;} 116 /* Styles for validation helpers 117 -----------------------------------------------------------*/ 118 .field-validation-error{background:url(Images/icon-error.png) no-repeat 0px 0px;padding-left:18px; margin-bottom:-3px;color: #ff0000;} 119 .field-validation-valid{display: none;} 120 input.input-validation-error,select.input-validation-error{border: 1px solid #ff0000;background-color: #ffeeee;} 121 .validation-summary-errors{font-weight: bold;color: #ff0000;} 122 .validation-summary-valid{display: none;} 123 /*from*/ 124 /*easyui inherit*/ 125 .panel-body{ overflow:visible;} 126 /* Styles for editor and display helpers----------------------------------------------------------*/ 127 fieldset{width: 100%;margin-left: 4px;padding: 1em;border: 1px solid #CCC;} 128 legend{font-size: 1.1em;font-weight: 600;padding: 2px 4px 8px 4px;} 129 .search{width: 600px;float: left;} 130 /* Tabs樣式 131 =========================================================*/ 132 .tab_nav{ margin:8px auto; height:23px; line-height:23px; border-bottom:1px #e1e1e1 solid; font-family:"微軟雅黑"; } 133 .tab_nav li{ float:left; height:22px; margin:0 2px 0 5px; border:1px #e1e1e1 solid; border-bottom:0; background:url(Images/btn_bg.gif) repeat-x; text-align:center; } 134 .tab_nav li.selected,.tab_nav li.selected a:hover{ background:none; border-bottom:1px solid #fff; margin-bottom:-1px; _border-top:1px; } 135 .tab_nav li a:link,.tab_nav li a:visited,.tab_nav li a:active{ display:block; float:left; padding:0 10px; height:22px; color:#767676; outline:none; } 136 .tab_nav li a:hover{ background:url(Images/btn_bg.gif) repeat-x left -22px; } 137 .tab_nav li.selected a{ color:#3D80B3; } 138 .tab_con{ display:none; position:relative; } 139 /*表格樣式 140 =============================================*/ 141 .msgtable,.form_table{ width:100%; border:1px solid #EDECFF; font-family:Verdana, Geneva, sans-serif; } 142 .msgtable th{ padding:0.5em; font-weight:700; background:url(tools_bg.gif) left -150px repeat-x; } 143 .msgtable td{ padding:0.4em; border-bottom:1px solid #F3F3F3; } 144 .msgtable .tr_odd_bg{ background:#F9F9F9; } 145 .msgtable .tr_hover_col{ background:#EAEAEA; } 146 147 .form_table th{padding:5px 8px 5px 0;color:#333;text-align:right;} 148 .form_table td{padding:6px 0 5px 10px;text-align:left;color:#717171;line-height:200%} 149 .form_table label{ margin-left:10px; padding:7px 0 0; font-family:"宋體"; } 150 .form_table label.attr{color:#1d1d1d} 151 .form_table label input{ margin-right:5px; vertical-align:middle;} 152 .form_table span label{ margin:0; padding:0; } 153 .form_table textarea{font-size:12px;padding:3px;color:#000;border:1px #d2d2d2 solid;vertical-align:middle; font-family:"微軟雅黑";} 154 .form_table textarea.small{ width:350px; height:75px;} 155 .form_table textarea.big{ width:500px; height:350px;} 156 .form_table img.operator{ width:12px; height:12px; margin:0 6px; cursor:pointer; vertical-align:bottom; } 157 .setinput355 input,.setinput355 textarea{ width:355px; } 158 .setinput255 input,.setinput255 textarea{ width:255px; } 159 .setinput95 input,.setinput95 textarea{ width:95px;} 160 .setinput50 input,.setinput50 textarea{ width:50px; } 161 .setinput130 input,.setinput130 textarea{ width:130px; } 162 .setinput210 input,.setinput210 textarea{ width:210px; } 163 164 .border_table{ border-width:1px; margin:0; background:#fff; } 165 .border_table th{ border:1px solid #e1e1e1; vertical-align:middle; padding:0px 10px; white-space:nowrap; word-break:keep-all; } 166 .border_table td{ border:1px solid #e1e1e1; vertical-align:middle; padding:5px 10px 5px; white-space:nowrap; word-break:keep-all; } 167 .border_table thead th{ color:#333;white-space:nowrap;text-align:center;background:url(tools_bg.gif) repeat-x left -150px; } 168 .border_table tbody th{padding-right:5px; text-align:right;color:#707070;background-color:#f9f9f9} 169 .border_table .spec_pic{margin-bottom:5px} 170 .border_table label{color:#777} 171 .border_table tr.td_c td{text-align:center} 172 173 .select-any{ padding:10px} 174 .select-any li{ float:left; display:inline-block; height:22px; line-height:22px; padding-right:15px; white-space:nowrap} 175 176 .top_pic_shadow{position:relative; float:left; height: 158px; width:130px; margin-top:3px; background:#eee;} 177 .top_pic{ position:absolute; background:#fff; left:-3px; top:-3px; border:1px solid #ced7e7; padding:4px 4px 0; height: 158px; width:120px; text-align:center; overflow:hidden} 178 .top_pic:hover{ border:1px solid #ffbd67} 179 .top_pic img{ cursor:pointer; width:120px; height:120px} 180 .top_pic div{ color:#666} 181 182 .sizetable input{width: 40px; height:20px; line-height: 20px;} 183 .sizetable{ background:#ddd} 184 .sizetable tr td{ background:#fff; padding:2px} 185 .sizetable tr td.lf{ text-align:right; width:50px; background:#f0f0f0; color:#666} 186 187 188 textarea{ padding:2px;} 189 .fromEditTable{ width:100%; } 190 .fromEditTable td{ height:30px; padding-left:5px; border-bottom:dashed 1px #ccc} 191 .setTextWidth300 input[type="text"]{width:300px;} 192 .setTextWidth300 textarea{width:300px; margin:5px 0 5px 0;} 193 .setTextWidth200 input[type="text"]{width:200px;} 194 .setTextWidth200 textarea{width:200px; margin:5px 0 5px 0;} 195 .setTextWidth100 input[type="text"]{width:100px;} 196 .setTextWidth100 textarea{width:100px; margin:5px 0 5px 0;} 197 .setTextWidth80 input[type="text"]{width:80px;} 198 .setTextWidth80 textarea{width:80px; margin:5px 0 5px 0;} 199 #ErrMesList{ display:none; } 200 #ErrMesListContent{padding-left:10px;min-width:200px; line-height:22px;} 201 #ErrMesListContent ul li{list-style:disc} 202 203 /*themes*/ 204 .ui-skin-nav {float: left;padding: 0;list-style: none outside none;} 205 .ui-skin-nav .li-skinitem {float: left;font-size: 12px;margin-left: 5px;text-align: center;} 206 .ui-skin-nav .li-skinitem span {cursor: pointer;width:12px;height:10px;display:inline-block;border:1px solid #fff;} 207 .ui-skin-nav .li-skinitem span.cs-skin-on{border: 1px solid #FFFFFF;} 208 .ui-skin-nav .li-skinitem span.gray{background-color:gray;} 209 .ui-skin-nav .li-skinitem span.blue{background-color:blue;} 210 .ui-skin-nav .li-skinitem span.pepper-grinder{background-color:#BC3604;} 211 .ui-skin-nav .li-skinitem span.cupertino{background-color:#D7EBF9;} 212 .ui-skin-nav .li-skinitem span.dark-hive{background-color:black;} 213 .ui-skin-nav .li-skinitem span.sunny{background-color:#FDD140;} 214 215 216 /* 即時消息 */ 217 .webim-logo{color:#1e5dda} 218 .webim-logo img{ vertical-align:middle} 219 .icon-webim{ background:url(WebIM/css/images/webimlogo.gif) no-repeat left 0; height:20px; width:20px;} 220 221 .webim-lfbox{ float:left; width:546px; border-right:1px solid #ddd} 222 .webim-rtbox{ float:right;width:158px; padding:0 10px} 223 224 .webim-info-tit{ line-height:30px; overflow:hidden; padding:0 10px} 225 .webim-info-tit h2{ float:left; font-size:12px; padding-right:20px} 226 .webim-info-tit-name{ float:left; width:450px; padding-top:5px; line-height:0} 227 .webim-info-tit-name li{ display:inline-block; margin-right:5px; margin-bottom:5px; line-height:20px; padding-right:2px; border:1px solid #77b8de; background:#cbebfb; border-radius:4px;} 228 .webim-info-tit-name li a{ display:inline-block;} 229 .webim-info-tit-name li a.webim-info-tit-thename{ padding:0 2px} 230 .webim-info-tit-name li a img{ vertical-align:middle; padding-right:2px} 231 a.webim-info-tit-name-close{ background:url(WebIM/css/images/webim-02.gif) no-repeat; display:inline-block; padding-top:1px; width:7px; height:7px; cursor:pointer;} 232 .webim-info-tit-name li:hover{background:#ebf9ff;} 233 .webim-info-tit-name li:hover a{ color:#ff6600} 234 .webim-info-tit-name li.current{ border:1px solid #c6ad56; background:#fffadb;} 235 .webim-info-tit-name li.current a,.webim-info-tit-name li.current a:visited,.webim-info-tit-name li.current a:hover{ color:#e98e18} 236 .webim-info-tit-name li.current a.webim-info-tit-name-close{ background:url(WebIM/css/images/webim-02b.gif) no-repeat;} 237 .webim-info-tit-name li.current:hover a.webim-info-tit-name-close{ background:url(WebIM/css/images/webim-02.gif) no-repeat;} 238 239 .webim-info-contentbox{ background:#fff; padding:10px;} 240 .webim-info-content p{ padding-bottom:10px} 241 .webim-info-content .tit{ color:#666; padding-bottom:0} 242 243 .webim-send-about{ height:22px; line-height:22px; padding:0 10px} 244 .webim-send-about .fl a{ padding-right:10px} 245 .webim-send-about .fr a{ padding-left:10px} 246 .webim-send-butbox{ height:36px; line-height:36px; padding:0 10px} 247 .webim-send-butbox p{ float:left; width:460px; display:table; height:36px} 248 .webim-send-butbox p span.inter{ display:table-cell; vertical-align:middle; line-height:18px} 249 .webim-send-butbox p span.inter-ps{ text-overflow:ellipsis; overflow:hidden} 250 span.inter-ps span{ display:inline-block; padding-right:5px} 251 .webim-send-but{ float:right; background:url(WebIM/css/images/webim-09.gif) no-repeat; width:63px; height:26px; margin-top:5px; border:none; cursor:pointer} 252 253 .webim-person{ margin:5px 0 5px 0;} 254 .webim-list-tab{ margin-bottom:5px; overflow:hidden} 255 .webim-list-tab li{ float:left; height:20px; line-height:20px; border-bottom:2px solid #fff; padding:0 5px} 256 .webim-list-tab li.current{border:2px solid #fff; border-bottom:none; font-weight:bold} 257 .webim-org-search{ padding-bottom:5px} 258 .webim-org-search input[type="text"]{ width:132px; height:16px; line-height:16px; border:1px solid #a6d2e8; background:#fff} 259 .webim-org-search input[type="button"]{ background:url(WebIM/css/images/webim-04.gif) no-repeat; width:37px; height:20px; line-height:20px; vertical-align:top; border:none; cursor:pointer} 260 .webim-latest ul li{ background:url(WebIM/css/images/webim-01.gif) no-repeat 0 2px; padding-left:20px; padding-bottom:5px} 261 262 .psselect-lf,.psselect-rt{ float:left; width:160px; height:350px; padding:10px; border:1px solid #C5DBEC} 263 .psselect-lf .webim-list-tab li{ float:left; height:20px; line-height:20px; border-bottom:1px solid #c6dbef; padding:0 5px} 264 .psselect-lf .webim-list-tab li.current{border:1px solid #c6dbef; border-bottom:none; font-weight:bold} 265 266 .psselect-rt{ float:right; line-height:22px;} 267 .psselect-md{ float:left; width:30px; height:350px; line-height:350px; text-align:center; font-family:"宋體"} 268 269 .memberlist{ background:#f3f3f3; border:1px solid #ccc; height:300px; overflow:auto} 270 /* 信息系統樣式 */ 271 .article-content{ background:#edf6ff; border:1px solid #a5cbe7; border-radius:5px; padding:10px; margin-bottom:10px; overflow:hidden; width:100%} 272 .article-content tr td{ vertical-align:top} 273 .article-content .lf{ width:150px; color:#999; line-height:18px} 274 .comment-tit{ background:#D3EBF8; border:1px solid #A5CBE7; border-bottom:none; border-radius:5px 5px 0 0; height:24px; line-height:24px; text-indent:10px} 275 .comment-content{ border:1px solid #a5cbe7; border-radius:0 0 5px 5px; padding:10px; margin-bottom:10px} 276 .comment-content .mymes{ border-bottom:1px dashed #ddd; padding:10px 0} 277 .mytitle{ padding-bottom:5px; color:#999} 278 .mytitle span{ color:#ab7100} 279 .mycomment{ text-indent:24px} 280 #comment-txt-input{ margin-bottom:5px} 281 .infolist-icon{ padding:2px 2px 2px 17px; background:url(/Content/images/icon/text.png) no-repeat;} 282 283 .thefile-tit{ font:normal 18px/36px Microsoft YaHei; text-align:center} 284 .thefile-about{ border-bottom:1px dashed #cecfce; text-align:center; color:#999} 285 .thefile-about span{ padding:0 10px} 286 .thefile-compress{ padding:10px 0; line-height:18px} 287 .fabu-tit{ background:#D3EBF8; border-bottom:1px solid #90C1DD; padding:10px; margin-bottom:5px; font-size:14px; font-weight:bold; color:#296d9c} 288 /*導航按鈕*/ 289 .arrow-first,.arrow-pre,.arrow-next,.arrow-last{ background:url(/Content/Images/arrow.gif) no-repeat; display:inline-block; height:16px; width:16px; cursor:pointer; vertical-align:middle} 290 .arrow-first{ background-position:-7px 0} 291 .arrow-pre{ background-position:-35px 0} 292 .arrow-next{ background-position:-63px 0} 293 .arrow-last{ background-position:-91px 0} 294 .but-row a,.but-row a:visited{ border:1px solid #B4C1C9; border-radius:5px; display:inline-block; height:16px; line-height:16px; padding:2px 4px; margin-left:5px} 295 .but-row a:hover{ border:1px solid #4994de; background:#eff7ff} 296 .but-row a.but-disabled,.but-row a.but-disabled:visited,.but-row a.but-disabled:hover{ color:#bdd3e7; background:none; border:1px solid #B4C1C9; cursor:default} 297 .but-row a.but-disabled span{ opacity:0.35; cursor:default} 298 /* 頁碼樣式 */ 299 .pages-box{ clear:both; border:2px solid #ddd; border-top:1px solid #ddd; overflow:hidden; height:100%; width:100%} 300 .pages-box tr td{ padding:15px 10px} 301 .pages .item{padding:1px 0;} /*數字頁索引樣式*/ 302 .pages .cpb {color:#ff6600; font-weight:bold; padding: 1px 6px;} /*當前頁樣式*/ 303 .pages a { text-decoration:none;padding: 2px 6px; margin:0 1px; border: 1px solid #ddd;} 304 .pages a:hover { background-color: #ff8800; color:#fff; border:1px solid #ff8800; text-decoration:none;font-weight:normal;} 305 .pages input{ width:40px; border:1px solid #c1d2e2; text-align:center; padding:2px}
關於代碼：代碼沒有上傳整個解決方案，你下載解壓後，只須要引用現有類庫便可，關於裏面的素材，不懂的能夠問我，裏面包含裏之後全部要用到的素材，請關注系統的童鞋不要刪除，能夠修改
相關文章
- 1. ASP.NET MVC5+EF6+EasyUI 後臺管理系統（2）-easyui構建前端頁面框架[附源碼]
- 2. 構建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的後臺管理系統（10）-系統菜單欄[附源碼]
- 3. 構建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的後臺管理系統（8）-MVC與EasyUI DataGrid 分頁...
- 4. 構建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的後臺管理系統（8）-MVC與EasyUI DataGrid 分頁
- 5. 構建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的後臺管理系統（41）-組織架構
- 6. 構建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的後臺管理系統（15）-權限管理系統準備
- 7. 構建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的後臺管理系統（3）-漂亮系統登陸界面
- 8. 構建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的後臺管理系統（3）-漂亮系統登錄界面
- 9. 構建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的後臺管理系統（12）-系統日誌和異常的處理②...
- 10. 構建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的後臺管理系統（12）-系統日誌和異常的處理②
- 更多相關文章...
- • Docker 架構 - Docker教程
- • Spring DI（依賴注入）的實現方式：屬性注入和構造注入 - Spring教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • Docker容器實戰(七) - 容器眼光下的文件系統
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. ASP.NET MVC5+EF6+EasyUI 後臺管理系統（2）-easyui構建前端頁面框架[附源碼]
- 2. 構建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的後臺管理系統（10）-系統菜單欄[附源碼]
- 3. 構建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的後臺管理系統（8）-MVC與EasyUI DataGrid 分頁...
- 4. 構建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的後臺管理系統（8）-MVC與EasyUI DataGrid 分頁
- 5. 構建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的後臺管理系統（41）-組織架構
- 6. 構建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的後臺管理系統（15）-權限管理系統準備
- 7. 構建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的後臺管理系統（3）-漂亮系統登陸界面
- 8. 構建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的後臺管理系統（3）-漂亮系統登錄界面
- 9. 構建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的後臺管理系統（12）-系統日誌和異常的處理②...
- 10. 構建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的後臺管理系統（12）-系統日誌和異常的處理②