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 ...
随机推荐
- adb常用命令 分类: H1_ANDROID 2013-09-08 15:22 510人阅读 评论(0) 收藏
安装软件 adb install apk文件名称.apk 重新安装该软件 adb install -r apk文件名称.apk 卸载apk软件 adb uninstall apk包名.apk ...
- javascript合并数组并且删除第二项
var m1 = [5, 6, 2]; var m2 = [4, 2, 6]; var m3 = new Array(); m1 = m1.concat(m2); for ( ...
- php实现求数组中出现次数超过一半的数字(isset($arr[$val]))(取不同数看剩)(排序取中)
php实现求数组中出现次数超过一半的数字(isset($arr[$val]))(取不同数看剩)(排序取中) 一.总结 1.if(isset($arr[$val])) $arr[$val]++; //1 ...
- [RxJSv& Javascript] forkJoin (reactive Promise.all) & Map
forkJoin: When all observables complete emit the last value from each. productMap: Map<number, IP ...
- Freemarker中的null判断,小坑一枚
上次写到,在Freemarker中日期转换,可以提取成工具方法.主要是Freemarker对null的处理方式,非常坑爹.只要一个对象或对象的属性为null,就报错,虽然不影响界面显示,但控制台和日志 ...
- 【hdu 2897】邂逅明下
Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submission(s) ...
- HTML5物理游戏开发 - 越野山地自行车(三)粉碎自行车
自上一章公布到如今已时隔四月,实在对不住大家.让大家久等了~话说不是我不关注我的博客,而是事情一多起来写博客的时间就少了. 待到今日有空了,回头看了看自己曾经写的文章,猛得发现已经四个月不曾写文章了. ...
- easyui样式及js导入顺序及刷新回车的问题
在使用easyui时,需要导入样式表及其js文件,在导入时.不光要遵守jquery包在easyui包的前面,还需要把样式表放在js的前边 <link type="text/css&qu ...
- 课堂随笔04--关于string类的一些基本操作
//定义一个空字符串 string strA = string.Empty; strA = "abcdesabcskkkkk"; //获取字符串的长度 int i = strA.L ...
- java-synchronized原理
介绍 synchronized是一种独占式的重量级锁,在运行到同步方法或者同步代码块的时候,让程序的运行级别由用户态切换到内核态,把所有的线程挂起,通过操作系统的指令,去调度线程.这样会频繁出现程序运 ...