|
兩年前,，曾打算自己開發(fā)一個web開發(fā)框架,，把部門、人員,、權(quán)限,、日志作為基本服務(wù)加入進去，在其基礎(chǔ)上可以做業(yè)務(wù)快速開發(fā),，結(jié)果沒有堅持下去,，僅僅開了個頭就夭折了。究其原因,，一方面是采用自己完全不熟悉的新技術(shù),，不算成熟的MVC，對習(xí)慣于WEB FORM開發(fā)的我,，是一個比較大的沖擊,，加上EntityFramework涌入的大量概念，對JQuery的一知半解,，以及這三項技術(shù)自身不成熟帶來的BUG和版本的不斷升級變更,，都帶來了很大困擾。兩年之后,，重啟開發(fā)框架之旅,。 開發(fā)工具選擇VS2012，后臺使用MVC4.0 EntityFramework5,，前臺選用JQuery1.8.0 EasyUI1.3.1,。 兩年前，曾經(jīng)使用過JQuery,，當(dāng)時沒有成套的JQuery控件,，往往是根據(jù)需要逐個搜尋，例如框架,、Tab,、彈出窗口等等，最大的問題就是沒有統(tǒng)一的風(fēng)格和界面,，缺少文檔和示例,，以及網(wǎng)上各種對源碼進行任意修改和擴展的版本，需要自己花大量時間摸索和試驗,，當(dāng)時就覺得這種混亂的局面終會結(jié)束,，出現(xiàn)一個統(tǒng)一的框架，現(xiàn)在來看,，EasyUI做得相當(dāng)不錯了,，提供了大量常見控件,，和統(tǒng)一的風(fēng)格（包括界面風(fēng)格和編程風(fēng)格）。 官方網(wǎng)站：http://www./ 有控件說明,、示例,，另外有個翻譯的中文網(wǎng)站,，缺點是沒有跟新版同步,，很多參數(shù)和方法都對不起來了，所以建議看英文原版,。 下面就來說一下最常見的布局,。 對于MIS管理系統(tǒng)，常見的布局分為三大塊,，頂部是系統(tǒng)名稱,，加當(dāng)前登錄人的賬號、姓名,、部門等信息展現(xiàn),，以及注銷、切換賬號等操作按鈕,；左側(cè)是系統(tǒng)菜單欄,，右側(cè)是主工作區(qū)，點擊左側(cè)菜單,，可以在主工作區(qū)顯示對應(yīng)的業(yè)務(wù)處理界面,。為了最大程度利用空間，通常還要求左側(cè)導(dǎo)航菜單欄可以折疊隱藏顯示,。 之前的開發(fā),，通常就是使用Html的frameset標(biāo)簽  <frameset cols='25%,50%,25%'>
<frame src='frame_a.htm' />
<frame src='frame_b.htm' />
<frame src='frame_c.htm' />
</frameset>
然后在自己編寫JS來控制折疊某個區(qū)域。 使用EasyUI就簡單多了,首先將下載的EasyUI包加入到工程中,，我選擇放在web工程根目錄下,，與視圖文件夾View同級存放，然后修改Home控制器對應(yīng)的Index視圖： 1.在head標(biāo)簽內(nèi)部加入對EasyUI相關(guān)css樣式表的引用 @Styles.Render('~/EasyUI/themes/gray/easyui.css') @Styles.Render('~/EasyUI/themes/icon.css') 2.在</body>標(biāo)簽之前加入以下對js文件的引用 @Scripts.Render('~/EasyUI/jquery-1.8.0.min.js') @Scripts.Render('~/EasyUI/jquery.easyui.min.js') @Scripts.Render('~/EasyUI/locale/easyui-lang-zh_CN.js')
使用EasyUI的Layout控件有兩種方式,，一種是使用div,，若整個頁面都是布局，像本文這種情況,，整個系統(tǒng)布局,，則可以直接在body里加入EasyUI標(biāo)記，如下所示： <body class='easyui-layout'>
<div region='north' title='' split='true' style='height: 100px;'></div>
<div region='west' split='true' title='功能菜單' style='width: 200px;'>
<ul id='mainMenu' class='easyui-tree'>
</ul>
</div>
<div region='center' title='' style='padding: 5px; background: #eee;'>
<div id='mainTabs' class='easyui-tabs' fit='true' border='false'>
@* <div title='歡迎使用' closable='true'>
<h1 style='font-size: 24px;'>歡迎,！</h1>
<h1 style='font-size: 24px; color: red;'>Welcome ,！</h1>
</div>*@
</div>
</div>
<div region='south' title='' split='true' style='height: 20px; text-align: center'>
© @DateTime.Now.Year - 版權(quán)聲明
</div>
</body>
效果圖如下：
EasyUI可以設(shè)定上下左右中五個區(qū)域，本文沒有使用右側(cè)區(qū)域,，底部區(qū)域也僅僅放了一個版權(quán)聲明, 頂部是系統(tǒng)名稱,，加當(dāng)前登錄人的賬號,、姓名、部門等信息展現(xiàn),，以及注銷,、切換賬號等操作按鈕，左側(cè)為系統(tǒng)功能菜單導(dǎo)航樹,，點擊葉節(jié)點后將在中心區(qū)域打開對應(yīng)的業(yè)務(wù)功能頁面,。中心區(qū)域還添加了一個EasyUI的Tab控件。 默認(rèn)左側(cè)區(qū)域已經(jīng)添加了可以折疊按鈕,，其中split布爾屬性控制是否各區(qū)域邊框可拖動以便調(diào)整大小,，title屬性可設(shè)置區(qū)域標(biāo)題。 本文從實戰(zhàn)角度出發(fā),，僅指明關(guān)鍵屬性和要注意的事項,，其他屬性請查閱官方網(wǎng)站說明。 關(guān)于樹形控件和Tab控件,，將在后續(xù)中文章中陸續(xù)介紹,。
注：easyui商用需要付費授權(quán),，449刀,，非年費，無時間和項目限制,，其實這價格還說得過去 |
|
|
來自： DiberyChen > 《待分類》
