Smarttang.BootStrap.jsBootStrap 下使用的特殊前端功能
BootStrap 下使用的特殊前端功能。
簡介
這個(gè)js插件匯聚了我還有之前37游戲的一個(gè)前端同事（已離職）做的一些前端功能，因?yàn)樽约航?jīng)常都要使用，所以封裝了下，方便自己加載使用。google了下，做這樣功能的人挺多的，但是貌似都沒有做成一個(gè)獨(dú)立的插件，so，這個(gè)東西就誕生了，我會(huì)持續(xù)維護(hù)，因?yàn)楫?dāng)前我兼任前端、后端、底層的開發(fā)。前端交互會(huì)用到的功能我都會(huì)封裝起來，希望給有需要的朋友帶來幫助。：）
配置
在使用前，請關(guān)注下是否加載的jquery還有bootstrap。
<script src="js/jquery-2.2.1.min.js"></script> <script src="js/bootstrap.min.js"></script>
在確定都加載了之后，加載這個(gè)插件。
<script src="js/smarttang.bootstrap.js"></script>
要注意：先后順序??！
用法
加載完成后，可以在console里面輸入兩個(gè)變量，可以看到具體的一些方法。
-> huineng
Object {}
getFormData: function:(...)
queryStr2Object: function:(...)
-> smarttang
Object {}
modal: function(...)
tables: function(...)
在頁面里面如何調(diào)用？
smarttang.modal(...) smarttang.tables_init(...) smarttang.tables_reload(...)
有些函數(shù)是有返回值的，比如tables返回的是一個(gè)對象，方便reload，這個(gè)根據(jù)自己的需求使用就好。 當(dāng)然，你也可以改動(dòng)一些配置來達(dá)到自己的目的，可以自己隨意修改。：）
Demo
datatables 使用.
// 初始化
var department_tables = smarttang.tables_init(
'.department-manager',
{
url: OBJECT_DEPARTMENT,
type: 'POST',
data: {
'obj':'list'
}
},
[
{
data: 'department',
width:'30%'
},
{
data: 'department_manager',
width:'15%',
},
{
data: 'department_count',
width:'20%',
render: function (data, type, row, meta) {
return '<span class="badge">'+ data + '</span>';
}
}
],
''
);
// 修改、刪除、添加完成后，reload表格。
smarttang.tables_reload(department_tables);
SmartAjax 使用.(無返回)
function add()
{
var form_json = huineng.getFormData($('#department_add_form'));
smarttang.SmartAjax(
OBJECT_DEPARTMENT,
huineng.mergeData(form_json,{'obj':'add'}),
function(){
$('#myModal-min').modal('hide');
smarttang.tables_reload(department_tables);
}
);
}
SmartAjax 使用.(有返回)
function read(_id)
{
var info_id = filterXSS_id);
smarttang.SmartAjax(
OBJECT_DEPARTMENT,
{'obj':'read','id':info_id},
function(msg){
var _html = '<具體的html內(nèi)容>';
var _button = '<button data-bb-handler="success" type="button" class="btn btn-sm btn-info" data-dismiss="modal">關(guān)閉</button>';
smarttang.modal('modal視圖的標(biāo)題',_html,_button);
}
);
}
記錄
[2016.5.16] 增加 wangEditor 支持。
[2016.5.16] 增加 datatables 支持（ajax初始化/ajax reload）
[2016.5.17] 增加 SmartAjax 支持（定制化ajax請求）
[2016.5.17] 增加 mergeData 支持（Object對象合并）
[2016.5.17] 增加 button_status 支持（還原 Bootstrap v3 版本之前的按鈕loading特效）
[2016.5.18] 刪除 delete 功能，增加 SmartAjax 返回值功能，用于處理。
等待增加...
說明
-
有任何bug問題請直接提issue, 我會(huì)看的，看到會(huì)處理，3天內(nèi)提問者沒回復(fù)默認(rèn)關(guān)閉。
-
有好的建議也可以發(fā)issue。采納建議后，會(huì)把你的貢獻(xiàn)加入到作者著名里面。
-
長期維護(hù)該插件，只要用到的前端功能都會(huì)匯聚到這個(gè)插件里面。
相關(guān)鏈接
-
版權(quán)聲明 (MIT協(xié)議，可以隨意修改但是最好留下作者名字表示尊重)
-
wangEditor (這是我用過最好的在線編輯器，雖然坑很多....)
-
datatables (這是我最喜歡的插件，沒有之一...)