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

1. bootstrap Table更新操作

    $table.bootstrapTable('updateRow', {        index : index1,        row : {            tid : tid,            cid : cid,            uid : uid,            date : date,            type : type,        }    });
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10

1. 添加操作

使用bootstrap table插件 
table rowStyle和runningFormatter

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

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);    })}