JS常见插件

文件（图片）上传

• jQuery-File-Upload

  在手机浏览器中支持相机中拍照、图片库、文件库选择

手机端滑动下拉显示更多

• dropload

  https://github.com/ximan/dropload

  由于部分Android中UC和QQ浏览器头部有地址栏，并且一开始滑动页面隐藏地址栏时，无法触发scroll和resize，所以会导致部分情况无法使用。解决方案1：增加distance距离，例如DEMO2中distance:50；解决方案2：加meta使之全屏显示

加载等待

• spin.js

操作提示

• toastr.js

html模板操作

• template.js

html框架 bootstrap

• bootstrap.js
• bootsrap 提示框、确认框
  • bootbox.js

依赖
jquery.js
bootstrap.js
bootbox.js
           

bootbox使用方法:
引入如下文件
 bootstrap.min.css
 bootstrap.js
 bootbox.js
使用方法
bootbox.setDefaults("locale", "zh_CN");
  bootbox.confirm({
                message: "你确定删除【" + name + "】的文件吗?",
                callback: function (res) {
                    if (res) {
                        $.qyhMask.displayLoading()
                        $.ajax({
                            type: "POST",
                            url: "/qyhmanager/file/upload/del/info",
                            data: {
                                id: id
                            },
                            dataType: "json",
                            async: true,
                            success: function (data) {
                                $.qyhMask.hideLoading()
                                if (data.status == ) {
                                    bootbox.setDefaults("locale", "zh_CN");
                                    bootbox.alert('删除【' + name + "】成功！", function () {
                                        window.location.reload()
                                    })
                                }
                                else {
                                    toastr.error('删除【' + name + '】失败！，请稍后再试', '删除文件')
                                }
                            },
                            error: function (data) {
                                $.qyhMask.hideLoading()
                                toastr.error('删除【' + name + '】失败！，请稍后再试', '删除文件')
                                window.location.reload()
                            }
                        });
                    }
                },

                title: "删除文件",
                onEscape: true,
                size: 'small'
            }
        )        
           

表格

1. jquery.datatable

   可以和bootstrap结合

时间范围选择

支持选择开始时间(可以到小时分秒)和结束时间（可以到小时分秒）之间的范围

2. 依赖

- bootstrap

- jquery

- moment

<!-- Include Required Prerequisites -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/latest/css/bootstrap.css" />

<!-- Include Date Range Picker -->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />

     $("#search-by-days").daterangepicker({
                maxDate: moment(),
                dateLimit: {
                    days: 
                }, //起止时间的最大间隔
                parentEl: "query_condition",
                format: 'YYYY-MM-DD',
                ranges: {
                    //'最近1小时': [moment().subtract('hours',), moment()],
                    '今日': [moment().startOf('day'), moment()],
                    '昨日': [moment().subtract('days', ).startOf('day'), moment().subtract('days', ).endOf('day')],
                    '最近7日': [moment().subtract('days', ), moment()],
                    '最近30日': [moment().subtract('days', ), moment()]
                },
                locale: {
                    applyLabel: '确定',
                    cancelLabel: '取消',
                    fromLabel: '起始时间',
                    toLabel: '结束时间',
                    customRangeLabel: '自定义',
                    daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
                    monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
                        '七月', '八月', '九月', '十月', '十一月', '十二月'],
                    firstDay: 
                }
            }, function (start, end, lable) {
                console.log('start', start)
                console.log('end', end)
                console.log('lable', lable)
            });
           

JS数

ztree

1. 树逐层加载

配置async选型，并且返回的数据，需要含有isParent字段（true或者false），如果isParent为true,则次节点打开时，会自动请求后端数据。

1. id和parentId大小写问题

为了避免id或parentId大小写引用的问题，建议ztree使用的数据Id和parentId的首字母均大写
           

内容元素滚动条

1. nanoscroller

   指定元素滚动的问题

2. perfectScrollbar

   指定内容区块div 是否展示滚动条

$("div.scrollable").each(function (i, el) {
                var $this = $(el)
                var max_height = parseInt(attrDefault($this, 'max-height', ), );

                max_height = max_height <  ?  : max_height;

                $this.css({maxHeight: max_height}).perfectScrollbar({
                    wheelPropagation: true
                });
            });
           

提示框、确认框等

1. bootstrap-confirmation.js

$.confirm({
                                title: '解除和车辆【' + plateNo + "】的绑定吗?",
                                text: '解除绑定车辆后，您将接受不到该车辆相关的拖车信息。',
                                onOK: function () {
                                    //点击确认
                                    $(".weui_mask").hide()

                                    $.ajax({
                                        type: "POST",
                                        url: "/traffic/vehicle/del",
                                        data: {
                                            userId: userId,
                                            plateNo: plateNo
                                        },
                                        dataType: "json",
                                        async: true,
                                        success: function (data) {
                                            if (data.status == ) {
                                                userBindVehicles.splice(jQuery.inArray(plateNo, userBindVehicles), );
                                            }
                                            vehicleOptionAppend()
                                        },
                                        error: function (data) {
                                        }
                                    });
                                    hideVehicleOption()
                                },
                                onCancel: function () {
                                    console.log('cancel')
                                    $(".weui_mask").hide()
                                    hideVehicleOption()
                                }
                            });
           

图片或者div区域平滑滚动

https://github.com/tkahn/Smooth-Div-Scroll

图片带按钮滚动

https://github.com/jsor/jcarousel.git

js采用canvas画图

flowjs