1.å¦ä½å¨thinkphpä¸ä½¿ç¨b-jui
å¦ä½å¨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 lang="zh-CN">
...
</html>
主页é¢ç»æ(ä» bodyé¨å)
主页é¢ç±ä¸ï¼é¡µå¤´ï¼ãä¸å·¦ï¼å¯¼èªèåï¼ãä¸å³ï¼å·¥ä½åºï¼ãä¸ï¼é¡µèï¼åé¨åç»æï¼å ¶ä¸å·¦ä¾§å¯¼èªèåå¯æ¶ç¼©ãç»æå¦ä¸ï¼
<header class="bjui-header" id="bjui-header">
<!-- 页头 -->
</header>
<div class="bjui-leftside" id="bjui-leftside">
<!-- 导èªèå -->
</div>
<div id="bjui-container">
<!-- å·¥ä½åº -->
</div>
<footer class="bjui-footer" id="bjui-footer">
<!-- 页è -->
</footer>
å页é¢ï¼å³é¡µé¢ç段[åé¢ç®ç§°ï¼é¡µç]ï¼ç»æ
页çé常ç±ä¸¤é¨åç»æï¼ä¹å¯ä»¥åªä¿çbjui-pageContenté¨åï¼å ¶ä¸bjui-pageContenté¨åå¯ébjui-headBarï¼é¡¶é¨å·¥å ·æ¡ï¼åbjui-footBarï¼åºé¨å·¥å ·æ¡ï¼ãç»æå¦ä¸ï¼
<div class="bjui-pageHeader">
<!-- 顶é¨æ¨¡å[å¦ï¼åè½æé®ãæç´¢é¢æ¿] -->
</div>
<div class="bjui-pageContent">
<div class="bjui-headBar">
<!-- 顶é¨å·¥å ·æ¡ -->
</div>
<div data-layout-h="0">
<!-- å å®¹åº -->
</div>
<div class="bjui-footBar">
<!-- åºé¨å·¥å ·æ¡ -->
</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ç»æå¦ä¸ï¼
<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">
å页çå 容åºå
</div>
</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 class="bjui-dialog bjui-dialog-container">
<div class="dialogHeader">
<!-- æ大åãæå°åãå ³éçæé®åº -->
<h1><!-- æ é¢ --></h1>
</div>
<div class="dialogContent layoutBox unitBox">
<!-- 页çå å®¹åº -->
</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 å¼¹çªç宽度ã height int å¼¹çªçé«åº¦ã 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ï¼
<form id="pagerForm" data-toggle="ajaxsearch" action="table.html" method="post">
ajaxéç½®æç´¢ - 主è¦ç¨äºéç½®æ索表åï¼data-clear-queryå±æ§åè¯formæ¯å¦æ¸ 空æ¥è¯¢åæ°ï¼ä» ä¿çå页åå段æåºä¿¡æ¯ï¼ä¾ï¼B-JUIæºç "table.html"ä¸çæ¸ ç©ºæ¥è¯¢æé®ï¼
<a class="btn btn-orange" href="javascript:;" data-toggle="reloadsearch" data-clear-query="true" data-icon="undo">æ¸ ç©ºæ¥è¯¢</a>
ajaxè½½å ¥ - 主è¦ç¨äºä¸ºæå®å®¹å¨è½½å ¥urlçå 容ï¼data-targetå±æ§å¼ä¸ºéæ©å¨è¡¨è¾¾å¼ï¼åè¯ajaxè½½å ¥çå 容æ¾å°è¯¥å®¹å¨ï¼éåç¨æ¥åå±é¨å·æ°ï¼
<a href="table-edit.html" data-toggle="ajaxload" data-target="#D">å è½½å 容</a>
ajaxå¨ä½ - 主è¦ç¨äºæ§è¡ajaxå½ä»¤ï¼å¦âå é¤âï¼data-confirm-msgå±æ§ç¨äºå¨æä½åè¿è¡ç¡®è®¤æ示ï¼
<a href="del.html" class="btn btn-red" data-toggle="doajax" data-confirm-msg="ç¡®å®è¦å é¤è¯¥è¡ä¿¡æ¯åï¼">å é¤æ°æ®</a>
ajaxå¯¼åº - 主è¦ç¨äºå¯¼åºä¿¡æ¯(ä¸è½½æ件)ï¼data-confirm-msgå±æ§ç¨äºå¨æä½åè¿è¡ç¡®è®¤æ示ï¼
<a href="book1.xlsx" data-toggle="doexport" data-confirm-msg="ç¡®å®è¦å¯¼åºä¿¡æ¯åï¼">导åºå ¨é¨</a>
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å±æ§ï¼åæ³å¦ä¸ï¼ã
<a href="del.html" class="btn btn-red" data-toggle="doajax" data-confirm-msg="ç¡®å®è¦å é¤è¯¥è¡ä¿¡æ¯åï¼" data-callback="mycallback">å é¤æ°æ®</a>
function mycallback(json) {
//do something...
}
æå¡ç«¯è¿åçJSONåæ°å¦ä¸ï¼
å称 ç±»å æè¿° statusCode int å¿ éãç¶æç (ok = , error = , timeout = )ï¼å¯ä»¥å¨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 éå é¼ æ æ¬åææã
è¡¨æ ¼è¡¨å¤´å段æåºæé®å®ç°ï¼
<th data-order-field="sex">å§å</th>
<th data-order-direction="asc" data-order-field="createtime">å建æ¶é´</th>
data-order-field=""å±æ§ä»¤æ¬å段å¯æåºï¼å±æ§å¼ä¸ºä¸åå°äº¤äºçå段å称ã
data-order-directionå±æ§è¡¨ç¤ºæ¬å段çå½åæåºç¶æï¼å¯éå¼(asc/desc)
æ®éè¡¨æ ¼
æ®éçè¡¨æ ¼ï¼å¯æ¾ç¤ºå表ç¶æ¡ç®ï¼æå¸å±è¡¨åï¼è¡¨å¤´å段å¯éå æåºæé®ã
å®æ´çå®ä¾è¯¦è§B-JUIæºä»£ç çtable.htmlã
åºå®è¡¨å¤´è¡¨æ ¼
è¡¨æ ¼ç头å¯åºå®ä½ï¼å¯è°æ´ååç宽度ï¼è¡¨å¤´å段å¯éå æåºæé®ã
<table data-toggle="tablefixed" data-width="%" data-layout-h="0">
è¡¨æ ¼æ·»å å±æ§data-toggle="tablefixed"åå°±ä¼åºå®è¡¨å¤´ï¼B-JUIé»è®¤ä¸ºåºå®ç表头çè¡¨æ ¼æ·»å Classï¼table table-striped table-bordered table-hoverï¼å¦æ该table设置æClassï¼å以设置ç为å
data-widthå±æ§å¯å®ä¹åºå®è¡¨æ ¼ç宽度ï¼é»è®¤ä¸º"%"ï¼å¯è®¾ç½®å¤§äº%æåºå®å¼ï¼å¦ï¼%åé½æ¯åæ³çï¼è¶ è¿navtabå·¥ä½åºç宽度æ¶ä¼åºç°æ¨ªåæ»å¨æ¡ã
å®æ´çå®ä¾è¯¦è§B-JUIæºä»£ç çtable-fixed.htmlã
å¯ç¼è¾è¡¨æ ¼
ç¨äºéè¦å¨ææ·»å ç®åè¡å 容çå°æ¹ã
<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="">
<a href="javascript:;" class="btn btn-red row-del" data-confirm-msg="ç¡®å®è¦å é¤è¯¥è¡ä¿¡æ¯åï¼">å </a>
</th>
</tr>
</thead>
</table>
å®ç°æ¥éª¤ï¼
è¡¨æ ¼æ·»å å±æ§data-toggle="tablefixed"ï¼
theadä¸æ·»å ä¸å¯¹åºç表åä¿¡æ¯ï¼å段åæ¾å°titleå±æ§ä¸ï¼
è¥æ³å¨æåä¸æ¾ç¤ºæ·»å æé®ï¼éå¨å¯¹åºåä¸æ·»å å±æ§data-addtool="true"ï¼
è¥æ¯è¡æ¾ç¤ºå é¤æé®ï¼é为å é¤æé®æ·»å Classrow-delï¼å¦æè¦ç¡®è®¤æè½å é¤ï¼é为å é¤æé®æ·»å å±æ§data-confirm-msg="å é¤æ示信æ¯"ã
è¡¨æ ¼çdata-initnumå±æ§ï¼è¡¨ç¤ºè½½å ¥æ¬é¡µçæ¶ï¼åå§åçæ·»å è¡æ°ï¼å¼ä¸º0æ¶ä¸éåã
å¤é¨è§¦åæ·»å è¡äºä»¶ï¼
æé®å¼ï¼
<button type="button" class="btn-green" data-toggle="tableditadd" data-target="#tabledit1" data-num="1">æ·»å ç¼è¾è¡</button>
data-targetå±æ§è®¾ç½®ç¼è¾è¡¨æ ¼çjQueryéæ©å¨ï¼data-numå±æ§è®¾ç½®ç¹å»æ¶æ·»å çè¡æ°ã
jQueryï¼$(selector).tabledit('add', ç¼è¾è¡¨æ ¼çjQuery对象, å¾ æ·»å çè¡æ°)
$(selector).tabledit('add', $('#tabledit1'), 2)
å®æ´çå®ä¾è¯¦è§B-JUIæºä»£ç çtable-edit.htmlã
2024-12-24 10:40
2024-12-24 10:30
2024-12-24 10:04
2024-12-24 09:27
2024-12-24 09:23
2024-12-24 09:21
2024-12-24 09:11
2024-12-24 08:40