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);//关闭提示框
html5 页面元素插件的更多相关文章
- HTML5页面元素中的文本最快速替换replace()方法
$.ajax({ type:"get", url:spanUrl, dataType:'jsonp', jsonpCallback:'jsonp',//jsonp数据,需要数据库提 ...
- 基于HTML5 audio元素播放声音jQuery小插件
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1609 一.前面的些唠 ...
- HTML5 增强的页面元素
一.HTML5 改良的 input 元素的种类 1.<input type="number" id="num1"> var n1 = documen ...
- html5实现本页面元素拖放和本地文件拖放
HTML5拖放 拖放本地数据 1.HTML拖放 拖放(Drag 和 Drop)是HTML5标准的组成部分 2.拖放开始: ondragStart:调用了一个函数,drag(event),它规定了被 ...
- 使用 SVG 动画实现弹性的页面元素效果
Codrops 分享了一些给SVG元素加上弹性动画的灵感.实现的思路是把一个SVG元素整合成一个组件,然后从一个路径弹性动画到另一个.这种效果可以应用到像菜单,按钮或其它元素,使得交互更有趣,看起更原 ...
- HTML5新增元素、标签总结
总是遇到h5新标签的笔试题目,就查阅了资料来总结一下: 1.form相关: (1)form属性:在HTML5中表单元素可放在表单之外,通过给该元素添加form属性来指向目标表单(form属性值设为目标 ...
- HTML5新增元素,标签总结
总是遇到h5新标签的笔试题目,就查阅了资料来总结一下: 1.form相关: (1)form属性:在HTML5中表单元素可放在表单之外,通过给该元素添加form属性来指向目标表单(form属性值设为目标 ...
- html5页面怎么播放音频和视频
html5页面怎么播放音频和视频 一.总结 一句话总结:html5 音频和视频标签:(audio And video),局限是不同浏览器对音频视频的格式支持很让人头痛 1.最基础的音频和视频标签的使用 ...
- HTML5 新增元素梳理
HTML5新增元素如下图: <canvas> 新元素 <canvas> 标签定义图形,比如图表和其他图像,该标签基于javascript的绘图api 新多媒体元素 <au ...
随机推荐
- spring getbean 方法分析(很实用!)
十年阿里,就只剩下这套Java开发体系了 >>> 在最近的项目中,有个地方我们不得不实用getBean的方法,自己从Spring context中获取bean进行数据库操作. 方 ...
- IfSpeed 带宽计算
http://www.360doc.com/content/11/0304/22/2614615_98214710.shtml http://www.cisco.com/support/zh/477/ ...
- [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 ...
- LinearLayout的一些注意事项 分类: H1_ANDROID 2013-10-26 23:01 856人阅读 评论(0) 收藏
1.orientation的默认值为horizontal,即从左向右排列.由于一般从上向下排列,所以必须指定orientation属性. 2.layout_gravity与gravity的区别: (1 ...
- https://sourceware.org/gdb/onlinedocs/gdb/Forks.html
https://sourceware.org/gdb/onlinedocs/gdb/Forks.html Next: Checkpoint/Restart, Previous: Threads, Up ...
- Java中的浮点数-科学计数法-加减乘除
上次,提到"元转分"这个浮点数问题,boss倾向于手动把1.23元这种格式,转换成123分. 但实际上,浮点数很容易遇到精度问题. 比如,System.out.prin ...
- Atom编辑器折腾记_(13)JS代码智能提示补全(插件:atom-ternjs)
题外话 官方正式版尽管内置了.autocomplete-plus;最为明显的一个功能就是记忆你已经输入过的名称进行匹配; 可是针对于某些语言来说,还是有些不足的-.当中JS的补全上就明显不足了-所以须 ...
- [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 ...
- tip of Firefox extention foxyproxy
tip of Firefox extention foxyproxy
- rebar工具使用备忘录
http://cryolite.iteye.com/blog/1159448 rebar是一个开源的erlang应用自动构建工具.basho的tuncer开发.它实际上是一个erlang脚本(escr ...