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

html5 页面元素插件的更多相关文章

  1. HTML5页面元素中的文本最快速替换replace()方法

    $.ajax({ type:"get", url:spanUrl, dataType:'jsonp', jsonpCallback:'jsonp',//jsonp数据,需要数据库提 ...

  2. 基于HTML5 audio元素播放声音jQuery小插件

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1609 一.前面的些唠 ...

  3. HTML5 增强的页面元素

    一.HTML5 改良的 input 元素的种类 1.<input type="number" id="num1"> var n1 = documen ...

  4. html5实现本页面元素拖放和本地文件拖放

    HTML5拖放 拖放本地数据   1.HTML拖放 拖放(Drag 和 Drop)是HTML5标准的组成部分 2.拖放开始: ondragStart:调用了一个函数,drag(event),它规定了被 ...

  5. 使用 SVG 动画实现弹性的页面元素效果

    Codrops 分享了一些给SVG元素加上弹性动画的灵感.实现的思路是把一个SVG元素整合成一个组件,然后从一个路径弹性动画到另一个.这种效果可以应用到像菜单,按钮或其它元素,使得交互更有趣,看起更原 ...

  6. HTML5新增元素、标签总结

    总是遇到h5新标签的笔试题目,就查阅了资料来总结一下: 1.form相关: (1)form属性:在HTML5中表单元素可放在表单之外,通过给该元素添加form属性来指向目标表单(form属性值设为目标 ...

  7. HTML5新增元素,标签总结

    总是遇到h5新标签的笔试题目,就查阅了资料来总结一下: 1.form相关: (1)form属性:在HTML5中表单元素可放在表单之外,通过给该元素添加form属性来指向目标表单(form属性值设为目标 ...

  8. html5页面怎么播放音频和视频

    html5页面怎么播放音频和视频 一.总结 一句话总结:html5 音频和视频标签:(audio And video),局限是不同浏览器对音频视频的格式支持很让人头痛 1.最基础的音频和视频标签的使用 ...

  9. HTML5 新增元素梳理

    HTML5新增元素如下图: <canvas> 新元素 <canvas> 标签定义图形,比如图表和其他图像,该标签基于javascript的绘图api 新多媒体元素 <au ...

随机推荐

  1. spring getbean 方法分析(很实用!)

    十年阿里,就只剩下这套Java开发体系了 >>>   在最近的项目中,有个地方我们不得不实用getBean的方法,自己从Spring context中获取bean进行数据库操作. 方 ...

  2. IfSpeed 带宽计算

    http://www.360doc.com/content/11/0304/22/2614615_98214710.shtml http://www.cisco.com/support/zh/477/ ...

  3. [JS Compse] 4. A collection of Either examples compared to imperative code

    For if..else: const showPage() { if(current_user) { return renderPage(current_user); } else { return ...

  4. LinearLayout的一些注意事项 分类: H1_ANDROID 2013-10-26 23:01 856人阅读 评论(0) 收藏

    1.orientation的默认值为horizontal,即从左向右排列.由于一般从上向下排列,所以必须指定orientation属性. 2.layout_gravity与gravity的区别: (1 ...

  5. https://sourceware.org/gdb/onlinedocs/gdb/Forks.html

    https://sourceware.org/gdb/onlinedocs/gdb/Forks.html Next: Checkpoint/Restart, Previous: Threads, Up ...

  6. Java中的浮点数-科学计数法-加减乘除

    上次,提到"元转分"这个浮点数问题,boss倾向于手动把1.23元这种格式,转换成123分.    但实际上,浮点数很容易遇到精度问题.    比如,System.out.prin ...

  7. Atom编辑器折腾记_(13)JS代码智能提示补全(插件:atom-ternjs)

    题外话 官方正式版尽管内置了.autocomplete-plus;最为明显的一个功能就是记忆你已经输入过的名称进行匹配; 可是针对于某些语言来说,还是有些不足的-.当中JS的补全上就明显不足了-所以须 ...

  8. [TypeScript] Increase TypeScript's type safety with noImplicitAny

    TypeScript tries to infer as much about your code as it can. But sometimes there really is not enoug ...

  9. tip of Firefox extention foxyproxy

    tip of Firefox extention foxyproxy

  10. rebar工具使用备忘录

    http://cryolite.iteye.com/blog/1159448 rebar是一个开源的erlang应用自动构建工具.basho的tuncer开发.它实际上是一个erlang脚本(escr ...