與bootstrap相配合使用的插件
一：bootbox
bootbox是一個小型JavaScript數據庫，基於bootstrap模態框開發，能夠簡單的製作一個bootstrap彈出效果，是非阻塞事件。
ps：阻塞事件：單線程，當上一段代碼（方法）執行成功後纔會繼續執行下一段代碼（方法）。（個人理解這是電路中的串聯）
非阻塞事件：多線程，多個方法按照代碼順序執行。（個人理解這是電路中的並聯）
使用時引入相關js和css文件到jsp頁面（路徑根據個人項目文件夾路徑自行更改）
<!-- 引入bootbox相關js -->
<script src="<%=request.getContextPath()%>/js/bootbox/bootbox.locales.min.js" type="text/javascript"></script>
<script src="<%=request.getContextPath()%>/js/bootbox/bootbox.min.js" type="text/javascript"></script>
使用代碼如下：
--------------------------自定義彈出框模板--------------------------
bootbox.confirm({
title:"修改用戶信息", //標題
size:"large", //大小
message:$("#updateUserDivForm"), //彈出框的內容
buttons:{
confirm:{
label:"確認"
},
cancel:{
label:"取消",
className:"btn btn-danger"
}
},
callback:function(result){ //確定或取消的回調函數，在這裏進行自定義下一步操作
if(result){
}
}
});
二：Datetimepicker
Datetimepicker是基於bootstrap的日期時間選擇器，方便使用且美觀，支持自定義時間格式和語言。
使用時引入相關js和css文件到jsp頁面（路徑根據個人項目文件夾路徑自行更改）
<!-- 引入datetimepicker日期插件的css文件和js文件 -->
<link href="<%=request.getContextPath()%>/js/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<script src="<%=request.getContextPath()%>/js/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
使用代碼如下：
function initDatetimpicker(id,type){
var format = type == 1 ? "yyyy-mm-dd":"yyyy-mm-dd hh:mm:ss";
$(id).datetimepicker({
format:format,//設置日期格式
language:"zh-CN",//語言CHINA
autoclose:true
});
}
id：使用id選擇器進行綁定
type：就是自定義時間格式的類型yyyy-mm-dd或yyyy-mm-dd hh:mm:ss
這是一個時間函數，在需要用的地方調用此函數並傳入id和type即可。
三：Fileinput
Fileinput是文件上傳插件，支持多文件上傳預覽，ajax方式上傳文件可以看到進度條，文件上傳區域美觀大方，支持刪除和修改。
使用時引入相關js和css文件到jsp頁面（路徑根據個人項目文件夾路徑自行更改）
<!-- 引入fileinput文件上傳插件的css文件和js文件 -->
<link href="<%=request.getContextPath()%>/js/bootstrap-fileinput/css/fileinput.min.css" rel="stylesheet" />
<script src="<%=request.getContextPath()%>/js/bootstrap-fileinput/js/fileinput.min.js"></script>
<script src="<%=request.getContextPath()%>/js/bootstrap-fileinput/js/locales/zh.js"></script>
使用代碼如下：
$("#updateUserForm #avatar").fileinput({
language:"zh", //語言
allowedFileTypes:["image"], //允許上傳文件類型
maxFileCount:1, //自定義最大上傳數量
uploadUrl:"<%=request.getContextPath()%>/" //設置上傳文件的地址
});
//用於文件上傳結果處理的回調函數，每上傳成功一個文件就會調用一下這個函數
$("#updateUserForm #avatar").on("fileuploaded",function(event,data,preView,index){
var result = data.response; //獲取服務器返回的數據
if(result.success){
$("#updateUserForm #avatarPath").val(result.filePath); //將路徑放入text文本框中
}else{
alert("文件上傳過程中出現異常，請聯繫管理員！");
}
});
寫在最後
本文爲小編個人理解所作，若內容有誤之處，煩請聯繫小編進行更改或刪除，謝謝！