1. 滚动条 jquery.nicescroll

正常引用方式;

设置区域高度

  1. var bodyHeight = $(document.body).height();
  2. $("#XXXXXXX
  1. ").height(bodyHeight - 240);

使用: JS代码

  1. $("#XXXXXXX")
  2. .niceScroll({
  3. cursorcolor: "#ccc", //#CC0071 光标颜色
  4. cursoropacitymax: 1, //改变不透明度非常光标处于活动状态(scrollabar“可见”状态),范围从1到0
  5. touchbehavior: false, //使光标拖动滚动像在台式电脑触摸设备
  6. cursorwidth: "6px", //像素光标的宽度
  7. cursorborder: "0", // 游标边框css定义
  8. cursorborderradius: "5px", //以像素为光标边界半径
  9. autohidemode: false //是否隐藏滚动条
  10. });

2. bootstraip 提示框

有alert、confirm、dialog三种

初始化JS代码:

  1. var initTipMessage = function () {
  2. (function ($) {
  3.  
  4. window.Ewin = function () {
  5. var html = '<div id="[Id]" class="modal fade" role="dialog" aria-labelledby="modalLabel">' +
  6. '<div class="modal-dialog modal-sm">' +
  7. '<div class="modal-content">' +
  8. '<div class="modal-header">' +
  9. '<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>' +
  10. '<h4 class="modal-title" id="modalLabel">[Title]</h4>' +
  11. '</div>' +
  12. '<div class="modal-body">' +
  13. '<p>[Message]</p>' +
  14. '</div>' +
  15. '<div class="modal-footer">' +
  16. '<button type="button" class="btn btn-default cancel" data-dismiss="modal">[BtnCancel]</button>' +
  17. '<button type="button" class="btn btn-primary ok" data-dismiss="modal">[BtnOk]</button>' +
  18. '</div>' +
  19. '</div>' +
  20. '</div>' +
  21. '</div>';
  22.  
  23. var dialogdHtml = '<div id="[Id]" class="modal fade" role="dialog" aria-labelledby="modalLabel">' +
  24. '<div class="modal-dialog">' +
  25. '<div class="modal-content">' +
  26. '<div class="modal-header">' +
  27. '<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>' +
  28. '<h4 class="modal-title" id="modalLabel">[Title]</h4>' +
  29. '</div>' +
  30. '<div class="modal-body">' +
  31. '</div>' +
  32. '</div>' +
  33. '</div>' +
  34. '</div>';
  35. var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm');
  36. var generateId = function () {
  37. var date = new Date();
  38. return 'mdl' + date.valueOf();
  39. }
  40. var init = function (options) {
  41. options = $.extend({}, {
  42. title: "操作提示",
  43. message: "提示内容",
  44. btnok: "确定",
  45. btncl: "取消",
  46. width: 200,
  47. auto: false
  48. }, options || {});
  49. var modalId = generateId();
  50. var content = html.replace(reg, function (node, key) {
  51. return {
  52. Id: modalId,
  53. Title: options.title,
  54. Message: options.message,
  55. BtnOk: options.btnok,
  56. BtnCancel: options.btncl
  57. }[key];
  58. });
  59. $('body').append(content);
  60. $('#' + modalId).modal({
  61. width: options.width,
  62. backdrop: 'static'
  63. });
  64. $('#' + modalId).on('hide.bs.modal', function (e) {
  65. $('body').find('#' + modalId).remove();
  66. });
  67. return modalId;
  68. }
  69.  
  70. return {
  71. alert: function (options) {
  72. if (typeof options == 'string') {
  73. options = {
  74. message: options
  75. };
  76. }
  77. var id = init(options);
  78. var modal = $('#' + id);
  79. modal.find('.ok').removeClass('btn-success').addClass('btn-primary');
  80. modal.find('.cancel').hide();
  81.  
  82. return {
  83. id: id,
  84. on: function (callback) {
  85. if (callback && callback instanceof Function) {
  86. modal.find('.ok').click(function () { callback(true); });
  87. }
  88. },
  89. hide: function (callback) {
  90. if (callback && callback instanceof Function) {
  91. modal.on('hide.bs.modal', function (e) {
  92. callback(e);
  93. });
  94. }
  95. }
  96. };
  97. },
  98. confirm: function (options) {
  99. var id = init(options);
  100. var modal = $('#' + id);
  101. modal.find('.ok').removeClass('btn-primary').addClass('btn-success');
  102. modal.find('.cancel').show();
  103. return {
  104. id: id,
  105. on: function (callback) {
  106. if (callback && callback instanceof Function) {
  107. modal.find('.ok').click(function () { callback(true); });
  108. modal.find('.cancel').click(function () { callback(false); });
  109. }
  110. },
  111. hide: function (callback) {
  112. if (callback && callback instanceof Function) {
  113. modal.on('hide.bs.modal', function (e) {
  114. callback(e);
  115. });
  116. }
  117. }
  118. };
  119. },
  120. dialog: function (options) {
  121. options = $.extend({}, {
  122. title: 'title',
  123. url: '',
  124. width: 800,
  125. height: 550,
  126. onReady: function () { },
  127. onShown: function (e) { }
  128. }, options || {});
  129. var modalId = generateId();
  130.  
  131. var content = dialogdHtml.replace(reg, function (node, key) {
  132. return {
  133. Id: modalId,
  134. Title: options.title
  135. }[key];
  136. });
  137. $('body').append(content);
  138. var target = $('#' + modalId);
  139. target.find('.modal-body').load(options.url);
  140. if (options.onReady())
  141. options.onReady.call(target);
  142. target.modal();
  143. target.on('shown.bs.modal', function (e) {
  144. if (options.onReady(e))
  145. options.onReady.call(target, e);
  146. });
  147. target.on('hide.bs.modal', function (e) {
  148. $('body').find(target).remove();
  149. });
  150. }
  151. }
  152. }();
  153. })(jQuery);
  154. }

使用:

  1. if (XXX) {
  2. Ewin.alert("YYYY");
  3. return;
  4. }
  5. Ewin.confirm({ message: "确认要ZZZZZ?。" })
  6. .on(function (e) {
  7. if (!e) { return; }
  8. //按下确认按钮执行的代码
  9. // Do sth
  10. });

3. 模态框:

HTML代码

  1. <!-- 模态框(Modal)-->
  2. <div class="modal fade" id="relatedeBaseModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
  3. aria-hidden="true">
  4. <div class="modal-dialog" style="width:1350px; height: 600px;">
  5. <div class="modal-content">
  6. <div class="modal-header">
  7. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  8. <div class="container">
  9. <div class="row">
  10. <div class="col-md-6">
  11. <h4 class="modal-title" id="myModalLabel"></h4>
  12. </div>
  13. <div class="col-md-4">
  14. <h4 class="modal-title" id="tipMessageLabel"></h4>
  15. </div>
  16. <div class="col-md-2">
  17.  
  18. </div>
  19. </div>
  20. </div>
  21. </div>
  22. <div style=" height:550px; overflow:scroll;">
  23. <table class="col-lg-12 table table-striped table-bordered"
  24. id="relatedBaseInfoTable" style="max-height: 500px"></table>
  25.  
  26. </div>
  27. </div>
  28. </div><!-- /.modal-dialog -->
  29. </div><!-- /.modal -->

弹出模态框 JS代码:

  1. $("#relatedeBaseModal").modal("show");

模态框可拖拽 JS代码

  1. // 在模态框出现后添加可拖拽功能
  2. $(document).on("show.bs.modal", ".modal", function () {
  3. $(this).draggable({
  4. handle: ".modal-header", // 只能点击头部拖动
  5. cursor: "move"
  6. });
  7. $(this).css("overflow", "hidden"); // 防止出现滚动条,出现的话,你会把滚动条一起拖着走的
  8. });

4. 时间获取器

日期格式可调。帮助文档

html代码

  1. <input id="monthpicker" value="十月 2017" title="monthpicker" style="width: 100%; color: #000000" />

JS代码

  1. $("#monthpicker")
  2. .kendoDatePicker({
  3. start: "year",
  4. depth: "year",
  5. format: "MMMM yyyy",
  6. dateInput: true,
  7. change: onDateChange
  8. });
  9.  
  10. function onDateChange() {
  11. // XXXXXXX
  12. }

5.’ 正在加载‘提示框

kendoui

JS代码

  1. kendo.ui.progress($("#XXXXX"), true);//展示提示框
  2. 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. Java虚拟机解析篇之---内存模型

    今天闲来无事来,看一下Java中的内存模型和垃圾回收机制的原理.关于这个方面的知识,网上已经有非常多现成的资料能够供我们參考,可是知识还是比較杂的,在这部分知识点中有一本书不得不推荐:<深入理解 ...

  2. VMware Workstation 12 安装mac os x 10.11

    本人近期在学习iOS开发,由于初学,购买设备有点太昂贵了点.和我有意向想法的朋友能够看看在这篇文章.在虚拟机里装MAC os系统. 第一步:准备 VMware Workstation 12版本号 ma ...

  3. 怎样收缩超大的SharePoint_Config数据库

    前言 在已经执行了2年多的SharePointserver上,发现SharePoint_Config的数据库文件越来越大,已经达到90几个GB,收缩能够减小20几个GB,可是一周以后又会恢复到90几个 ...

  4. 前端工具WebStorm好在哪里?(带详细破解教程)

    前端工具WebStorm好在哪里?(带详细破解教程) 一.总结 1.WebStorm对html特别是HTML5和JS的智能提示简直堪称大神. 2.WebStorm足够的轻量级. 3.WebStorm对 ...

  5. DbVisualizer的使用

    DbVisualizer的使用 一. Db工具的使用,怎么新建一个数据库连接? 新建一个数据库连接,点击 Tools > Connection Wizard 来新建一个数据库: 或者直接点击 + ...

  6. 阿里云centos 6.5 32位安装可视化界面的方法

    http://www.dzbfsj.com/forum.php?mod=viewthread&tid=2702 http://www.mayanpeng.cn/?p=507 http://bl ...

  7. kindeditor4跨域上传图片解决

    项目中正在使用kindeditor, 版本号4.1.10 非常多公司的图片会走CDN,须要单独的一台图片上传服务如:(upload.268xue.com) kindeditor上传图片的简单内部流程: ...

  8. scala 加载与保存xml文档

    package scala_enhance.xml import scala.xml.XML import scala.io.Source import jdk.internal.org.xml.sa ...

  9. NOIP模拟 Math - 数学

    题目大意: 给定a,n(\(a \le 1e9, n\le30\)),求有多少\(b(1 \le b \le 2^n)\)满足:\(a^b \equiv b^a(mod 2^n)\). 题目分析: 数 ...

  10. NVIDIA 显卡信息(CUDA信息的查看)

    1. nvidia-smi 查看显卡信息 nvidia-smi 指的是 NVIDIA System Management Interface: 在安装完成 NVIDIA 显卡驱动之后,对于 windo ...