与bootstrap相配合使用的插件

与bootstrap相配合使用的插件

一：bootbox

bootbox是一个小型JavaScript数据库，基于bootstrap模态框开发，能够简单的制作一个bootstrap弹出效果，是非阻塞事件。
ps：阻塞事件：单线程，当上一段代码（方法）执行成功后才会继续执行下一段代码（方法）。（个人理解这是电路中的串联）
非阻塞事件：多线程，多个方法按照代码顺序执行。（个人理解这是电路中的并联）
使用时引入相关js和css文件到jsp页面（路径根据个人项目文件夹路径自行更改）

使用代码如下：

--------------------------自定义弹出框模板--------------------------
		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页面（路径根据个人项目文件夹路径自行更改）

使用代码如下：

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页面（路径根据个人项目文件夹路径自行更改）

使用代码如下：

$("#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("文件上传过程中出现异常，请联系管理员！");
			}
		});

写在最后

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