BJUI 转
B-JUI 前端框架
B-JUI（Bootstrap for DWZ）是一個(gè)富客戶端框架，基于DWZ-jUI富客戶端框架修改。
本文是B-JUI中文使用手冊，包括使用示例代碼，感興趣的同學(xué)參考下。
概覽
B-JUI僅有一個(gè)主頁面(document)，框架內(nèi)的所有子頁面將通過Ajax獲取后作為一個(gè)頁面片段附加到主頁面上，外部頁面則通過iframe嵌入主頁面， 本節(jié)介紹 B-JUI的主頁面結(jié)構(gòu)。
HTML5 文檔類型
同Bootstrap， B-JUI使用 HTML5 文檔類型，參照下面的格式進(jìn)行設(shè)置。
<!DOCTYPE html>
<html lang="zh-CN">
...
</html>
主頁面結(jié)構(gòu)(僅body部分)
主頁面由上（頁頭）、中左（導(dǎo)航菜單）、中右（工作區(qū)）、下（頁腳）四部分組成，其中左側(cè)導(dǎo)航菜單可收縮。結(jié)構(gòu)如下：
<header class="bjui-header" id="bjui-header">
<!-- 頁頭 -->
</header>
<div class="bjui-leftside" id="bjui-leftside">
<!-- 導(dǎo)航菜單 -->
</div>
<div id="bjui-container">
<!-- 工作區(qū) -->
</div>
<footer class="bjui-footer" id="bjui-footer">
<!-- 頁腳 -->
</footer>
子頁面（即頁面片段[后面簡稱：頁片]）結(jié)構(gòu)
頁片通常由兩部分組成，也可以只保留bjui-pageContent部分，其中bjui-pageContent部分可選bjui-headBar（頂部工具條）和bjui-footBar（底部工具條）。結(jié)構(gòu)如下：
<div class="bjui-pageHeader">
<!-- 頂部模塊[如：功能按鈕、搜索面板] -->
</div>
<div class="bjui-pageContent">
<div class="bjui-headBar">
<!-- 頂部工具條 -->
</div>
<div data-layout-h="0">
<!-- 內(nèi)容區(qū) -->
</div>
<div class="bjui-footBar">
<!-- 底部工具條 -->
</div>
</div>
data-layout-h 屬性表示該容器為頁片自適應(yīng)布局，當(dāng)值為0時(shí)，B-JUI會(huì)為該容器的高度自動(dòng)賦值為：本頁片總高度減去本頁片中的固定元素(bjui-pageHeader\bjui-headBar\bjui-footBar)高度。
data-layout-h 屬性值不等于0時(shí)，該容器高度為本頁片總高度減去屬性值。
需要自定義固定元素(塊級元素有效)，請為該元素添加屬性data-layout-fixed="true"
完整的頁片詳見B-JUI源代碼的table.html，僅bjui-pageContent部分的頁片詳見form.html
元素ID命名規(guī)范
因?yàn)楸究蚣苣J(rèn)所有內(nèi)容都位于一個(gè)Document中，所以為元素命名ID的時(shí)候需要做到唯一性，如果確實(shí)不可避免的會(huì)出現(xiàn)有重復(fù)ID的現(xiàn)象，需要操作當(dāng)前頁片的元素時(shí)，盡量用：
$.CurrentNavtab.find('#dom-id')，在當(dāng)前標(biāo)簽工作區(qū)中查找指定ID的元素。
或 $.CurrentDialog.find('#dom-id')，在當(dāng)前彈窗中查找指定ID的元素。
標(biāo)簽式工作區(qū)(navtab)
B-JUI框架的整個(gè)工作區(qū)部分就是一個(gè)navtab組件，本組件位于主頁面的"#bjui-container"容器內(nèi)，固定的html結(jié)構(gòu)如下：
<div id="bjui-navtab" class="tabsPage">
<div class="tabsPageHeader">
<div class="tabsPageHeaderContent">
<ul class="navtab-tab nav nav-tabs">
<li data-tabid="main" class="main active"><a href="javascript:;"><span>我的主頁</span></a></li>
</ul>
</div>
<div class="tabsLeft"><i class="fa fa-angle-double-left"></i></div>
<div class="tabsRight"><i class="fa fa-angle-double-right"></i></div>
<div class="tabsMore"><i class="fa fa-angle-double-down"></i></div>
</div>
<ul class="tabsMoreList">
<li><a href="javascript:;">我的主頁</a></li>
</ul>
<div class="navtab-panel tabsPageContent layoutBox">
各頁片內(nèi)容區(qū)域
</div>
</div>
用法(如何創(chuàng)建一個(gè)navtab)：
DOM點(diǎn)擊觸發(fā)：
<a href="mytab.html" data-toggle="navtab" data-id="mynavtab" data-title="我的業(yè)務(wù)頁面">打開navtab</a>
<button type="button" class="btn-green" data-toggle="navtab" data-id="mynavtab" data-url="mytab.html" data-title="我的業(yè)務(wù)頁面">打開navtab</button>
jQuery：
$(selector).navtab({id:'標(biāo)簽的id', url:'載入頁片的url', title:'標(biāo)簽的標(biāo)題'})
取得當(dāng)前navtab的內(nèi)容容器：$.CurrentNavtab
參數(shù)：
名稱 類型 默認(rèn)值 描述 id string navtab 標(biāo)簽的ID，如果指定重復(fù)，將覆蓋現(xiàn)有的ID相同標(biāo)簽。 title string New tab 標(biāo)簽打開后顯示的名稱。 url string undefined 請求數(shù)據(jù)的url。 type string GET Http請求方式，可選‘GET/POST’。 data object {} 請求url時(shí)，需要發(fā)送的data數(shù)據(jù)。
方法：
這樣調(diào)用navtab的方法：
$(selector).navtab('方法名', 參數(shù)1, ..., 參數(shù)n)
如要切換到某個(gè)標(biāo)簽：
$(selector).navtab('switchTab', 標(biāo)簽ID)
方括號的參數(shù)，表示該參數(shù)可選。
可用的方法：
switchTab(tabid)：切換到某個(gè)標(biāo)簽。
refresh(tabid)：刷新某個(gè)標(biāo)簽。
reload(options)：重新載入某個(gè)標(biāo)簽，options同navtab默認(rèn)參數(shù)，如果未指定ID，則默認(rèn)重載入當(dāng)前標(biāo)簽。
closeTab(tabid)：關(guān)閉某個(gè)標(biāo)簽。
closeCurrentTab([tabid])：關(guān)閉當(dāng)前標(biāo)簽。
closeAllTab()：關(guān)閉所有標(biāo)簽。
事件：
這樣監(jiān)聽navtab的事件：
$(document).on('bjui.beforeLoadNavtab', function(e) {
var $navtab = $(e.target)
// do something...
})
名稱 描述 bjui.beforeLoadNavtab 載入標(biāo)簽內(nèi)容前的事件 bjui.beforeCloseNavtab 關(guān)閉標(biāo)簽前的事件
彈出窗口(dialog)
彈出窗口分為普通彈出窗口和模態(tài)彈出窗口，普通彈出窗口可通過taskBar組件進(jìn)行最小化等操作。彈出窗口的DOM結(jié)構(gòu)會(huì)放入Body中，結(jié)構(gòu)如下：
<div class="bjui-dialog bjui-dialog-container">
<div class="dialogHeader">
<!-- 最大化、最小化、關(guān)閉等按鈕區(qū) -->
<h1><!-- 標(biāo)題 --></h1>
</div>
<div class="dialogContent layoutBox unitBox">
<!-- 頁片內(nèi)容區(qū) -->
</div>
<!-- 用于調(diào)整大小的div片斷 -->
</div>
用法(如何創(chuàng)建一個(gè)dialog)：
DOM點(diǎn)擊觸發(fā)：
<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:'彈窗的標(biāo)題'})
取得當(dāng)前dialog：$.CurrentDialog
參數(shù)：
名稱 類型 默認(rèn)值 描述 id string navtab 彈窗的ID，如果指定重復(fù)，將覆蓋現(xiàn)有的ID相同彈窗。 title string New tab 彈窗打開后顯示的名稱。 url string undefined 請求數(shù)據(jù)的url。 type string GET Http請求方式，可選‘GET/POST’。 data object {} 請求url時(shí)，需要發(fā)送的data數(shù)據(jù)。 width int 500 彈窗的寬度。 height int 300 彈窗的高度。 max boolean false 打開彈窗時(shí)直接最大化。 mask boolean false 是否模態(tài)窗口。 resizable boolean true 可以調(diào)整彈窗的大小。 drawable boolean true 可以拖動(dòng)彈窗。 maxable boolean true 是否顯示最大化按鈕。 minable boolean true 是否顯示最小化按鈕（模態(tài)彈窗無效）。
方法：
調(diào)用方式同navtab： 如要關(guān)閉某個(gè)彈窗：
$(selector).dialog('close', 彈窗ID)
方括號的參數(shù)，表示該參數(shù)可選。
可用的方法：
switchDialog(id)：切換到某個(gè)彈窗(模態(tài)彈窗無效)。
refresh(id)：刷新某個(gè)彈窗。
reload(options)：重新載入某個(gè)彈窗，options同dialog默認(rèn)參數(shù)，如果未指定ID，則默認(rèn)重載入當(dāng)前彈窗。
close(id)：關(guān)閉某個(gè)彈窗。
closeCurrent()：關(guān)閉當(dāng)前彈窗。
事件：
這樣監(jiān)聽dialog的事件：
$(document).on('bjui.beforeLoadDialog', function(e) {
var $dialog = $(e.target)
// do something...
})
名稱 描述 bjui.beforeLoadDialog 載入彈窗內(nèi)容前的事件 bjui.beforeCloseDialog 關(guān)閉彈窗前的事件
Ajax
本節(jié)主要介紹B-JUI框架中的Ajax操作，回調(diào)函數(shù)等。
Ajax操作：
ajax搜索 - 主要用于搜索表單，分頁表單，例：B-JUI源碼"table.html"中的#pagerForm：
<form id="pagerForm" data-toggle="ajaxsearch" action="table.html" method="post">
ajax重置搜索 - 主要用于重置搜索表單，data-clear-query屬性告訴form是否清空查詢參數(shù)，僅保留分頁及字段排序信息，例：B-JUI源碼"table.html"中的清空查詢按鈕：
<a class="btn btn-orange" href="javascript:;" data-toggle="reloadsearch" data-clear-query="true" data-icon="undo">清空查詢</a>
ajax載入 - 主要用于為指定容器載入url的內(nèi)容，data-target屬性值為選擇器表達(dá)式，告訴ajax載入的內(nèi)容放到該容器，適合用來做局部刷新：
<a href="table-edit.html" data-toggle="ajaxload" data-target="#D11">加載內(nèi)容</a>
ajax動(dòng)作 - 主要用于執(zhí)行ajax命令，如“刪除”，data-confirm-msg屬性用于在操作前進(jìn)行確認(rèn)提示：
<a href="del.html" class="btn btn-red" data-toggle="doajax" data-confirm-msg="確定要?jiǎng)h除該行信息嗎？">刪除數(shù)據(jù)</a>
ajax導(dǎo)出 - 主要用于導(dǎo)出信息(下載文件)，data-confirm-msg屬性用于在操作前進(jìn)行確認(rèn)提示：
<a href="book1.xlsx" data-toggle="doexport" data-confirm-msg="確定要導(dǎo)出信息嗎？">導(dǎo)出全部</a>
ajax導(dǎo)出選中項(xiàng) - 主要用于導(dǎo)出選中項(xiàng)信息(下載文件)，data-confirm-msg屬性用于在操作前進(jìn)行確認(rèn)提示，data-idname屬性指定發(fā)送到后臺的字段名稱，默認(rèn)“ids”，data-group屬性用于指定復(fù)選框的name：
<a href="book1.xlsx" data-toggle="doexportchecked" data-confirm-msg="確定要導(dǎo)出選中項(xiàng)嗎？" data-idname="expids" data-group="ids">導(dǎo)出選中項(xiàng)</a>
ajax刪除選中項(xiàng) - 主要用于導(dǎo)出選中項(xiàng)信息(下載文件)，data-confirm-msg屬性用于在操作前進(jìn)行確認(rèn)提示，data-idname屬性指定發(fā)送到后臺的字段名稱，默認(rèn)“ids”，data-group屬性用于指定復(fù)選框的name：
<a href="del.html" data-toggle="dodelchecked" data-confirm-msg="確定要?jiǎng)h除選中項(xiàng)嗎？" data-idname="delids" data-group="ids">導(dǎo)出選中項(xiàng)</a>
Ajax回調(diào)：
ajaxsearch、doajax、dodelchecked三種ajax操作支持自定義ajax回調(diào)函數(shù)，自定義的回調(diào)函數(shù)放到data-callback屬性，寫法如下：。
<a href="del.html" class="btn btn-red" data-toggle="doajax" data-confirm-msg="確定要?jiǎng)h除該行信息嗎？" data-callback="mycallback">刪除數(shù)據(jù)</a>
function mycallback(json) {
//do something...
}
服務(wù)端返回的JSON參數(shù)如下：
名稱 類型 描述 statusCode int 必選。狀態(tài)碼(ok = 200, error = 300, timeout = 301)，可以在BJUI.init時(shí)配置三個(gè)參數(shù)的默認(rèn)值。 message string 可選。信息內(nèi)容。 tabid string 可選。待刷新navtab id，多個(gè)id以英文逗號分隔開，當(dāng)前的navtab id不需要填寫，填寫后可能會(huì)導(dǎo)致當(dāng)前navtab重復(fù)刷新。 closeCurrent boolean 可選。是否關(guān)閉當(dāng)前窗口(navtab或dialog)。 forward string 可選。跳轉(zhuǎn)到某個(gè)url。 forwardConfirm string 可選。跳轉(zhuǎn)url前的確認(rèn)提示信息。
默認(rèn)的回調(diào)函數(shù)會(huì)根據(jù)當(dāng)前觸發(fā)元素的位置確定是刷新navtab還是dialog，或是局部div容器。
可調(diào)用的返回信息提示：
$(selector).bjuiajax('ajaxDone', json)
表格
表格的Class同Bootstrap，僅調(diào)整了padding值，使表格顯示得更緊湊。
.table 少量的padding和水平分隔線。
.table-striped 條紋狀表格 [IE8 不支持]。
.table-bordered 帶邊框表格。
.table-hover 附加鼠標(biāo)懸停效果。
表格表頭字段排序按鈕實(shí)現(xiàn)：
<th data-order-field="sex">姓名</th>
<th data-order-direction="asc" data-order-field="createtime">創(chuàng)建時(shí)間</th>
data-order-field=""屬性令本字段可排序，屬性值為與后臺交互的字段名稱。
data-order-direction屬性表示本字段的當(dāng)前排序狀態(tài)，可選值(asc/desc)
普通表格
普通的表格，可顯示列表狀條目，或布局表單，表頭字段可附加排序按鈕。
完整的實(shí)例詳見B-JUI源代碼的table.html。
固定表頭表格
表格的頭可固定住，可調(diào)整各列的寬度，表頭字段可附加排序按鈕。
<table data-toggle="tablefixed" data-width="100%" data-layout-h="0">
表格添加屬性data-toggle="tablefixed"后就會(huì)固定表頭，B-JUI默認(rèn)為固定的表頭的表格添加Class：table table-striped table-bordered table-hover，如果該table設(shè)置有Class，則以設(shè)置的為準(zhǔn)
data-width屬性可定義固定表格的寬度，默認(rèn)為"100%"，可設(shè)置大于100%或固定值，如：150%和1200都是合法的，超過navtab工作區(qū)的寬度時(shí)會(huì)出現(xiàn)橫向滾動(dòng)條。
完整的實(shí)例詳見B-JUI源代碼的table-fixed.html。
可編輯表格
用于需要?jiǎng)討B(tài)添加簡單行內(nèi)容的地方。
<table class="table table-bordered table-hover table-striped" data-toggle="tabledit" data-initnum="0" data-layout-h="0">
<thead>
<tr>
<th title="No."><input type="text" name="edit[#index#].id" class="no" data-rule="required" value="1" size="2"></th>
<th title="姓名"><input type="text" name="edit[#index#].name" data-rule="required" value="" size="5"></th>
<th title="" data-addtool="true" width="100">
<a href="javascript:;" class="btn btn-red row-del" data-confirm-msg="確定要?jiǎng)h除該行信息嗎？">刪</a>
</th>
</tr>
</thead>
</table>
實(shí)現(xiàn)步驟：
表格添加屬性data-toggle="tablefixed"；
thead中添加上對應(yīng)的表單信息，字段名放到title屬性上；
若想在某列上顯示添加按鈕，需在對應(yīng)列上添加屬性data-addtool="true"；
若每行顯示刪除按鈕，需為刪除按鈕添加Classrow-del，如果要確認(rèn)才能刪除，需為刪除按鈕添加屬性data-confirm-msg="刪除提示信息"。
表格的data-initnum屬性，表示載入本頁片時(shí)，初始化的添加行數(shù)，值為0時(shí)不需寫。
外部觸發(fā)添加行事件：
按鈕式：
<button type="button" class="btn-green" data-toggle="tableditadd" data-target="#tabledit1" data-num="1">添加編輯行</button>
data-target屬性設(shè)置編輯表格的jQuery選擇器，data-num屬性設(shè)置點(diǎn)擊時(shí)添加的行數(shù)。
jQuery：$(selector).tabledit('add', 編輯表格的jQuery對象, 待添加的行數(shù))
$(selector).tabledit('add', $('#tabledit1'), 2)
完整的實(shí)例詳見B-JUI源代碼的table-edit.html。
B-JUI（Bootstrap for DWZ）是一個(gè)富客戶端框架，基于DWZ-jUI富客戶端框架修改。
本文是B-JUI中文使用手冊，包括使用示例代碼，感興趣的同學(xué)參考下。
概覽
B-JUI僅有一個(gè)主頁面(document)，框架內(nèi)的所有子頁面將通過Ajax獲取后作為一個(gè)頁面片段附加到主頁面上，外部頁面則通過iframe嵌入主頁面， 本節(jié)介紹 B-JUI的主頁面結(jié)構(gòu)。
HTML5 文檔類型
同Bootstrap， B-JUI使用 HTML5 文檔類型，參照下面的格式進(jìn)行設(shè)置。
<!DOCTYPE html>
<html lang="zh-CN">
...
</html>
主頁面結(jié)構(gòu)(僅body部分)
主頁面由上（頁頭）、中左（導(dǎo)航菜單）、中右（工作區(qū)）、下（頁腳）四部分組成，其中左側(cè)導(dǎo)航菜單可收縮。結(jié)構(gòu)如下：
<header class="bjui-header" id="bjui-header">
<!-- 頁頭 -->
</header>
<div class="bjui-leftside" id="bjui-leftside">
<!-- 導(dǎo)航菜單 -->
</div>
<div id="bjui-container">
<!-- 工作區(qū) -->
</div>
<footer class="bjui-footer" id="bjui-footer">
<!-- 頁腳 -->
</footer>
子頁面（即頁面片段[后面簡稱：頁片]）結(jié)構(gòu)
頁片通常由兩部分組成，也可以只保留bjui-pageContent部分，其中bjui-pageContent部分可選bjui-headBar（頂部工具條）和bjui-footBar（底部工具條）。結(jié)構(gòu)如下：
<div class="bjui-pageHeader">
<!-- 頂部模塊[如：功能按鈕、搜索面板] -->
</div>
<div class="bjui-pageContent">
<div class="bjui-headBar">
<!-- 頂部工具條 -->
</div>
<div data-layout-h="0">
<!-- 內(nèi)容區(qū) -->
</div>
<div class="bjui-footBar">
<!-- 底部工具條 -->
</div>
</div>
data-layout-h 屬性表示該容器為頁片自適應(yīng)布局，當(dāng)值為0時(shí)，B-JUI會(huì)為該容器的高度自動(dòng)賦值為：本頁片總高度減去本頁片中的固定元素(bjui-pageHeader\bjui-headBar\bjui-footBar)高度。
data-layout-h 屬性值不等于0時(shí)，該容器高度為本頁片總高度減去屬性值。
需要自定義固定元素(塊級元素有效)，請為該元素添加屬性data-layout-fixed="true"
完整的頁片詳見B-JUI源代碼的table.html，僅bjui-pageContent部分的頁片詳見form.html
元素ID命名規(guī)范
因?yàn)楸究蚣苣J(rèn)所有內(nèi)容都位于一個(gè)Document中，所以為元素命名ID的時(shí)候需要做到唯一性，如果確實(shí)不可避免的會(huì)出現(xiàn)有重復(fù)ID的現(xiàn)象，需要操作當(dāng)前頁片的元素時(shí)，盡量用：
$.CurrentNavtab.find('#dom-id')，在當(dāng)前標(biāo)簽工作區(qū)中查找指定ID的元素。
或 $.CurrentDialog.find('#dom-id')，在當(dāng)前彈窗中查找指定ID的元素。
標(biāo)簽式工作區(qū)(navtab)
B-JUI框架的整個(gè)工作區(qū)部分就是一個(gè)navtab組件，本組件位于主頁面的"#bjui-container"容器內(nèi)，固定的html結(jié)構(gòu)如下：
<div id="bjui-navtab" class="tabsPage">
<div class="tabsPageHeader">
<div class="tabsPageHeaderContent">
<ul class="navtab-tab nav nav-tabs">
<li data-tabid="main" class="main active"><a href="javascript:;"><span>我的主頁</span></a></li>
</ul>
</div>
<div class="tabsLeft"><i class="fa fa-angle-double-left"></i></div>
<div class="tabsRight"><i class="fa fa-angle-double-right"></i></div>
<div class="tabsMore"><i class="fa fa-angle-double-down"></i></div>
</div>
<ul class="tabsMoreList">
<li><a href="javascript:;">我的主頁</a></li>
</ul>
<div class="navtab-panel tabsPageContent layoutBox">
各頁片內(nèi)容區(qū)域
</div>
</div>
用法(如何創(chuàng)建一個(gè)navtab)：
DOM點(diǎn)擊觸發(fā)：
<a href="mytab.html" data-toggle="navtab" data-id="mynavtab" data-title="我的業(yè)務(wù)頁面">打開navtab</a>
<button type="button" class="btn-green" data-toggle="navtab" data-id="mynavtab" data-url="mytab.html" data-title="我的業(yè)務(wù)頁面">打開navtab</button>
jQuery：
$(selector).navtab({id:'標(biāo)簽的id', url:'載入頁片的url', title:'標(biāo)簽的標(biāo)題'})
取得當(dāng)前navtab的內(nèi)容容器：$.CurrentNavtab
參數(shù)：
名稱 類型 默認(rèn)值 描述 id string navtab 標(biāo)簽的ID，如果指定重復(fù)，將覆蓋現(xiàn)有的ID相同標(biāo)簽。 title string New tab 標(biāo)簽打開后顯示的名稱。 url string undefined 請求數(shù)據(jù)的url。 type string GET Http請求方式，可選‘GET/POST’。 data object {} 請求url時(shí)，需要發(fā)送的data數(shù)據(jù)。
方法：
這樣調(diào)用navtab的方法：
$(selector).navtab('方法名', 參數(shù)1, ..., 參數(shù)n)
如要切換到某個(gè)標(biāo)簽：
$(selector).navtab('switchTab', 標(biāo)簽ID)
方括號的參數(shù)，表示該參數(shù)可選。
可用的方法：
switchTab(tabid)：切換到某個(gè)標(biāo)簽。
refresh(tabid)：刷新某個(gè)標(biāo)簽。
reload(options)：重新載入某個(gè)標(biāo)簽，options同navtab默認(rèn)參數(shù)，如果未指定ID，則默認(rèn)重載入當(dāng)前標(biāo)簽。
closeTab(tabid)：關(guān)閉某個(gè)標(biāo)簽。
closeCurrentTab([tabid])：關(guān)閉當(dāng)前標(biāo)簽。
closeAllTab()：關(guān)閉所有標(biāo)簽。
事件：
這樣監(jiān)聽navtab的事件：
$(document).on('bjui.beforeLoadNavtab', function(e) {
var $navtab = $(e.target)
// do something...
})
名稱 描述 bjui.beforeLoadNavtab 載入標(biāo)簽內(nèi)容前的事件 bjui.beforeCloseNavtab 關(guān)閉標(biāo)簽前的事件
彈出窗口(dialog)
彈出窗口分為普通彈出窗口和模態(tài)彈出窗口，普通彈出窗口可通過taskBar組件進(jìn)行最小化等操作。彈出窗口的DOM結(jié)構(gòu)會(huì)放入Body中，結(jié)構(gòu)如下：
<div class="bjui-dialog bjui-dialog-container">
<div class="dialogHeader">
<!-- 最大化、最小化、關(guān)閉等按鈕區(qū) -->
<h1><!-- 標(biāo)題 --></h1>
</div>
<div class="dialogContent layoutBox unitBox">
<!-- 頁片內(nèi)容區(qū) -->
</div>
<!-- 用于調(diào)整大小的div片斷 -->
</div>
用法(如何創(chuàng)建一個(gè)dialog)：
DOM點(diǎn)擊觸發(fā)：
<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:'彈窗的標(biāo)題'})
取得當(dāng)前dialog：$.CurrentDialog
參數(shù)：
名稱 類型 默認(rèn)值 描述 id string navtab 彈窗的ID，如果指定重復(fù)，將覆蓋現(xiàn)有的ID相同彈窗。 title string New tab 彈窗打開后顯示的名稱。 url string undefined 請求數(shù)據(jù)的url。 type string GET Http請求方式，可選‘GET/POST’。 data object {} 請求url時(shí)，需要發(fā)送的data數(shù)據(jù)。 width int 500 彈窗的寬度。 height int 300 彈窗的高度。 max boolean false 打開彈窗時(shí)直接最大化。 mask boolean false 是否模態(tài)窗口。 resizable boolean true 可以調(diào)整彈窗的大小。 drawable boolean true 可以拖動(dòng)彈窗。 maxable boolean true 是否顯示最大化按鈕。 minable boolean true 是否顯示最小化按鈕（模態(tài)彈窗無效）。
方法：
調(diào)用方式同navtab： 如要關(guān)閉某個(gè)彈窗：
$(selector).dialog('close', 彈窗ID)
方括號的參數(shù)，表示該參數(shù)可選。
可用的方法：
switchDialog(id)：切換到某個(gè)彈窗(模態(tài)彈窗無效)。
refresh(id)：刷新某個(gè)彈窗。
reload(options)：重新載入某個(gè)彈窗，options同dialog默認(rèn)參數(shù)，如果未指定ID，則默認(rèn)重載入當(dāng)前彈窗。
close(id)：關(guān)閉某個(gè)彈窗。
closeCurrent()：關(guān)閉當(dāng)前彈窗。
事件：
這樣監(jiān)聽dialog的事件：
$(document).on('bjui.beforeLoadDialog', function(e) {
var $dialog = $(e.target)
// do something...
})
名稱 描述 bjui.beforeLoadDialog 載入彈窗內(nèi)容前的事件 bjui.beforeCloseDialog 關(guān)閉彈窗前的事件
Ajax
本節(jié)主要介紹B-JUI框架中的Ajax操作，回調(diào)函數(shù)等。
Ajax操作：
ajax搜索 - 主要用于搜索表單，分頁表單，例：B-JUI源碼"table.html"中的#pagerForm：
<form id="pagerForm" data-toggle="ajaxsearch" action="table.html" method="post">
ajax重置搜索 - 主要用于重置搜索表單，data-clear-query屬性告訴form是否清空查詢參數(shù)，僅保留分頁及字段排序信息，例：B-JUI源碼"table.html"中的清空查詢按鈕：
<a class="btn btn-orange" href="javascript:;" data-toggle="reloadsearch" data-clear-query="true" data-icon="undo">清空查詢</a>
ajax載入 - 主要用于為指定容器載入url的內(nèi)容，data-target屬性值為選擇器表達(dá)式，告訴ajax載入的內(nèi)容放到該容器，適合用來做局部刷新：
<a href="table-edit.html" data-toggle="ajaxload" data-target="#D11">加載內(nèi)容</a>
ajax動(dòng)作 - 主要用于執(zhí)行ajax命令，如“刪除”，data-confirm-msg屬性用于在操作前進(jìn)行確認(rèn)提示：
<a href="del.html" class="btn btn-red" data-toggle="doajax" data-confirm-msg="確定要?jiǎng)h除該行信息嗎？">刪除數(shù)據(jù)</a>
ajax導(dǎo)出 - 主要用于導(dǎo)出信息(下載文件)，data-confirm-msg屬性用于在操作前進(jìn)行確認(rèn)提示：
<a href="book1.xlsx" data-toggle="doexport" data-confirm-msg="確定要導(dǎo)出信息嗎？">導(dǎo)出全部</a>
ajax導(dǎo)出選中項(xiàng) - 主要用于導(dǎo)出選中項(xiàng)信息(下載文件)，data-confirm-msg屬性用于在操作前進(jìn)行確認(rèn)提示，data-idname屬性指定發(fā)送到后臺的字段名稱，默認(rèn)“ids”，data-group屬性用于指定復(fù)選框的name：
<a href="book1.xlsx" data-toggle="doexportchecked" data-confirm-msg="確定要導(dǎo)出選中項(xiàng)嗎？" data-idname="expids" data-group="ids">導(dǎo)出選中項(xiàng)</a>
ajax刪除選中項(xiàng) - 主要用于導(dǎo)出選中項(xiàng)信息(下載文件)，data-confirm-msg屬性用于在操作前進(jìn)行確認(rèn)提示，data-idname屬性指定發(fā)送到后臺的字段名稱，默認(rèn)“ids”，data-group屬性用于指定復(fù)選框的name：
<a href="del.html" data-toggle="dodelchecked" data-confirm-msg="確定要?jiǎng)h除選中項(xiàng)嗎？" data-idname="delids" data-group="ids">導(dǎo)出選中項(xiàng)</a>
Ajax回調(diào)：
ajaxsearch、doajax、dodelchecked三種ajax操作支持自定義ajax回調(diào)函數(shù)，自定義的回調(diào)函數(shù)放到data-callback屬性，寫法如下：。
<a href="del.html" class="btn btn-red" data-toggle="doajax" data-confirm-msg="確定要?jiǎng)h除該行信息嗎？" data-callback="mycallback">刪除數(shù)據(jù)</a>
function mycallback(json) {
//do something...
}
服務(wù)端返回的JSON參數(shù)如下：
名稱 類型 描述 statusCode int 必選。狀態(tài)碼(ok = 200, error = 300, timeout = 301)，可以在BJUI.init時(shí)配置三個(gè)參數(shù)的默認(rèn)值。 message string 可選。信息內(nèi)容。 tabid string 可選。待刷新navtab id，多個(gè)id以英文逗號分隔開，當(dāng)前的navtab id不需要填寫，填寫后可能會(huì)導(dǎo)致當(dāng)前navtab重復(fù)刷新。 closeCurrent boolean 可選。是否關(guān)閉當(dāng)前窗口(navtab或dialog)。 forward string 可選。跳轉(zhuǎn)到某個(gè)url。 forwardConfirm string 可選。跳轉(zhuǎn)url前的確認(rèn)提示信息。
默認(rèn)的回調(diào)函數(shù)會(huì)根據(jù)當(dāng)前觸發(fā)元素的位置確定是刷新navtab還是dialog，或是局部div容器。
可調(diào)用的返回信息提示：
$(selector).bjuiajax('ajaxDone', json)
表格
表格的Class同Bootstrap，僅調(diào)整了padding值，使表格顯示得更緊湊。
.table 少量的padding和水平分隔線。
.table-striped 條紋狀表格 [IE8 不支持]。
.table-bordered 帶邊框表格。
.table-hover 附加鼠標(biāo)懸停效果。
表格表頭字段排序按鈕實(shí)現(xiàn)：
<th data-order-field="sex">姓名</th>
<th data-order-direction="asc" data-order-field="createtime">創(chuàng)建時(shí)間</th>
data-order-field=""屬性令本字段可排序，屬性值為與后臺交互的字段名稱。
data-order-direction屬性表示本字段的當(dāng)前排序狀態(tài)，可選值(asc/desc)
普通表格
普通的表格，可顯示列表狀條目，或布局表單，表頭字段可附加排序按鈕。
完整的實(shí)例詳見B-JUI源代碼的table.html。
固定表頭表格
表格的頭可固定住，可調(diào)整各列的寬度，表頭字段可附加排序按鈕。
<table data-toggle="tablefixed" data-width="100%" data-layout-h="0">
表格添加屬性data-toggle="tablefixed"后就會(huì)固定表頭，B-JUI默認(rèn)為固定的表頭的表格添加Class：table table-striped table-bordered table-hover，如果該table設(shè)置有Class，則以設(shè)置的為準(zhǔn)
data-width屬性可定義固定表格的寬度，默認(rèn)為"100%"，可設(shè)置大于100%或固定值，如：150%和1200都是合法的，超過navtab工作區(qū)的寬度時(shí)會(huì)出現(xiàn)橫向滾動(dòng)條。
完整的實(shí)例詳見B-JUI源代碼的table-fixed.html。
可編輯表格
用于需要?jiǎng)討B(tài)添加簡單行內(nèi)容的地方。
<table class="table table-bordered table-hover table-striped" data-toggle="tabledit" data-initnum="0" data-layout-h="0">
<thead>
<tr>
<th title="No."><input type="text" name="edit[#index#].id" class="no" data-rule="required" value="1" size="2"></th>
<th title="姓名"><input type="text" name="edit[#index#].name" data-rule="required" value="" size="5"></th>
<th title="" data-addtool="true" width="100">
<a href="javascript:;" class="btn btn-red row-del" data-confirm-msg="確定要?jiǎng)h除該行信息嗎？">刪</a>
</th>
</tr>
</thead>
</table>
實(shí)現(xiàn)步驟：
表格添加屬性data-toggle="tablefixed"；
thead中添加上對應(yīng)的表單信息，字段名放到title屬性上；
若想在某列上顯示添加按鈕，需在對應(yīng)列上添加屬性data-addtool="true"；
若每行顯示刪除按鈕，需為刪除按鈕添加Classrow-del，如果要確認(rèn)才能刪除，需為刪除按鈕添加屬性data-confirm-msg="刪除提示信息"。
表格的data-initnum屬性，表示載入本頁片時(shí)，初始化的添加行數(shù)，值為0時(shí)不需寫。
外部觸發(fā)添加行事件：
按鈕式：
<button type="button" class="btn-green" data-toggle="tableditadd" data-target="#tabledit1" data-num="1">添加編輯行</button>
data-target屬性設(shè)置編輯表格的jQuery選擇器，data-num屬性設(shè)置點(diǎn)擊時(shí)添加的行數(shù)。
jQuery：$(selector).tabledit('add', 編輯表格的jQuery對象, 待添加的行數(shù))
$(selector).tabledit('add', $('#tabledit1'), 2)
完整的實(shí)例詳見B-JUI源代碼的table-edit.html。
轉(zhuǎn)載于:https://www.cnblogs.com/sekai/p/5898906.html
總結(jié)
- 上一篇： python 钉钉机器人发送图片_Pyt
- 下一篇： 画图调子图间距_好看好用的桥梁工程图，你