一、坑爹的老板
“我X！這個項目是要商業應用的，你還想用easyUI,500美刀的授權費用。一個項目才賺多少錢！趕緊給我換了，明天去客戶那邊要做demo的，今天晚上必須給我趕出來！不懂的去問大雄”黃總對我又是一通大吼。
我容易嘛我，以前做CS架構系統的，現在突然讓我轉BS，前端開發實在太費力了。更要命的是還碰上一個SB坑爹的小老板。公司一共就三個人，老板（摳得要死，不知道怎么討到老婆的）、大雄（大濕級攻城濕，BS前端開發大牛）、我（屌絲碼農）。
二、開工搞起
好吧，老板都發話了，自己重做吧，啥都要搞免費的，怕侵犯別人版權，自己下的片全是正版的么？現在的人啊。。。發再多的牢騷也沒用，UI還是得自己寫，先弄個好看點的主界面吧，里面的功能隨便糊弄下數據庫都懶得連。。這次要做的demo是一個后台管理系統，菜單導航做成手風琴的會顯得比較大方。那就做成手風琴的吧。經過網上一番搜索，我決定把菜單導航做成下面這個樣子
問題來了，上面這個界面是很好看，關鍵是我不會做呀！那我這個菜鳥只好向大雄大師求教了。
我：“大雄，這個導航菜單怎么做？”
大雄：“沒時間，我在改BUG。”
我：“老板讓我問你的。”
大雄：“我幫你把界面做好，你能幫我把這250個BUG和需求全改掉？明天就要，多謝你了”
我：“唉，我有個女同學讓我幫忙介紹個男朋友”
大雄：“剛好我現在有時間，我先幫你弄”
大雄過來看了一眼我同學的照片說：“網址不是都有了么，自己按F12，什么都有的，我忙去了。。。”
我了個去什么人呀，看人家長得抽象點就撂挑子了，那就F12吧，
擦！F12真是個好東西呀，按一下什么html標記、css樣式全有了。原來所謂的前端大濕也不過如此嘛！
不斷的ctrl+C、和ctrl+v后，自己再寫了點js腳本的我的界面出來啦！！！！完全實現了左側樹狀導航，點擊完導航在右側以選項卡的形式打開標簽。
這里跟大家分享一下主要思路：
1）每個菜單按鈕其實就是一個div,子菜單就是上級div里嵌套div。div真的是個好東西，里面什么東西都能放，菜單圖標，樣式都可以很好的控制。
2）右側以選項卡方式打開標簽其實是給div加了個onclick事件點擊以后在右側有兩個動作：1、加一個iframe,里面放頁面內容。2、加一個標簽跟頁面對應，可以控制頁面的顯示隱藏和關閉。
附打標簽選項卡代碼
1 //=================動態菜單tab標簽======================== 2 function AddTabMenu(tabid, url, name, img, Isclose, IsReplace) { 3 SetSystemId(tabid); 4 if (url == "" || url == "#") { 5 url = "/ErrorPage/404.aspx"; 6 } 7 var tabs_container = top.$("#tabs_container"); 8 var ContentPannel = top.$("#ContentPannel"); 9 if (IsReplace == 'true') { 10 top.RemoveDiv(tabid); 11 } 12 if (Isclose != 'false') { //判斷是否帶關閉tab 13 top.$(".navigation").hide(); 14 } else { 15 top.$(".navigation").show(); 16 } 17 if (top.document.getElementById("tabs_" + tabid) == null) { //如果當前tabid存在直接顯示已經打開的tab 18 Loading(true); 19 tabs_container.find('li').removeClass('selected'); 20 ContentPannel.find('iframe').hide(); 21 if (Isclose != 'false') { //判斷是否帶關閉tab 22 tabs_container.append("<li id=\"tabs_" + tabid + "\" class='selected' win_close='true'><span title='" + name + "' onclick=\"javascript:AddTabMenu('" + tabid + "','" + url + "','" + name + "','" + img + "','true')\"><a href=\"javascript:;\"><img src=\"/Themes/Images/32/" + img + "\" width=\"20\" height=\"20\">" + name + "</a></span><a class=\"win_close\" title=\"關閉當前窗口\" onclick=\"RemoveDiv('" + tabid + "')\"></a></li>"); 23 } else { 24 tabs_container.append("<li id=\"tabs_" + tabid + "\" class=\"selected\" onclick=\"javascript:AddTabMenu('" + tabid + "','" + url + "','" + name + "','" + img + "','false')\"><a><img src=\"/Themes/Images/32/" + img + "\" width=\"20\" height=\"20\">" + name + "</a></li>"); 25 } 26 ContentPannel.append("<iframe id=\"tabs_iframe_" + tabid + "\" name=\"tabs_iframe_" + tabid + "\" height=\"100%\" width=\"100%\" src=\"" + url + "\" frameBorder=\"0\"></iframe>"); 27 } 28 else { 29 tabs_container.find('li').removeClass('selected'); 30 ContentPannel.find('iframe').hide(); 31 tabs_container.find('#tabs_' + tabid).addClass('selected'); 32 top.document.getElementById("tabs_iframe_" + tabid).style.display = 'block'; 33 } 34 } 35 //關閉當前tab 36 function ThisCloseTab() { 37 var tabs_container = top.$("#tabs_container"); 38 top.RemoveDiv(tabs_container.find('.selected').attr('id').substr(5)); 39 } 40 //關閉事件 41 function RemoveDiv(obj) { 42 var tabs_container = top.$("#tabs_container"); 43 var ContentPannel = top.$("#ContentPannel"); 44 tabs_container.find("#tabs_" + obj).remove(); 45 ContentPannel.find("#tabs_iframe_" + obj).remove(); 46 var tablist = tabs_container.find('li'); 47 var pannellist = ContentPannel.find('iframe'); 48 if (tablist.length > 0) { 49 tablist[tablist.length - 1].className = 'selected'; 50 pannellist[tablist.length - 1].style.display = 'block'; 51 } 52 if (tablist.length == '1') { 53 top.$(".navigation").show(); 54 } 55 }
三、舉一反三
我：“大雄，原來做前端就是這么簡單呀，套套js和樣式，P兩張好看點的圖，找幾張圖片，什么樣的界面出不來呀”
大雄：“可不就是這么簡單么，只是你太SB而已，到現在才明白”
好吧！你牛，我TM把你以前那兩套UI前端界面也仿出來，不就是F12么，我js好歹還是會點的。半小時后。。。
四、動態加載
“哦耶耶，你之前弄的那幾套風格的界面都讓我扒過來了”
大雄：“喲！我穿過的，都讓你給扒了，不錯嘛，名師出高徒呀”
我：“狗P名濕，你教我啥啦？”
大雄：“F12呀，對了你那個菜單能動態加載嗎？”
我：“動態加載？html的怎么動態加載？”
大雄：“你SB呀，你不知道用JS從后台獲取菜單數據，然后自動拼接出菜單來，再加載，不就動態了么？會個F12就這么囂張了”
我：“JS里面可以拼接html,你怎么不早講，什么東西都藏着掖着的”
大雄：“我這么忙，你不問我，我怎么知道你想要什么，你當我是websocket時不是還給你那個消息推送啊。”
好吧，還是得自己來做，那個清高的大濕只會罵我的時候話多一點。。。
動態加載要做到以下幾步：
1、要在數據庫里建立菜單，表結構如下：
| 序號 |
列名 |
數據類型 |
長度 |
小數位 |
標識 |
主鍵 |
外鍵 |
允許空 |
默認值 |
說明 |
| 1 |
MenuId |
varchar |
50 |
0 |
|
是 |
|
否 |
|
菜單主鍵 |
| 2 |
ParentId |
varchar |
50 |
0 |
|
|
|
否 |
|
父級主鍵 |
| 3 |
Code |
varchar |
50 |
0 |
|
|
|
是 |
|
編號 |
| 4 |
FullName |
varchar |
50 |
0 |
|
|
|
否 |
|
名稱 |
| 5 |
Description |
varchar |
200 |
0 |
|
|
|
是 |
|
描述 |
| 6 |
Img |
varchar |
50 |
0 |
|
|
|
是 |
|
圖標 |
| 7 |
Category |
varchar |
50 |
0 |
|
|
|
是 |
|
菜單分類 |
| 8 |
NavigateUrl |
varchar |
200 |
0 |
|
|
|
是 |
|
導航地址 |
| 9 |
FormName |
varchar |
200 |
0 |
|
|
|
是 |
|
窗體名 |
| 10 |
Target |
varchar |
50 |
0 |
|
|
|
是 |
|
目標 |
| 11 |
IsUnfold |
int |
4 |
0 |
|
|
|
是 |
|
是否展開 |
| 12 |
AllowEdit |
int |
4 |
0 |
|
|
|
是 |
|
允許編輯 |
| 13 |
AllowDelete |
int |
4 |
0 |
|
|
|
是 |
|
允許刪除 |
| 14 |
Enabled |
int |
4 |
0 |
|
|
|
是 |
1 |
有效：1-有效，0-無效 |
| 15 |
SortCode |
int |
4 |
0 |
|
|
|
是 |
|
排序嗎 |
| 16 |
DeleteMark |
int |
4 |
0 |
|
|
|
是 |
1 |
刪除標記:1-正常，0-刪除 |
| 17 |
CreateDate |
datetime |
8 |
3 |
|
|
|
是 |
getdate |
創建時間 |
| 18 |
CreateUserId |
varchar |
50 |
0 |
|
|
|
是 |
|
創建用戶主鍵 |
| 19 |
CreateUserName |
varchar |
50 |
0 |
|
|
|
是 |
|
創建用戶 |
| 20 |
ModifyDate |
datetime |
8 |
3 |
|
|
|
是 |
|
修改時間 |
| 21 |
ModifyUserId |
varchar |
50 |
0 |
|
|
|
是 |
|
修改用戶主鍵 |
| 22 |
ModifyUserName |
varchar |
50 |
0 |
|
|
|
是 |
|
修改用戶 |
主要字段介紹：
ParentID:父級主鍵，正確的帶出多級下拉菜單。
Img:圖片路徑，前台加載時根據路徑加載菜單圖標，使菜單看起來更加漂亮。
SortCode:菜單顯示的順序。
2、通過jquery調用ajax調用數據庫，從數據庫中把菜單的父節點，圖片地址、排序方式等調出來，這種后台代碼大家都熟就不做詳細描述了。
3、頁面載入時動態加載，根據ajax方法返回的json數據動態拼接html代碼，就跟我們平時寫C#代碼一樣，就是拼接個動態字符串，代碼如下
function resizeLayout() { resizeU(); $(window).resize(resizeU); function resizeU() { var accordion_head = $('.accordion > li > a'), accordion_body = $('.accordion li > .sub-menu'); $(".sub-menu").css('height', $(".navigation").height() - 19 - accordion_head.length * accordion_head.height() - accordion_head.length + 'px'); accordion_head.first().addClass('active').next().slideDown('normal'); accordion_head.on('click', function (event) { event.preventDefault(); if ($(this).attr('class') != 'active') { accordion_body.slideUp('normal'); $(this).next().stop(true, true).slideToggle('normal'); accordion_head.removeClass('active'); $(this).addClass('active'); } }); } } //手風琴導航菜單 var AccordionMenuJson = ""; function GetAccordionMenu() { var index = 0; var html = ""; getAjax("Frame.ashx", "action=LoadFirstMenu", function (data) { AccordionMenuJson = eval("(" + data + ")"); $.each(AccordionMenuJson, function (i) { if (AccordionMenuJson[i].ParentId == '9f8ce93a-fc2d-4914-a59c-a6b49494108f') { if (index == 0) { html += "<li><a style=\"border-top: 0px solid #ccc;\"><img src=\"/Themes/Images/32/" + AccordionMenuJson[i].Img + "\">" + AccordionMenuJson[i].FullName + "</a>"; } else { html += "<li><a><img src=\"/Themes/Images/32/" + AccordionMenuJson[i].Img + "\">" + AccordionMenuJson[i].FullName + "</a>"; } html += GetSubmenu(AccordionMenuJson[i].MenuId); html += "</li>"; index++; } }); }) $(".accordion").append(html); } //子菜單 function GetSubmenu(MenuId) { var html = ""; html += "<div class=\"sub-menu\">"; $.each(AccordionMenuJson, function (i) { if (AccordionMenuJson[i].ParentId == MenuId) { html += "<div onclick=\"AddTabMenu('" + AccordionMenuJson[i].MenuId + "', '" + AccordionMenuJson[i].NavigateUrl + "', '" + AccordionMenuJson[i].FullName + "', '" + AccordionMenuJson[i].Img + "', 'true');\" ><img src=\"/Themes/Images/32/" + AccordionMenuJson[i].Img + "\">" + AccordionMenuJson[i].FullName + "</div>"; } }); html += "</div>"; return html; }
后台的拼接出這些代碼以后，就跟我們按F12鍵以后得到的結果是一樣的。
運行一下，咦，怎么界面上啥東西都沒有？我擦，忘了在數據庫里添加幾個測試菜單，當然是空的了。
三分鍾后。。。
“大雄，大雄！！！好啦！可以啦。”
怎么沒人了？一看時間兩點多了。。。還得加幾個功能頁面進去才可以做demo
唉，苦逼的程序猿傷不起呀。。。。。
謹以此文獻給那些像我一樣的前端菜鳥，大神們不喜忽噴。。。
附演示地址：
http://www.learun.cn 力軟官網
http://www.learun.cn:8080 在線demo