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 ...
随机推荐
- Java虚拟机解析篇之---内存模型
今天闲来无事来,看一下Java中的内存模型和垃圾回收机制的原理.关于这个方面的知识,网上已经有非常多现成的资料能够供我们參考,可是知识还是比較杂的,在这部分知识点中有一本书不得不推荐:<深入理解 ...
- VMware Workstation 12 安装mac os x 10.11
本人近期在学习iOS开发,由于初学,购买设备有点太昂贵了点.和我有意向想法的朋友能够看看在这篇文章.在虚拟机里装MAC os系统. 第一步:准备 VMware Workstation 12版本号 ma ...
- 怎样收缩超大的SharePoint_Config数据库
前言 在已经执行了2年多的SharePointserver上,发现SharePoint_Config的数据库文件越来越大,已经达到90几个GB,收缩能够减小20几个GB,可是一周以后又会恢复到90几个 ...
- 前端工具WebStorm好在哪里?(带详细破解教程)
前端工具WebStorm好在哪里?(带详细破解教程) 一.总结 1.WebStorm对html特别是HTML5和JS的智能提示简直堪称大神. 2.WebStorm足够的轻量级. 3.WebStorm对 ...
- DbVisualizer的使用
DbVisualizer的使用 一. Db工具的使用,怎么新建一个数据库连接? 新建一个数据库连接,点击 Tools > Connection Wizard 来新建一个数据库: 或者直接点击 + ...
- 阿里云centos 6.5 32位安装可视化界面的方法
http://www.dzbfsj.com/forum.php?mod=viewthread&tid=2702 http://www.mayanpeng.cn/?p=507 http://bl ...
- kindeditor4跨域上传图片解决
项目中正在使用kindeditor, 版本号4.1.10 非常多公司的图片会走CDN,须要单独的一台图片上传服务如:(upload.268xue.com) kindeditor上传图片的简单内部流程: ...
- scala 加载与保存xml文档
package scala_enhance.xml import scala.xml.XML import scala.io.Source import jdk.internal.org.xml.sa ...
- NOIP模拟 Math - 数学
题目大意: 给定a,n(\(a \le 1e9, n\le30\)),求有多少\(b(1 \le b \le 2^n)\)满足:\(a^b \equiv b^a(mod 2^n)\). 题目分析: 数 ...
- NVIDIA 显卡信息(CUDA信息的查看)
1. nvidia-smi 查看显卡信息 nvidia-smi 指的是 NVIDIA System Management Interface: 在安装完成 NVIDIA 显卡驱动之后,对于 windo ...