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