html5 页面元素插件

1. 滚动条 jquery.nicescroll

正常引用方式；

设置区域高度

var bodyHeight = $(document.body).height();
    $("#XXXXXXX

").height(bodyHeight - 240);

 

使用: JS代码

        $("#XXXXXXX")
            .niceScroll({
                cursorcolor: "#ccc", //#CC0071 光标颜色
                cursoropacitymax: 1, //改变不透明度非常光标处于活动状态（scrollabar“可见”状态），范围从1到0
                touchbehavior: false, //使光标拖动滚动像在台式电脑触摸设备
                cursorwidth: "6px", //像素光标的宽度
                cursorborder: "0", // 游标边框css定义
                cursorborderradius: "5px", //以像素为光标边界半径
                autohidemode: false //是否隐藏滚动条
            });

2. bootstraip 提示框

有alert、confirm、dialog三种

初始化JS代码：

var initTipMessage = function () {
    (function ($) {

        window.Ewin = function () {
            var html = '<div id="[Id]" class="modal fade" role="dialog" aria-labelledby="modalLabel">' +
                                  '<div class="modal-dialog modal-sm">' +
                                      '<div class="modal-content">' +
                                          '<div class="modal-header">' +
                                              '<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>' +
                                              '<h4 class="modal-title" id="modalLabel">[Title]</h4>' +
                                          '</div>' +
                                          '<div class="modal-body">' +
                                          '<p>[Message]</p>' +
                                          '</div>' +
                                           '<div class="modal-footer">' +
            '<button type="button" class="btn btn-default cancel" data-dismiss="modal">[BtnCancel]</button>' +
            '<button type="button" class="btn btn-primary ok" data-dismiss="modal">[BtnOk]</button>' +
        '</div>' +
                                      '</div>' +
                                  '</div>' +
                              '</div>';


            var dialogdHtml = '<div id="[Id]" class="modal fade" role="dialog" aria-labelledby="modalLabel">' +
                                  '<div class="modal-dialog">' +
                                      '<div class="modal-content">' +
                                          '<div class="modal-header">' +
                                              '<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>' +
                                              '<h4 class="modal-title" id="modalLabel">[Title]</h4>' +
                                          '</div>' +
                                          '<div class="modal-body">' +
                                          '</div>' +
                                      '</div>' +
                                  '</div>' +
                              '</div>';
            var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm');
            var generateId = function () {
                var date = new Date();
                return 'mdl' + date.valueOf();
            }
            var init = function (options) {
                options = $.extend({}, {
                    title: "操作提示",
                    message: "提示内容",
                    btnok: "确定",
                    btncl: "取消",
                    width: 200,
                    auto: false
                }, options || {});
                var modalId = generateId();
                var content = html.replace(reg, function (node, key) {
                    return {
                        Id: modalId,
                        Title: options.title,
                        Message: options.message,
                        BtnOk: options.btnok,
                        BtnCancel: options.btncl
                    }[key];
                });
                $('body').append(content);
                $('#' + modalId).modal({
                    width: options.width,
                    backdrop: 'static'
                });
                $('#' + modalId).on('hide.bs.modal', function (e) {
                    $('body').find('#' + modalId).remove();
                });
                return modalId;
            }

            return {
                alert: function (options) {
                    if (typeof options == 'string') {
                        options = {
                            message: options
                        };
                    }
                    var id = init(options);
                    var modal = $('#' + id);
                    modal.find('.ok').removeClass('btn-success').addClass('btn-primary');
                    modal.find('.cancel').hide();

                    return {
                        id: id,
                        on: function (callback) {
                            if (callback && callback instanceof Function) {
                                modal.find('.ok').click(function () { callback(true); });
                            }
                        },
                        hide: function (callback) {
                            if (callback && callback instanceof Function) {
                                modal.on('hide.bs.modal', function (e) {
                                    callback(e);
                                });
                            }
                        }
                    };
                },
                confirm: function (options) {
                    var id = init(options);
                    var modal = $('#' + id);
                    modal.find('.ok').removeClass('btn-primary').addClass('btn-success');
                    modal.find('.cancel').show();
                    return {
                        id: id,
                        on: function (callback) {
                            if (callback && callback instanceof Function) {
                                modal.find('.ok').click(function () { callback(true); });
                                modal.find('.cancel').click(function () { callback(false); });
                            }
                        },
                        hide: function (callback) {
                            if (callback && callback instanceof Function) {
                                modal.on('hide.bs.modal', function (e) {
                                    callback(e);
                                });
                            }
                        }
                    };
                },
                dialog: function (options) {
                    options = $.extend({}, {
                        title: 'title',
                        url: '',
                        width: 800,
                        height: 550,
                        onReady: function () { },
                        onShown: function (e) { }
                    }, options || {});
                    var modalId = generateId();

                    var content = dialogdHtml.replace(reg, function (node, key) {
                        return {
                            Id: modalId,
                            Title: options.title
                        }[key];
                    });
                    $('body').append(content);
                    var target = $('#' + modalId);
                    target.find('.modal-body').load(options.url);
                    if (options.onReady())
                        options.onReady.call(target);
                    target.modal();
                    target.on('shown.bs.modal', function (e) {
                        if (options.onReady(e))
                            options.onReady.call(target, e);
                    });
                    target.on('hide.bs.modal', function (e) {
                        $('body').find(target).remove();
                    });
                }
            }
        }();
    })(jQuery);
}

使用：

 if (XXX) {
        Ewin.alert("YYYY");
        return;
    }
    Ewin.confirm({ message: "确认要ZZZZZ?。" })
        .on(function (e) {
            if (!e) { return; }
            //按下确认按钮执行的代码
           // Do sth
        });    

 3. 模态框：

HTML代码

<!-- 模态框（Modal）-->
<div class="modal fade" id="relatedeBaseModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" style="width:1350px; height: 600px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <div class="container">
                    <div class="row">
                        <div class="col-md-6">
                            <h4 class="modal-title" id="myModalLabel"></h4>
                        </div>
                        <div class="col-md-4">
                            <h4 class="modal-title" id="tipMessageLabel"></h4>
                        </div>
                        <div class="col-md-2">
                            
                        </div>
                    </div>
                </div>
            </div>
            <div style=" height:550px; overflow:scroll;">
                <table class="col-lg-12 table table-striped table-bordered"
                       id="relatedBaseInfoTable" style="max-height: 500px"></table>

            </div>
        </div>
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

弹出模态框 JS代码：

 $("#relatedeBaseModal").modal("show");

模态框可拖拽 JS代码

 // 在模态框出现后添加可拖拽功能
        $(document).on("show.bs.modal", ".modal", function () {
            $(this).draggable({
                handle: ".modal-header", // 只能点击头部拖动
                cursor: "move"
            });
            $(this).css("overflow", "hidden"); // 防止出现滚动条，出现的话，你会把滚动条一起拖着走的
        });

4. 时间获取器

日期格式可调。帮助文档

html代码

 <input id="monthpicker" value="十月 2017" title="monthpicker" style="width: 100%; color: #000000" />

JS代码

        $("#monthpicker")
            .kendoDatePicker({
                start: "year",
                depth: "year",
                format: "MMMM yyyy",
                dateInput: true,
                change: onDateChange
            });



function onDateChange() {
   // XXXXXXX
}

 5.’ 正在加载‘提示框

kendoui

JS代码

kendo.ui.progress($("#XXXXX"), true);//展示提示框
kendo.ui.progress($("#XXXXX"), false);//关闭提示框

 

转载于:https://www.cnblogs.com/pangkang/p/7872853.html