如何在thinkphp中使用b-jui

B-JUI 前端框架

B-JUI（Bootstrap for DWZ）是壹個富客戶端框架，基於DWZ-jUI富客戶端框架修改。

本文是B-JUI中文使用手冊，包括使用示例代碼，感興趣的同學參考下。

概覽

B-JUI僅有壹個主頁面(document)，框架內的所有子頁面將通過Ajax獲取後作為壹個頁面片段附加到主頁面上，外部頁面則通過iframe嵌入主頁面，本節介紹 B-JUI的主頁面結構。

HTML5 文檔類型

同Bootstrap， B-JUI使用 HTML5 文檔類型，參照下面的格式進行設置。

<!DOCTYPE html>

...

</html>

主頁面結構(僅body部分)

主頁面由上（頁頭）、中左（導航菜單）、中右（工作區）、下（頁腳）四部分組成，其中左側導航菜單可收縮。結構如下：

</header>

</div>

</div>

</footer>

子頁面（即頁面片段[後面簡稱：頁片]）結構

頁片通常由兩部分組成，也可以只保留bjui-pageContent部分，其中bjui-pageContent部分可選bjui-headBar（頂部工具條）和bjui-footBar（底部工具條）。結構如下：

</div>

</div>

</div>

</div>

data-layout-h 屬性表示該容器為頁片自適應布局，當值為0時，B-JUI會為該容器的高度自動賦值為：本頁片總高度減去本頁片中的固定元素(bjui-pageHeader\bjui-headBar\bjui-footBar)高度。

data-layout-h 屬性值不等於0時，該容器高度為本頁片總高度減去屬性值。

需要自定義固定元素(塊級元素有效)，請為該元素添加屬性data-layout-fixed="true"

完整的頁片詳見B-JUI源代碼的table.html，僅bjui-pageContent部分的頁片詳見form.html

元素ID命名規範

因為本框架默認所有內容都位於壹個Document中，所以為元素命名ID的時候需要做到唯壹性，如果確實不可避免的會出現有重復ID的現象，需要操作當前頁片的元素時，盡量用：

$.CurrentNavtab.find('#dom-id')，在當前標簽工作區中查找指定ID的元素。

或 $.CurrentDialog.find('#dom-id')，在當前彈窗中查找指定ID的元素。

標簽式工作區(navtab)

B-JUI框架的整個工作區部分就是壹個navtab組件，本組件位於主頁面的"#bjui-container"容器內，固定的html結構如下：

</ul>

</div>

</div>

</ul>

各頁片內容區域

</div>

用法(如何創建壹個navtab)：

DOM點擊觸發：

<a href="mytab.html" data-toggle="navtab" data-id="mynavtab" data-title="我的業務頁面">打開navtab</a>

<button type="button" class="btn-green" data-toggle="navtab" data-id="mynavtab" data-url="mytab.html" data-title="我的業務頁面">打開navtab</button>

jQuery：

$(selector).navtab({id:'標簽的id', url:'載入頁片的url', title:'標簽的標題'})

取得當前navtab的內容容器：$.CurrentNavtab

參數：

名稱類型默認值描述 id string navtab 標簽的ID，如果指定重復，將覆蓋現有的ID相同標簽。 title string New tab 標簽打開後顯示的名稱。 url string undefined 請求數據的url。 type string GET Http請求方式，可選‘GET/POST’。 data object {} 請求url時，需要發送的data數據。

方法：

這樣調用navtab的方法：

$(selector).navtab('方法名', 參數1, ..., 參數n)

如要切換到某個標簽：

$(selector).navtab('switchTab', 標簽ID)

方括號的參數，表示該參數可選。

可用的方法：

switchTab(tabid)：切換到某個標簽。

refresh(tabid)：刷新某個標簽。

reload(options)：重新載入某個標簽，options同navtab默認參數，如果未指定ID，則默認重載入當前標簽。

closeTab(tabid)：關閉某個標簽。

closeCurrentTab([tabid])：關閉當前標簽。

closeAllTab()：關閉所有標簽。

事件：

這樣監聽navtab的事件：

$(document).on('bjui.beforeLoadNavtab', function(e) {

var $navtab = $(e.target)

// do something...

})

名稱描述 bjui.beforeLoadNavtab 載入標簽內容前的事件 bjui.beforeCloseNavtab 關閉標簽前的事件

彈出窗口(dialog)

彈出窗口分為普通彈出窗口和模態彈出窗口，普通彈出窗口可通過taskBar組件進行最小化等操作。彈出窗口的DOM結構會放入Body中，結構如下：

</div>

</div>

</div>

用法(如何創建壹個dialog)：

DOM點擊觸發：

<a href="mydialog.html" data-toggle="dialog" data-id="mydialog" data-title="我的彈出窗口">打開彈出窗口</a>

<button type="button" class="btn-green" data-toggle="dialog" data-id="mynavtab" data-url="mytab.html" data-title="我的彈出窗口">打開彈出窗口</button>

