使用EasyUI創建分頁對比效果
近期實驗室在做一個教學質量分析的系統，主要功能就是統計匯總考試信息從而得出知識點掌握的熟練程度。最近老板檢查項目進度的時候向師兄提出了一個需求，想要通過點擊篩選把頁面一分為二，從而老師可以自己的篩選結果與總體要求有一個對比。初來乍到的我菜的一筆，實現不了後臺復雜的邏輯，於是師兄就把這個實現分頁效果的任務交給了我。
第一步，找到可以實現這個效果的一種布局
首先，在師兄的幫助下找到了EasyUI這個強大的jQuery界面插件，在這其中有一個EasyUI Layout布局比較適合這個需求。布局（layout）是有五個區域（北區 north、南區 south、東區 east、西區 west 和中區 center）的容器。中間的區域面板是必需的，邊緣區域面板是可選的。每個邊緣區域面板可通過拖拽邊框調整尺寸，也可以通過點擊折疊觸發器來折疊面板。布局（layout）可以嵌套，因此用戶可建立復雜的布局（官註）。
比如下邊這個Layout只保存了center和east
1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>Easy UI</title> 5 <link rel="stylesheet" type="text/css"href="./css/easyui.css"> 6 <link rel="stylesheet" type="text/css" href="./css/icon.css"> 7 <link rel="stylesheet" type="text/css" href="./css/demo.css"> 8 <script type="text/javascript" src="./js/jquery.min.js"></script> 9 <script type="text/javascript" src="./js/jquery.easyui.min.js"></script> 10 </head> 11 <body > 12 <div > 13 <div class="easyui-layout" style="width:100%;height:100px;"> 14 <!-- East region --> 15 <div data-options="region:‘east‘ ,collapsible: true ,border: true ,collapsed:true" style="width: 800px"> 16 <div> 17 <h1>我是需要彈出的部分</h1> 18 </div> 19 20 <!--Center region --> 21 <div data-options="region:‘center‘,border: true" > 22 <div> 23 <h1>我是默認展示的部分</h1> 24 </div> 25 </div> 26 </div> 27 </body> 28 </html>
效果如下：
第二步，使east面板默認隱藏
為了實現這個效果可是沒少走彎路，剛開始查找到layout有一下的方法：
於是自然而然的想到在頁面加載的時候執行collapse方法，使面板折疊起來。但是這樣有一個問題就是每次加載頁面面板會有一個從中間向右邊滑動的效果，於是就想到給east面板加一個id，用jQuery和JS來控制面板的隱藏和顯示。
$("#id").hide(); $("#id").show();//jQuery語法
document.getElementById("id").style.visibility="hidden"；//顯示visible，此方法隱藏後頁面的位置還會被控件占用，顯示空白
document.getElementById("id").style.display="none";//顯示為inline，此方法隱藏後頁面的位置不會被占用
如此以來看似是解決了問題，但終究還是圖樣圖森破，每次點擊展示隱藏east面板的時候都會有小小的bug。做到後來出現了不同分辨率下調節region大小的問題，於是在尋找解決方法的時候發現了另一個比較完美簡便的方法：直接在region定義的style裏設置collapsed=“true”即可。看到這裏恍然大悟，果然什麽東西都沒有絕對，本以為表中的方法屬性已經全了，沒想到還是有漏網之魚的。就這樣輕易解決了使east面板在頁面加載的時候隱藏的效果。
<div data-options="region:‘east‘,collapsed:true ,collapsible: true ,border: false " id="eastpart">
第三步，實現根據窗口大小改變面板大小
在實際使用中，不同用戶的顯示器分辨率各不相同，頁面在的顯示效果也不盡相同，為此需要根據當前顯示窗口的大小調整面板。實現這個效果也是非常的容易，只需要寫一個resize方法，每次窗口變化都在JS中調用該方法即可。
$(‘#subWrap‘).layout(‘panel‘, ‘east‘).panel(‘resize‘,{width:300});
$(‘#subWrap‘).layout(‘resize‘);
以下是對應的代碼實現
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Complex Layout - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/themes/icon.css"> <link rel="stylesheet" type="text/css" href="../demo.css"> <script type="text/javascript" src="http://www.cnblogs.com/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="http://www.cnblogs.com/jquery.easyui.min.js"></script> <script> $(function(){ cover(); $(window).resize(function(){ //瀏覽器窗口變化 cover(); }); }); function cover(){ var win_width = $(window).width(); $(‘#subWrap‘).layout(‘panel‘, ‘east‘).panel(‘resize‘,{width:win_width/3}); $(‘#subWrap‘).layout(‘resize‘); } </script> </head> <body> <div id="subWrap" class="easyui-layout" fit="true"> <div data-options="region:‘north‘" style="height:50px"></div> <div data-options="region:‘south‘,split:true" style="height:50px;"></div> <div data-options="region:‘east‘,split:true" title="East" ></div> <div data-options="region:‘west‘,split:true" title="West" style="width:180px;" ></div> <div data-options="region:‘center‘,title:‘Main Title‘,iconCls:‘icon-ok‘,fit:true"></div> </div> </body> </html>
第四步，幹掉region的收縮按鈕
在這個項目中，我們想通過點擊east region的折疊框來彈出整個面板，然後移開鼠標面板自動收回。如果誤點了收縮按鈕，那麽會觸發expand方法，那麽面板就不會有自動收回的效果了，因此需要幹掉這個收縮按鈕。我們在Easy UI的說明中找到了這個擴展，在使用前引用 jquery.layout.extend.js ，然後定義function。visible取true時顯示收縮按鈕，取false時隱藏按鈕。
function setRegionToolVisableState(flag){ $(‘#layout‘).layout(‘setRegionToolVisableState‘,{region:‘west‘,visible:flag}); }
最後，剩下的就是把這幾個小方法整合在一起，實現了點擊收縮框讓east面板自動收縮的功能，現在看起來可能會比較簡單，但是在實現的過程中也是踩了無數的坑，最後才找到這樣一個比較完善的方案。
感謝老鐵的點撥：http://www.cnblogs.com/tv151579/archive/2013/04/19/3029837.html 解決了resize問題。
隱藏收縮按鈕可參見：http://www.easyui.info/easyui/demo/layout/setRegionTool.html
使用EasyUI創建分頁對比效果