与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",//语言CHINAautoclose: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("文件上传过程中出现异常，请联系管理员！");}});

写在最后

本文为小编个人理解所作，若内容有误之处，烦请联系小编进行更改或删除，谢谢！