jQuery：

$(selector).dialog({id:'彈窗的id', url:'載入頁片的url', title:'彈窗的標題'})

取得當前dialog：$.CurrentDialog

參數：

名稱類型默認值描述 id string navtab 彈窗的ID，如果指定重復，將覆蓋現有的ID相同彈窗。 title string New tab 彈窗打開後顯示的名稱。 url string undefined 請求數據的url。 type string GET Http請求方式，可選‘GET/POST’。 data object {} 請求url時，需要發送的data數據。 width int 500 彈窗的寬度。 height int 300 彈窗的高度。 max boolean false 打開彈窗時直接最大化。 mask boolean false 是否模態窗口。 resizable boolean true 可以調整彈窗的大小。 drawable boolean true 可以拖動彈窗。 maxable boolean true 是否顯示最大化按鈕。 minable boolean true 是否顯示最小化按鈕（模態彈窗無效）。

方法：

調用方式同navtab：如要關閉某個彈窗：

$(selector).dialog('close', 彈窗ID)

方括號的參數，表示該參數可選。

可用的方法：

switchDialog(id)：切換到某個彈窗(模態彈窗無效)。

refresh(id)：刷新某個彈窗。

reload(options)：重新載入某個彈窗，options同dialog默認參數，如果未指定ID，則默認重載入當前彈窗。

close(id)：關閉某個彈窗。

closeCurrent()：關閉當前彈窗。

事件：

這樣監聽dialog的事件：

$(document).on('bjui.beforeLoadDialog', function(e) {

var $dialog = $(e.target)

// do something...

})

名稱描述 bjui.beforeLoadDialog 載入彈窗內容前的事件 bjui.beforeCloseDialog 關閉彈窗前的事件

Ajax

本節主要介紹B-JUI框架中的Ajax操作，回調函數等。

Ajax操作：

ajax搜索 - 主要用於搜索表單，分頁表單，例：B-JUI源碼"table.html"中的#pagerForm：

ajax重置搜索 - 主要用於重置搜索表單，data-clear-query屬性告訴form是否清空查詢參數，僅保留分頁及字段排序信息，例：B-JUI源碼"table.html"中的清空查詢按鈕：

ajax載入 - 主要用於為指定容器載入url的內容，data-target屬性值為選擇器表達式，告訴ajax載入的內容放到該容器，適合用來做局部刷新：

ajax動作 - 主要用於執行ajax命令，如“刪除”，data-confirm-msg屬性用於在操作前進行確認提示：

ajax導出 - 主要用於導出信息(下載文件)，data-confirm-msg屬性用於在操作前進行確認提示：

ajax導出選中項 - 主要用於導出選中項信息(下載文件)，data-confirm-msg屬性用於在操作前進行確認提示，data-idname屬性指定發送到後臺的字段名稱，默認“ids”，data-group屬性用於指定復選框的name：

<a href="book1.xlsx" data-toggle="doexportchecked" data-confirm-msg="確定要導出選中項嗎？" data-idname="expids" data-group="ids">導出選中項</a>

ajax刪除選中項 - 主要用於導出選中項信息(下載文件)，data-confirm-msg屬性用於在操作前進行確認提示，data-idname屬性指定發送到後臺的字段名稱，默認“ids”，data-group屬性用於指定復選框的name：

<a href="del.html" data-toggle="dodelchecked" data-confirm-msg="確定要刪除選中項嗎？" data-idname="delids" data-group="ids">導出選中項</a>

Ajax回調：

ajaxsearch、doajax、dodelchecked三種ajax操作支持自定義ajax回調函數，自定義的回調函數放到data-callback屬性，寫法如下：。

function mycallback(json) {

//do something...

}

服務端返回的JSON參數如下：

名稱類型描述 statusCode int 必選。狀態碼(ok = 200, error = 300, timeout = 301)，可以在BJUI.init時配置三個參數的默認值。 message string 可選。信息內容。 tabid string 可選。待刷新navtab id，多個id以英文逗號分隔開，當前的navtab id不需要填寫，填寫後可能會導致當前navtab重復刷新。 closeCurrent boolean 可選。是否關閉當前窗口(navtab或dialog)。 forward string 可選。跳轉到某個url。 forwardConfirm string 可選。跳轉url前的確認提示信息。

默認的回調函數會根據當前觸發元素的位置確定是刷新navtab還是dialog，或是局部div容器。

可調用的返回信息提示：

$(selector).bjuiajax('ajaxDone', json)

表格

表格的Class同Bootstrap，僅調整了padding值，使表格顯示得更緊湊。

.table 少量的padding和水平分隔線。

.table-striped 條紋狀表格 [IE8 不支持]。

.table-bordered 帶邊框表格。

.table-hover 附加鼠標懸停效果。

表格表頭字段排序按鈕實現：

data-order-field=""屬性令本字段可排序，屬性值為與後臺交互的字段名稱。

data-order-direction屬性表示本字段的當前排序狀態，可選值(asc/desc)