bootstrap的使用记录

目录

模态框modal

点击空白处，禁止窗口消失

搭配webuploader上传文件功能，上传按钮变大

模态框关闭事件

bootstrap-datetimepicker日期控件

设置可点击的起始时间

---

模态框modal

点击空白处，禁止窗口消失

• 添加属性：data-backdrop="static"

---

搭配webuploader上传文件功能，上传按钮变大

异常效果：

两个方法解决：

1、在弹出层展示时重新生成按钮

uploader.addButton({
     id: '#filePicker',
     innerHTML: '上传'
     });

2、不在页面展示时初始化webuploader，而是等到模态框弹出时初始化

var uploader;
//在点击弹出模态框的时候再初始化WebUploader，解决点击上传无反应问题
$("#myModal").on("shown.bs.modal",function(){
    uploader = WebUploader.create({
        swf : '/web/public/Uploader.swf',
        server : $("#jumicontextPath").val()+'/common/file/upload',// 后台路径
        pick : '#filePicker', // 选择文件的按钮。可选。内部根据当前运行是创建，可能是input元素，也可能是flash.
        resize : false,// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        chunked : true, // 是否分片
        duplicate:true,//去重， 根据文件名字、文件大小和最后修改时间来生成hash Key.
        chunkSize : 52428 * 100, // 分片大小， 5M
        /*    fileSingleSizeLimit:100*1024,//文件大小限制*/
        auto : true,
        // 只允许选择图片文件。
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/jpg,image/jpeg,image/png'
        }
    });
 
    // 文件上传成功，给item添加成功class, 用样式标记上传成功。
    uploader.on('uploadSuccess', function (file,response) {
        var fileUrl = response.data.fileUrl;
        //TODO
        $("#responeseText").text("上传成功,文件名："+response.data.fileName);
    });
 
    // 当文件上传出错时触发
    uploader.on('uploadError', function (file) {
        $("#responeseText").text("上传失败");
    });
 
    //当validate不通过时触发
    uploader.on('error', function (type) {
        if(type=="F_EXCEED_SIZE"){
            alert("文件大小不能超过xxx KB!");
        }
    });
});

这样会存在一个问题，按钮会在再一次打开之时逐渐变大，所以需要在关闭模态框的时候将webuploader销毁

Webuploader-API

 

模态框关闭事件

一：
//hide.bs.modal，当调用 hide 实例方法时触发。  
$('#identifier').on('hide.bs.modal', function () {
 // 执行一些动作...
})


二：
//hidden.bs.modal，当模态框完全对用户隐藏时触发。
//$('#confirmRevokeOrder').modal('hidden');
$('#identifier').on('hidden.bs.modal', function () {
 // 执行一些动作...
})

bootstrap-datetimepicker日期控件

设置可点击的起始时间

1、在初始化日期控件时进行时间段设置

        $('.datetimepicker1').datetimepicker({
            format: "yyyy-mm-dd",
            minView: 2,
            autoclose: 1,
            language: 'zh-CN',
            startDate: new Date()
        }).on('changeDate', function (ev) {//日期改变事件
            $(ev.target).next(".icon-dateremove").show();//显示清除日期的图标
        });

startDate: new Date() //表示可点击当前日期之后的时间；

endDate : new Date() //同理

2、在选择时期后，进行设置

        $('.datetimepicker1').datetimepicker({
            format: "yyyy-mm-dd",
            minView: 2,
            autoclose: 1,
            language: 'zh-CN'
        }).on('changeDate', function (ev) {//日期改变事件
            if($(this).attr("name")=="StartDate"){
                $("input[name='EndDate']").datetimepicker('setStartDate',ev.date);                
            }
        });

setStartDate 设置起始时间

setEndDate 设置结束时间