bootstrap中常用的插件及示例

select2插件的使用

选择select2插件的使用

$(id).select2({
data : data,
minimumResultsForSearch : Infinity,// 禁用搜索
allowClear : true
});

bootstrap-validator表单验证

使用bootstrap-validator插件

reset重置表单

$('#btn-reset').click(function() {
$('#changeForm').data('bootstrapValidator').resetForm(true);
});

bootstrap-dialog页面加载、button

使用bootstrap-dialog插件

function changePasswd(){
BootstrapDialog.show({
title : "修改密码",
message: function(dialog) {
var $message = $('<div></div>');
var pageToLoad = dialog.getData('pageToLoad');
$message.load(pageToLoad);
return $message;
},
data: {
'pageToLoad': 'changePasswd.html'
},
buttons: [{
id: 'btn-ok',
icon: 'glyphicon glyphicon-check',
label: 'OK',
cssClass: 'btn-success',
autospin: false,
action: function(dialogItself){
change();

dialogItself.close();
}
}, {
id:'btn-reset',
cssClass: 'btn-warning',
label: '重置',
icon: 'glyphicon glyphicon-repeat',
action : function(){
document.getElementById("changeForm").reset();
$('#btn-reset').click(function() {
$('#changeForm').data('bootstrapValidator').resetForm(true);
});}
}, {
id:'btn-close',
icon:'glyphicon glyphicon-remove',
label: 'Close',
cssClass: 'btn-danger',
action: function(dialogItself){
dialogItself.close();
}
}]
});

}

Jquery-confirm 插件之alert使用

使用 Jquery-confirm.js插件

function alertView(str){
$.alert({
animation : 'zoom',
animationBounce : 2,
keyboardEnabled : true,
title : false,
content : str,
theme : 'white',
});
}

Jquery-confirm 插件之confirm使用

使用 Jquery-confirm.js插件

$.confirm({
title: '退出系统登陆吗？',
content : false,
// autoClose: 'confirm|10000',
confirmButtonClass : 'btn-info',
cancelButtonClass : 'btn-danger',
confirm : function() {
$.ajax({
type : "post",
url : "logoutAction.action",
async: false,
success :function(){
location.href = "../login.jsp";
}
});
},
cancel : function() {
alert('canceled');
}
});

bootstrap Table

bootstrap Table更新操作

$table.bootstrapTable('updateRow', {
index : index1,
row : {
tid : tid,
cid : cid,
uid : uid,
date : date,
type : type,
}
});

添加操作

使用bootstrap table插件

table rowStyle和runningFormatter

<table data-row-style="rowStyle"> <thead> <tr><th data-align="center" data-formatter="runningFormatter">ID</th> </tr></thead>

function rowStyle(row, index) {
/*var classes = ['active', 'success', 'info', 'warning', 'danger'];*/
var classes = ['success', 'info', 'warning', 'danger'];

/*if (index % 2 === 0 && index / 2 < classes.length) {
return {
classes: classes[index / 2]
};
}*/
if(index % 2 ===0){
return {
classes:classes[index%3]
}
}
return {};
}

function runningFormatter(value, row, index) {
return index+1;
}

tablet添加操作

<th data-field="operate" data-formatter="operateFormatter"
data-events="operateEvents" data-align="center">操作</th>

bootstrap model远程加载示例

<a id="adduser" class="btn btn-danger" data-toggle="modal"
href="addUser.html" data-target="#adduserModal">添加</a>

<div class="modal fade" id="adduserModal" role="dialog"
aria-labelledby="myModalLabel" data-keyboard="true">
<div class="modal-dialog" role="document">
<div class="modal-content"></div>
</div>
</div>

table表中修改某一条记录时，model弹出框获取记录值

function editTerminal(row,index) {
index1=index;
$('#editTerminalModal').on('show.bs.modal',function(event) {
var button = $(event.relatedTarget);
var recipient = button.data('whatever');
var modal = $(this);
modal.find('.modal-title').text(recipient);
modal.find('#tid').val(row.tid);
modal.find('#type').val(row.type);
modal.find('#cid').val(row.cid);
modal.find('#uid').val(row.uid);
modal.find('#date').val(row.date);
})
}