一. jeeSite之前端彈框插件的應用
1.01 簡述彈框插件
jeeSite前端提示框架主要使用了jBox2.3插件(關於jBox此處不做介紹了,可自行百度查閱)。JBox手冊https://stephanwagner.me/jBox/documentation。並對其進行了封裝封裝后的js路徑:
/creditrh/src/main/webapp/static/common/jeesite.js。
jBox項目下的路徑為:/creditrh/src/main/webapp/static/jquery-jbox/2.3/jquery.jBox-2.3.js。
jBox彈出層基礎配置參數:
對應的配置也都在這里面。
下面就對其應用實例做簡單說明:
1.01.1 消息提示框:
最常見的應用,帶有確定和取消操作的提示框。jeeSite下對其進行了封裝使用時可直接
在js或者標簽上定義的單擊事件中直接使用 如:(前提當前頁面下引用jeesite.js插件)
A.標簽上直接定義使用
onclick="return confirmx('確認要刪嗎?', this.href)"
B.自定義的js中使用:
confirmx('確認要刪嗎?', this.href)
查看封裝的js代碼,不難發現使用confirmx(mess,href)方法需要傳遞兩個參數一個是提示內容,令一個是點擊確定后跳轉的路徑 都可自定義。
同樣也可根據自己的業務需求定制屬於自己的確認對話框:代碼如下
function 起個名字(mess, 自定義參數等, closed){
top.$.jBox.confirm(mess,'系統提示',function(v,h,f){
if(v=='ok'){
此處可以處理自己的業務需要(在提示框被點擊確定后), 自定義參數等
}
},{buttonsFocus:1, closed:function(){
if (typeof closed == 'function') {
closed();
}
}});
top.$('.jbox-body .jbox-icon').css('top','55px');
return false;
}
又如:提示框系統改造的是alert並取方法名為alertx;
此方法也可改造成自己業務需要的方法 如:mess,提示信息,canshu,此處為表單提交的formid“#xxxx”
function alertT(mess,canshu){
top.$.jBox.info(mess, '提示', {closed:function(){
if (typeof closed == 'function') {
closed();
}
$(canshu).submit();//也可定義其他自己所需要的業務js
}});
top.$('.jbox-body .jbox-icon').css('top','55px');
}
同樣 其他的彈框提示加載信息提示等 也可根據自己的業務需要自己重寫或者直接使用封裝的js使用。
2. 方便好用的select下拉框封裝組件。
2.0.1框架自帶封裝的下拉框組件,經典用法。見於系統字典配置頁面下來選;實現大致原來,字典配置的參數寫入數據庫,項目啟動時加載數據庫參數配置,用到的地方從緩存中獲取。
<form:select id="guaranteeWay" path="guaranteeWay" class="input-xlarge required" style="width:120px;"> <form:option value="" label="請選擇" /> <form:options items="${fns:getDictList('bank_prodect_guaranteeWay')}" itemLabel="label" itemValue="value" htmlEscape="false"/> </form:select>
${fns:getDictList('字典中的標簽屬性')};此下拉選亦可改成后台動態下拉選;只需將
items="${fns:getDictList('bank_prodect_guaranteeWay')}"改為
items="${后台傳回的一個list}"即可使用。
更多好用功能可參考項目doc文檔。
后續更多項目心得繼續補充中。。。。