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">×</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">×</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">×</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);//关闭提示框
