当前位置:Gxlcms > JavaScript > JS组件福利大放送 推荐12款好用的Bootstrap组件

JS组件福利大放送 推荐12款好用的Bootstrap组件

时间:2021-07-01 10:21:17 帮助过:12人阅读

前言:之前分享过很多bootstrap常用组件,包括表格、表单验证、文件上传、复选下拉框、弹出框等。这段时间,博主又收藏了一些好用的组件(有些在项目中已经用起来了),经过两天的时间,已经整理出了一部分,本着“好东西要与人分享”的原则,今天还是来点福利,将博主收藏的东西分享出来,供需要的园友参考。组件大部分都是些开源组件,也有部分是博主自己在网上找到然后改写出来的效果,可能不尽如人意,有兴趣的且看看吧。

一、时间组件

bootstrap风格的时间组件非常多,你可以在github上面随便搜索“datepicker”关键字,可以找到很多的时间组件。博主原来也用过其中的两个,发现都会有一些大大小小的问题。经过一番筛选,找到一个效果不错、能适用各种场景的时间组件,下面就来一睹它的风采吧。

1、效果展示

初始效果

组件中文化和日期格式自定义:只显示日期

显示日期和时间(手机、平板类设备可能体验会更好)

2、源码说明

初初看了下组件效果,还是给出源码地址

3、代码示例

首先引用需要的文件

  1. <link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" />
  2. <link href="~/Content/bootstrap-datetimepicker-master/build/css/bootstrap-datetimepicker.css" rel="stylesheet" />
  3. <script src="~/Content/jquery-1.9.1.js"></script>
  4. <script src="~/Content/bootstrap/js/bootstrap.js"></script>
  5. <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
  6. <script src="~/Content/bootstrap-datetimepicker-master/build/js/bootstrap-datetimepicker.min.js"></script>

JQuery和bootstrap是必须的。除此之外,还得引用moment-with-locales.js这个文件,当然,你也可以不用这种cdn的方式,完全可以下载这个js文件到你的本地,然后添加本地引用。

(1)初始效果

  1. <label class="control-label col-xs-3">日期:</label>
  2. <div class='input-group date' id='datetimepicker1'>
  3. <input type='text' class="form-control" />
  4. <span class="input-group-addon">
  5. <span class="glyphicon glyphicon-calendar"></span>
  6. </span>
  7. </div>
  8. <script type="text/javascript">
  9. $(function () {
  10. $('#datetimepicker1').datetimepicker();
  11. });
  12. </script>

这样就能出现如上图一效果。

(2)中文化和日期格式化

html部分不变。js初始化的时候增加参数即可。

  1. <script type="text/javascript">
  2. $(function () {
  3. $('#datetimepicker1').datetimepicker({
  4. format: 'YYYY-MM-DD',//日期格式化,只显示日期
  5. locale: 'zh-CN' //中文化
  6. });
  7. });
  8. </script>

(3)显示时间

  1. <label class="control-label col-xs-3">时间:</label>
  2. <div class='input-group date' id='datetimepicker2'>
  3. <input type='text' class="form-control" />
  4. <span class="input-group-addon">
  5. <span class="glyphicon glyphicon-calendar"></span>
  6. </span>
  7. </div>
  8. <script type="text/javascript">
  9. $(function () {
  10. $('#datetimepicker2').datetimepicker({
  11. format: 'YYYY-MM-DD HH:mm:ss',
  12. locale: 'zh-CN'
  13. });
  14. });
  15. </script>

(4)最大日期、最小日期

  1. $('#datetimepicker1').datetimepicker({
  2. format: 'YYYY-MM-DD',//日期格式化,只显示日期
  3. locale: 'zh-CN', //中文化
  4. maxDate: '2017-01-01',//最大日期
  5. minDate: '2010-01-01' //最小日期
  6. });

(5)启用删除按钮

  1. showClear: true

(6)View Mode属性。设置浏览器选中模式 代码如下:viewMode: 'years'

(7)其他

更多强大的功能可以参看API,这里就不一一列举。里面有大量的属性、事件、方法来满足你各种特殊的需求。

二、自增器组件

关于bootstrap自增器,可能并非每一个项目里面都需要用到。有一些特殊场景,比如:某一个文本框需要数据数字、数组的大小需要微调等一些情况。说了半天,可能有园友都不知道它长啥样,上点图吧。

1、效果展示

其实效果很简单,但它可以自动设置最大值、最小值、自增值还是挺方便的,并且可以自动做数字校验。最最方便的是它并需要使用JavaScript去做初始化,只需要在html里面初始化即可。

2、源码说明

源码以及文档地址

3、代码示例

首先需要引用的文件如下:

  1. <link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" />
  2. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
  3. <link href="~/Content/jquery.spinner-master/dist/css/bootstrap-spinner.css" rel="stylesheet" />
  4. <script src="~/Content/jquery-1.9.1.js"></script>
  5. <script src="~/Content/bootstrap/js/bootstrap.js"></script>
  6. <script src="~/Content/jquery.spinner-master/dist/js/jquery.spinner.js"></script>

font-aweaome.min.css文件也是一个cdn引用的文件,你也可以它引用到你的本地。

(1)初始化

  1. <div class="input-group spinner" data-trigger="spinner">
  2. <input type="text" class="form-control text-center" value="1" data-rule="quantity">
  3. <span class="input-group-addon">
  4. <a href="javascript:;" class="spin-up" data-spin="up"><i class="fa fa-caret-up"></i></a>
  5. <a href="javascript:;" class="spin-down" data-spin="down"><i class="fa fa-caret-down"></i></a>
  6. </span>
  7. </div>

就这么一段简单的html就能看到如上图的效果,有没有很easy~~

(2)自增类型

查看组件的源码,可以看到在它里面为我们定义了多种自增类型:

可以定义data-rule属性为这些类型,比如:

data-rule="month"可以控制自增组件的规则是按照月的规则来进行。

(3)设置最大值、最小值、自增值

除了上面的几种特定类型,组件还支持自定义最大值、最小值、自增值

  1. <div class="input-group spinner" data-trigger="spinner">
  2. <input type="text" class="form-control text-center" value="1" data-min="-10" data-max="10" data-step="2" data-rule="quantity">
  3. <span class="input-group-addon">
  4. <a href="javascript:;" class="spin-up" data-spin="up"><i class="fa fa-caret-up"></i></a>
  5. <a href="javascript:;" class="spin-down" data-spin="down"><i class="fa fa-caret-down"></i></a>
  6. </span>
  7. </div>

data-min="-10":最小值data-max="10":最大值data-step="2":自增值

这个很好理解,不做过多说明。效果:

(4)事件捕捉

组件提供了两个事件changed、changing,分别对应数值变化中和变化后的事件回调。

  1. $('#id').spinner('changed', function(e, newVal, oldVal) {
  2. });
  3. $('[data-trigger="spinner"]').spinner('changing', function(e, newVal, oldVal) {
  4. });

三、加载效果

前几天,有群友在问bootstrap的加载效果用什么组件。其实百度搜索一下,也能找到很多的结果。在此,博主根据自己的使用经历分享下几个加载的小组件,希望大家用得着。主要分为实用型和炫酷型两种。实用型效果一般,但能适用各种浏览器;炫酷型使用最新的css3和html5写出来的,效果很炫,但基本上低版本的IE(10以下)都不能兼容。

一)、实用型

1、PerfectLoading组件

这个组件是博主在网上找到的一个js,但下载下来之后发现一些大大小小的问题,于是,博主改写了下,命名为bootstrap-loading组件。它的原理就是在组件启动的时候弹出一个覆盖层,然后组件关闭时,将覆盖层的dom移除,加载效果使用了一张gif的图片。

PerfectLoad.js文件内容:

  1. /*******************************************
  2. *
  3. * Plug-in:友好的页面加载效果
  4. * Author:sqinyang (sqinyang@sina.com)
  5. * Time:2015/04/20
  6. * Explanation:随着HTML5的流行,页面效果越来越炫,同时也需要加载大量的插件及素材,万恶的网速,特别对于挂在国外服务器的网站,一打开一堆素材缓缓加载,位置错乱不齐,故编写此方法,方便大家使用
  7. *
  8. *********************************************/
  9. jQuery.bootstrapLoading = {
  10. start: function (options) {
  11. var defaults = {
  12. opacity: 1,
  13. //loading页面透明度
  14. backgroundColor: "#fff",
  15. //loading页面背景色
  16. borderColor: "#bbb",
  17. //提示边框颜色
  18. borderWidth: 1,
  19. //提示边框宽度
  20. borderStyle: "solid",
  21. //提示边框样式
  22. loadingTips: "Loading, please wait...",
  23. //提示文本
  24. TipsColor: "#666",
  25. //提示颜色
  26. delayTime: 1000,
  27. //页面加载完成后,加载页面渐出速度
  28. zindex: 999,
  29. //loading页面层次
  30. sleep: 0
  31. //设置挂起,等于0时则无需挂起
  32. }
  33. var options = $.extend(defaults, options);
  34. //获取页面宽高
  35. var _PageHeight = document.documentElement.clientHeight,
  36. _PageWidth = document.documentElement.clientWidth;
  37. //在页面未加载完毕之前显示的loading Html自定义内容
  38. var _LoadingHtml = '<div id="loadingPage" style="position:fixed;left:0;top:0;_position: absolute;width:100%;height:' + _PageHeight + 'px;background:' + options.backgroundColor + ';opacity:' + options.opacity + ';filter:alpha(opacity=' + options.opacity * 100 + ');z-index:' + options.zindex + ';"><div id="loadingTips" style="position: absolute; cursor1: wait; width: auto;border-color:' + options.borderColor + ';border-style:' + options.borderStyle + ';border-width:' + options.borderWidth + 'px; height:80px; line-height:80px; padding-left:80px; padding-right: 5px;border-radius:10px; background: ' + options.backgroundColor + ' url(/Content/bootstrap-loading/images/loading.gif) no-repeat 5px center; color:' + options.TipsColor + ';font-size:20px;">' + options.loadingTips + '</div></div>';
  39. //呈现loading效果
  40. $("body").append(_LoadingHtml);
  41. //获取loading提示框宽高
  42. var _LoadingTipsH = document.getElementById("loadingTips").clientHeight,
  43. _LoadingTipsW = document.getElementById("loadingTips").clientWidth;
  44. //计算距离,让loading提示框保持在屏幕上下左右居中
  45. var _LoadingTop = _PageHeight > _LoadingTipsH ? (_PageHeight - _LoadingTipsH) / 2 : 0,
  46. _LoadingLeft = _PageWidth > _LoadingTipsW ? (_PageWidth - _LoadingTipsW) / 2 : 0;
  47. $("#loadingTips").css({
  48. "left": _LoadingLeft + "px",
  49. "top": _LoadingTop + "px"
  50. });
  51. //监听页面加载状态
  52. document.onreadystatechange = PageLoaded;
  53. //当页面加载完成后执行
  54. function PageLoaded() {
  55. if (document.readyState == "complete") {
  56. var loadingMask = $('#loadingPage');
  57. setTimeout(function () {
  58. loadingMask.animate({
  59. "opacity": 0
  60. },
  61. options.delayTime,
  62. function () {
  63. $(this).hide();
  64. });
  65. },
  66. options.sleep);
  67. }
  68. }
  69. },
  70. end: function () {
  71. $("#loadingPage").remove();
  72. }
  73. }

这个js基本上是网上down下来的,只是在此基础上博主加了一个end的方法。

来看看组件如何使用,下面是测试代码:

  1. <html>
  2. <head>
  3. <meta name="viewport" content="width=device-width" />
  4. <title>loading</title>
  5. <link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" />
  6. <script src="~/Content/jquery-1.9.1.js"></script>
  7. <script src="~/Content/bootstrap/js/bootstrap.js"></script>
  8. <script src="~/Content/bootstrap-loading/PerfectLoad.js"></script>
  9. <script type="text/javascript">
  10. $(function () {
  11. $("#btn_submit").on("click", function () {
  12. $.bootstrapLoading.start({ loadingTips: "正在处理数据,请稍候..." });
  13. $.ajax({
  14. type: 'get',
  15. url: '/Home/TestLoading',
  16. data: {},
  17. success: function (data, statu) {
  18. debugger;
  19. },
  20. complete: function () {
  21. $.bootstrapLoading.end();
  22. }
  23. });
  24. })
  25. });
  26. </script>
  27. </head>
  28. <body>
  29. <div class="panel-body" style="padding:0px">
  30. <div class="panel panel-default" style="height:450px;">
  31. <div class="panel-heading">查询条件</div>
  32. <div class="panel-body">
  33. <form id="formSearch" class="form-horizontal">
  34. <div class="form-group">
  35. <div class="col-xs-4">
  36. <button type="button" id="btn_submit" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>加载测试</button>
  37. </div>
  38. </div>
  39. </form>
  40. </div>
  41. </div>
  42. </div>
  43. </body>
  44. </html>

使用说明:组件不需要任何的html代码,只需要在执行loading的时候调用组件的start方法即可。 start()方法启动弹出层,并可设置defaults 变量里面的所有参数。当loading结束后再调用组件的end方法,自动将弹出层移除。来看看效果:

如果对效果不满意,可自己设置defaults里面的参数,注释写得很详细,在此就不一一列举了。

2、菊花加载组件spin.js

使用图片显示加载效果有它天生的弊端,所以现在很多的加载组件都使用css+js去实现动画效果。spin.js就是其中一个例子,spin.js是一个开源组件,开源地址。

下载源码后,初始化发现组件不带遮罩的效果,只能这样:

找了半天它的参数,硬是没找到,亦或是哪里有“机关”没发现。没办法,博主只能自己加上遮罩的效果了。于是新建了一个css样式文件暂且命名为spin.css,里面只有一个样式:

  1. .fade {
  2.   position: fixed;
  3. top: 0;
  4. right: 0;
  5. bottom: 0;
  6. left: 0;
  7. z-index: 9999;
  8. opacity: 1;
  9. background-color: grey;
  10. }

然后将spin.js改写了两个地方,改写后的内容如下:

  1. /**
  2. * Copyright (c) 2011-2014 Felix Gnass
  3. * Licensed under the MIT license
  4. * http://spin.js.org/
  5. *
  6. * Example:
  7. var opts = {
  8. lines: 12, // The number of lines to draw
  9. length: 7, // The length of each line
  10. width: 5, // The line thickness
  11. radius: 10, // The radius of the inner circle
  12. scale: 1.0, // Scales overall size of the spinner
  13. corners: 1, // Roundness (0..1)
  14. color: '#000', // #rgb or #rrggbb
  15. opacity: 1/4, // Opacity of the lines
  16. rotate: 0, // Rotation offset
  17. direction: 1, // 1: clockwise, -1: counterclockwise
  18. speed: 1, // Rounds per second
  19. trail: 100, // Afterglow percentage
  20. fps: 20, // Frames per second when using setTimeout()
  21. zIndex: 2e9, // Use a high z-index by default
  22. className: 'spinner', // CSS class to assign to the element
  23. top: '50%', // center vertically
  24. left: '50%', // center horizontally
  25. shadow: false, // Whether to render a shadow
  26. hwaccel: false, // Whether to use hardware acceleration (might be buggy)
  27. position: 'absolute' // Element positioning
  28. };
  29. var target = document.getElementById('foo');
  30. var spinner = new Spinner(opts).spin(target);
  31. */
  32. ;(function(root, factory) {
  33. if (typeof module == 'object' && module.exports) module.exports = factory(); // CommonJS
  34. else if (typeof define == 'function' && define.amd) define(factory); // AMD module
  35. else root.Spinner = factory(); // Browser global
  36. }
  37. (this, function() {
  38. 'use strict';
  39. var prefixes = ['webkit', 'Moz', 'ms', 'O']; // Vendor prefixes
  40. var animations = {}; // Animation rules keyed by their name
  41. var useCssAnimations; // Whether to use CSS animations or setTimeout
  42. var sheet; // A stylesheet to hold the @keyframe or VML rules
  43. /**
  44. * Utility function to create elements. If no tag name is given,
  45. * a DIV is created. Optionally properties can be passed.
  46. */
  47. function createEl(tag, prop) {
  48. var el = document.createElement(tag || 'div');
  49. var n;
  50. for (n in prop) el[n] = prop[n];
  51. return el;
  52. }
  53. /**
  54. * Appends children and returns the parent.
  55. */
  56. function ins(parent /* child1, child2, ...*/) {
  57. for (var i = 1, n = arguments.length; i < n; i++) {
  58. parent.appendChild(arguments[i]);
  59. }
  60. return parent;
  61. }
  62. /**
  63. * Creates an opacity keyframe animation rule and returns its name.
  64. * Since most mobile Webkits have timing issues with animation-delay,
  65. * we create separate rules for each line/segment.
  66. */
  67. function addAnimation(alpha, trail, i, lines) {
  68. var name = ['opacity', trail, ~~(alpha * 100), i, lines].join('-');
  69. var start = 0.01 + i/lines * 100;
  70. var z = Math.max(1 - (1-alpha) / trail * (100-start), alpha);
  71. var prefix = useCssAnimations.substring(0, useCssAnimations.indexOf('Animation')).toLowerCase();
  72. var pre = prefix && '-' + prefix + '-' || '';
  73. if (!animations[name]) {
  74. sheet.insertRule(
  75. '@' + pre + 'keyframes ' + name + '{' +
  76. '0%{opacity:' + z + '}' +
  77. start + '%{opacity:' + alpha + '}' +
  78. (start+0.01) + '%{opacity:1}' +
  79. (start+trail) % 100 + '%{opacity:' + alpha + '}' +
  80. '100%{opacity:' + z + '}' +
  81. '}', sheet.cssRules.length);
  82. animations[name] = 1;
  83. }
  84. return name;
  85. }
  86. /**
  87. * Tries various vendor prefixes and returns the first supported property.
  88. */
  89. function vendor(el, prop) {
  90. var s = el.style;
  91. var pp;
  92. var i;
  93. prop = prop.charAt(0).toUpperCase() + prop.slice(1);
  94. if (s[prop] !== undefined) return prop;
  95. for (i = 0; i < prefixes.length; i++) {
  96. pp = prefixes[i]+prop;
  97. if (s[pp] !== undefined) return pp;
  98. }
  99. }
  100. /**
  101. * Sets multiple style properties at once.
  102. */
  103. function css(el, prop) {
  104. for (var n in prop) {
  105. el.style[vendor(el, n) || n] = prop[n];
  106. }
  107. return el;
  108. }
  109. /**
  110. * Fills in default values.
  111. */
  112. function merge(obj) {
  113. for (var i = 1; i < arguments.length; i++) {
  114. var def = arguments[i];
  115. for (var n in def) {
  116. if (obj[n] === undefined) obj[n] = def[n];
  117. }
  118. }
  119. return obj;
  120. }
  121. /**
  122. * Returns the line color from the given string or array.
  123. */
  124. function getColor(color, idx) {
  125. return typeof color == 'string' ? color : color[idx % color.length];
  126. }
  127. // Built-in defaults
  128. var defaults = {
  129. lines: 12, // The number of lines to draw
  130. length: 7, // The length of each line
  131. width: 5, // The line thickness
  132. radius: 10, // The radius of the inner circle
  133. scale: 1.0, // Scales overall size of the spinner
  134. corners: 1, // Roundness (0..1)
  135. color: '#000', // #rgb or #rrggbb
  136. opacity: 1/4, // Opacity of the lines
  137. rotate: 0, // Rotation offset
  138. direction: 1, // 1: clockwise, -1: counterclockwise
  139. speed: 1, // Rounds per second
  140. trail: 100, // Afterglow percentage
  141. fps: 20, // Frames per second when using setTimeout()
  142. zIndex: 2e9, // Use a high z-index by default
  143. className: 'spinner', // CSS class to assign to the element
  144. top: '50%', // center vertically
  145. left: '50%', // center horizontally
  146. shadow: false, // Whether to render a shadow
  147. hwaccel: false, // Whether to use hardware acceleration
  148. position: 'absolute' // Element positioning
  149. };
  150. /** The constructor */
  151. function Spinner(o) {
  152. this.opts = merge(o || {}, Spinner.defaults, defaults);
  153. }
  154. // Global defaults that override the built-ins:
  155. Spinner.defaults = {};
  156. merge(Spinner.prototype, {
  157. /**
  158. * Adds the spinner to the given target element. If this instance is already
  159. * spinning, it is automatically removed from its previous target b calling
  160. * stop() internally.
  161. */
  162. spin: function(target) {
  163. this.stop();
  164. var self = this;
  165. var o = self.opts;
  166. var el = self.el = createEl(null, {className: o.className});
  167. css(el, {
  168. position: o.position,
  169. width: 0,
  170. zIndex: o.zIndex,
  171. left: o.left,
  172. top: o.top
  173. });
  174. if (target) {
  175. target.insertBefore(el, target.firstChild || null);
  176. target.className = "fade";
  177. }
  178. el.setAttribute('role', 'progressbar');
  179. self.lines(el, self.opts);
  180. if (!useCssAnimations) {
  181. // No CSS animation support, use setTimeout() instead
  182. var i = 0;
  183. var start = (o.lines - 1) * (1 - o.direction) / 2;
  184. var alpha;
  185. var fps = o.fps;
  186. var f = fps / o.speed;
  187. var ostep = (1 - o.opacity) / (f * o.trail / 100);
  188. var astep = f / o.lines;
  189. (function anim() {
  190. i++;
  191. for (var j = 0; j < o.lines; j++) {
  192. alpha = Math.max(1 - (i + (o.lines - j) * astep) % f * ostep, o.opacity);
  193. self.opacity(el, j * o.direction + start, alpha, o);
  194. }
  195. self.timeout = self.el && setTimeout(anim, ~~(1000 / fps));
  196. })();
  197. }
  198. return self;
  199. },
  200. /**
  201. * Stops and removes the Spinner.
  202. */
  203. stop: function() {
  204. var el = this.el;
  205. if (el) {
  206. clearTimeout(this.timeout);
  207. if (el.parentNode) {
  208. var reg = new RegExp('(\\s|^)fade(\\s|$)');
  209. el.parentNode.className = el.parentNode.className.replace(reg, ' ');
  210. el.parentNode.removeChild(el);
  211. }
  212. this.el = undefined;
  213. }
  214. return this;
  215. },
  216. /**
  217. * Internal method that draws the individual lines. Will be overwritten
  218. * in VML fallback mode below.
  219. */
  220. lines: function(el, o) {
  221. var i = 0;
  222. var start = (o.lines - 1) * (1 - o.direction) / 2;
  223. var seg;
  224. function fill(color, shadow) {
  225. return css(createEl(), {
  226. position: 'absolute',
  227. width: o.scale * (o.length + o.width) + 'px',
  228. height: o.scale * o.width + 'px',
  229. background: color,
  230. boxShadow: shadow,
  231. transformOrigin: 'left',
  232. transform: 'rotate(' + ~~(360/o.lines*i + o.rotate) + 'deg) translate(' + o.scale*o.radius + 'px' + ',0)',
  233. borderRadius: (o.corners * o.scale * o.width >> 1) + 'px'
  234. });
  235. }
  236. for (; i < o.lines; i++) {
  237. seg = css(createEl(), {
  238. position: 'absolute',
  239. top: 1 + ~(o.scale * o.width / 2) + 'px',
  240. transform: o.hwaccel ? 'translate3d(0,0,0)' : '',
  241. opacity: o.opacity,
  242. animation: useCssAnimations && addAnimation(o.opacity, o.trail, start + i * o.direction, o.lines) + ' ' + 1 / o.speed + 's linear infinite'
  243. });
  244. if (o.shadow) ins(seg, css(fill('#000', '0 0 4px #000'), {top: '2px'}));
  245. ins(el, ins(seg, fill(getColor(o.color, i), '0 0 1px rgba(0,0,0,.1)')));
  246. }
  247. return el;
  248. },
  249. /**
  250. * Internal method that adjusts the opacity of a single line.
  251. * Will be overwritten in VML fallback mode below.
  252. */
  253. opacity: function(el, i, val) {
  254. if (i < el.childNodes.length) el.childNodes[i].style.opacity = val;
  255. }
  256. });
  257. function initVML() {
  258. /* Utility function to create a VML tag */
  259. function vml(tag, attr) {
  260. return createEl('<' + tag + ' xmlns="urn:schemas-microsoft.com:vml" class="spin-vml">', attr);
  261. }
  262. // No CSS transforms but VML support, add a CSS rule for VML elements:
  263. sheet.addRule('.spin-vml', 'behavior:url(#default#VML)');
  264. Spinner.prototype.lines = function(el, o) {
  265. var r = o.scale * (o.length + o.width);
  266. var s = o.scale * 2 * r;
  267. function grp() {
  268. return css(
  269. vml('group', {
  270. coordsize: s + ' ' + s,
  271. coordorigin: -r + ' ' + -r
  272. }),
  273. { width: s, height: s }
  274. );
  275. }
  276. var margin = -(o.width + o.length) * o.scale * 2 + 'px';
  277. var g = css(grp(), {position: 'absolute', top: margin, left: margin});
  278. var i;
  279. function seg(i, dx, filter) {
  280. ins(
  281. g,
  282. ins(
  283. css(grp(), {rotation: 360 / o.lines * i + 'deg', left: ~~dx}),
  284. ins(
  285. css(
  286. vml('roundrect', {arcsize: o.corners}),
  287. {
  288. width: r,
  289. height: o.scale * o.width,
  290. left: o.scale * o.radius,
  291. top: -o.scale * o.width >> 1,
  292. filter: filter
  293. }
  294. ),
  295. vml('fill', {color: getColor(o.color, i), opacity: o.opacity}),
  296. vml('stroke', {opacity: 0}) // transparent stroke to fix color bleeding upon opacity change
  297. )
  298. )
  299. );
  300. }
  301. if (o.shadow)
  302. for (i = 1; i <= o.lines; i++) {
  303. seg(i, -2, 'progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)');
  304. }
  305. for (i = 1; i <= o.lines; i++) seg(i);
  306. return ins(el, g);
  307. };
  308. Spinner.prototype.opacity = function(el, i, val, o) {
  309. var c = el.firstChild;
  310. o = o.shadow && o.lines || 0;
  311. if (c && i + o < c.childNodes.length) {
  312. c = c.childNodes[i + o]; c = c && c.firstChild; c = c && c.firstChild;
  313. if (c) c.opacity = val;
  314. }
  315. };
  316. }
  317. if (typeof document !== 'undefined') {
  318. sheet = (function() {
  319. var el = createEl('style', {type : 'text/css'});
  320. ins(document.getElementsByTagName('head')[0], el);
  321. return el.sheet || el.styleSheet;
  322. }());
  323. var probe = css(createEl('group'), {behavior: 'url(#default#VML)'});
  324. if (!vendor(probe, 'transform') && probe.adj) initVML();
  325. else useCssAnimations = vendor(probe, 'animation');
  326. }
  327. return Spinner;
  328. }));

spin.js

改动的两个地方:

(1)初始化的时候,如果是显示,则给对应的标签加上fade样式

(2)、每次都将fade样式删除掉。

改好之后,就是测试界面了。

  1. <html>
  2. <head>
  3. <meta name="viewport" content="width=device-width" />
  4. <title>loading2</title>
  5. <link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" />
  6. <link href="~/Content/spin.js-master/css/spin.css" rel="stylesheet" />
  7. <script src="~/Content/jquery-1.9.1.js"></script>
  8. <script src="~/Content/bootstrap/js/bootstrap.js"></script>
  9. <script src="~/Content/spin.js-master/js/spin.js"></script>
  10. <script type="text/javascript">
  11. $(function () {
  12. $("#btn_submit").on("click", function () {
  13. //var opts = {
  14. // lines: 9, // 花瓣数目
  15. // length: 1, // 花瓣长度
  16. // width: 10, // 花瓣宽度
  17. // radius: 15, // 花瓣距中心半径
  18. // corners: 1, // 花瓣圆滑度 (0-1)
  19. // rotate: 0, // 花瓣旋转角度
  20. // direction: 1, // 花瓣旋转方向 1: 顺时针, -1: 逆时针
  21. // color: '#000', // 花瓣颜色
  22. // speed: 1, // 花瓣旋转速度
  23. // trail: 60, // 花瓣旋转时的拖影(百分比)
  24. // shadow: false, // 花瓣是否显示阴影
  25. // hwaccel: false, //spinner 是否启用硬件加速及高速旋转
  26. // className: 'spinner', // spinner css 样式名称
  27. // zIndex: 2e9, // spinner的z轴 (默认是2000000000)
  28. // top: 'auto', // spinner 相对父容器Top定位 单位 px
  29. // left: 'auto'// spinner 相对父容器Left定位 单位 px
  30. //};
  31. //var target = document.getElementById('foo');
  32. //var spinner = new Spinner({}).spin(target);
  33. var spinner = undefined;
  34. $.ajax({
  35. type: 'get',
  36. url: '/Home/TestLoading',
  37. data: {},
  38. beforeSend: function () {
  39. var option = {
  40. lines: 9, // 花瓣数目
  41. length: 1, // 花瓣长度
  42. width: 10, // 花瓣宽度
  43. radius: 15, // 花瓣距中心半径
  44. shadow: true,
  45. opacity:1/8
  46. };
  47. var target = document.getElementById('foo');
  48. spinner = new Spinner(option).spin(target);//显示加载
  49. },
  50. success: function (data, statu) {
  51. //debugger;
  52. },
  53. complete: function () {
  54. spinner.spin();//移除加载
  55. }
  56. });
  57. })
  58. });
  59. </script>
  60. </head>
  61. <body>
  62. <div class="panel-body" style="padding:0px">
  63. <div class="panel panel-default" style="height:450px;">
  64. <div class="panel-heading">查询条件</div>
  65. <div class="panel-body">
  66. <form id="formSearch" class="form-horizontal">
  67. <div class="form-group">
  68. <div class="col-xs-4">
  69. <button type="button" id="btn_submit" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>加载测试</button>
  70. </div>
  71. </div>
  72. </form>
  73. </div>
  74. </div>
  75. </div>
  76. <div id="foo"></div>
  77. </body>
  78. </html>
  79. test_spin.cshtml

使用说明:如果你的页面不使用jQuery,引用spin.js这个文件,这个文件不需要jquery的支持;如果想要使用jQuery,则引用jquery.spin.js文件。上面的代码是不使用jQuery的情况。组件需要定义一个空的div,然后在此div上面做初始化。得到的效果如下:

当然,如果你对此效果不满意,你还可以设置遮罩层的透明度,以及整个遮罩的样式。还有旋转的各个参数,都可以通过初始化的时候自定义,上述代码里面有详细注释。

二)、炫酷型

1、jquery.shCircleLoader.js组件

此组件效果不用说,使用也比较简单,但是对IE10以下版本不支持。看看效果先:

至于具体的代码使用,博主不打算深究,可以去百度或者github上面找找。

2、fakeLoader.js组件

更多的选择,更好的扁平化效果,更好的手机、平板设备体验。只需要看看图片感受下就知道了。开源地址。

四、流程图小插件

前段时间做一个工作流的需求,需要显示当前流程进行到哪一步,找到了一个流程小插件ystep。此组件优点在于使用简单、够轻量级。

1、效果展示

先来看看效果

蓝色缩小版

2、源码说明

开源地址。

3、代码示例

首先引用必须的文件

  1. <link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" />
  2. <link href="~/Content/ystep-master/css/ystep.css" rel="stylesheet" />
  3. <script src="~/Content/jquery-1.9.1.js"></script>
  4. <script src="~/Content/bootstrap/js/bootstrap.js"></script>
  5. <script src="~/Content/ystep-master/js/ystep.js"></script>

这个组件需要jQuery和bootstrap两个组件的支持。

然后定义一个空的div

  1. <div id="div_ystep1"></div>

最后在点击按钮的时候初始化组件

  1. <script type="text/javascript">
  2. $(function () {
  3. $("#btn_submit").click(function () {
  4. $("#div_ystep1").loadStep({
  5. //ystep的外观大小
  6. //可选值:small,large
  7. size: "small",
  8. //ystep配色方案
  9. //可选值:green,blue
  10. color: "blue",
  11. //ystep中包含的步骤
  12. steps: [{
  13. //步骤名称
  14. title: "开始",
  15. //步骤内容(鼠标移动到本步骤节点时,会提示该内容)
  16. content: "流程开始"
  17. }, {
  18. title: "审批",
  19. content: "各个角色开始审批"
  20. }, {
  21. title: "实施",
  22. content: "需求开始实施"
  23. }, {
  24. title: "结束",
  25. content: "流程结束"
  26. }]
  27. });
  28. $("#div_ystep1").setStep(3);
  29. });
  30. });
  31. </script>

如果是动态步骤,可能需要动态去构造steps属性。然后通过setStep()设置当前到了哪一步。

常用方法:

  1. //跳转到下一个步骤
  2. $(".ystep1").nextStep();
  3. //跳转到上一个步骤
  4. $(".ystep1").prevStep();
  5. //跳转到指定步骤
  6. $(".ystep1").setStep(2);
  7. //获取当前在第几步
  8. $(".ystep1").getStep();

五、按钮提示组件bootstrap-confirmation

按钮提示组件有点类似js里面confirm的功能,不过这个confirm是以一种tooltip的方式弹出来的效果,给用户一个确定、取消的判断,界面更加友好。介绍这个组件之前,可以先来看看bootstrap里面提示框的效果:

bootstrap-confirmation组件就是基于这个提示框的效果来实现的。github上面有好多个bootstrap-confirmation组件,但基本大同小异。。

1、效果展示

最原始的效果

自定义title、按钮文本

2、源码说明

开源地址

3、代码示例

(1)引用文件:

  1. <link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" />
  2. <script src="~/Content/jquery-1.9.1.js"></script>
  3. <script src="~/Content/bootstrap/js/bootstrap.js"></script><script src="~/Content/bootstrap-confirmation/bootstrap-confirmation.js"></script>

样式需要bootstrap.css的支持JavaScript需要jquery和bootstrap.js的支持。

(2)对应的点击标签(可以是任意标签)

  1. <button type="button" id="btn_submit1" class="btn btn-primary"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除</button>

(3)js初始化

  1. <script type="text/javascript">
  2. $(function () {
  3. $('#btn_submit1').confirmation({
  4. animation: true,
  5. placement: "bottom",
  6. title: "确定要删除吗?",
  7. btnOkLabel: '确定',
  8. btnCancelLabel: '取消',
  9. onConfirm: function () {
  10. //alert("点击了确定");
  11. },
  12. onCancel: function () { //alert("点击了取消");
  13. }
  14. })
  15. });
  16. </script>

(4)更多属性、事件、方法

除了上述初始化的属性,还有一些常用的属性。比如:

btnOkClass:确定按钮的样式;btnCancelClass:取消按钮的样式;singleton:是否只允许出现一个确定框;popout:当用户点击其他地方的时候是否隐藏确定框;

比如你可以将btnOkClass设置成btnOkClass : 'btn btn-sm btn-primary',

六、图片分类、过滤组件MuxitUp

这是一个效果非常炫酷的分组、过滤组件,开源地址。博主在网上看到一个它的demo,觉得效果确实很好,废话不多说,上图。

怎么样,效果还行吧。这个组件在项目里面暂时没用上,但觉得以后有需要的可能,就将此收藏了一把。实现代码是网上copy过来的,没有深究,有兴趣可以看看。html+js代码实现如下:

  1. <html>
  2. <head>
  3. <meta name="viewport" content="width=device-width" />
  4. <title>mixitup</title>
  5. <link href="~/Content/image/css/normalize.css" rel="stylesheet" />
  6. <link href="~/Content/image/css/layout.css" rel="stylesheet" />
  7. <script src="~/Content/jquery-1.9.1.js"></script>
  8. <script src="~/Content/mixitup-master/jquery.easing.min.js"></script>
  9. <script src="~/Content/mixitup-master/build/jquery.mixitup.min.js"></script>
  10. <script type="text/javascript">
  11. $(function () {
  12. var filterList = {
  13. init: function () {
  14. debugger;
  15. // MixItUp plugin
  16. $('#portfoliolist').mixitup({
  17. targetSelector: '.portfolio',
  18. filterSelector: '.filter',
  19. effects: ['fade'],
  20. easing: 'snap',
  21. // call the hover effect
  22. onMixEnd: filterList.hoverEffect()
  23. });
  24. },
  25. hoverEffect: function () {
  26. // Simple parallax effect
  27. $('#portfoliolist .portfolio').hover(
  28. function () {
  29. $(this).find('.label').stop().animate({ bottom: 0 }, 200, 'easeOutQuad');
  30. $(this).find('img').stop().animate({ top: -30 }, 500, 'easeOutQuad');
  31. },
  32. function () {
  33. $(this).find('.label').stop().animate({ bottom: -40 }, 200, 'easeInQuad');
  34. $(this).find('img').stop().animate({ top: 0 }, 300, 'easeOutQuad');
  35. }
  36. );
  37. }
  38. };
  39. // Run the show!
  40. filterList.init();
  41. });
  42. </script>
  43. </head>
  44. <body>
  45. <div class="container">
  46. <ul id="filters" class="clearfix">
  47. <li><span class="filter active" data-filter="app card icon logo web">所有分类</span></li>
  48. <li><span class="filter" data-filter="app">手机应用</span></li>
  49. <li><span class="filter" data-filter="card">卡片</span></li>
  50. <li><span class="filter" data-filter="icon">图标</span></li>
  51. <li><span class="filter" data-filter="logo">Logo</span></li>
  52. <li><span class="filter" data-filter="web">网页</span></li>
  53. </ul>
  54. <div id="portfoliolist">
  55. <div class="portfolio logo" data-cat="logo">
  56. <div class="portfolio-wrapper">
  57. <img src="~/Content/image/Logo/5.jpg" alt="" />
  58. <div class="label">
  59. <div class="label-text">
  60. <a class="text-title">Bird Document</a>
  61. <span class="text-category">Logo</span>
  62. </div>
  63. <div class="label-bg"></div>
  64. </div>
  65. </div>
  66. </div>
  67. <div class="portfolio app" data-cat="app">
  68. <div class="portfolio-wrapper">
  69. <img src="~/Content/image/app/1.jpg" alt="" />
  70. <div class="label">
  71. <div class="label-text">
  72. <a class="text-title">Visual Infography</a>
  73. <span class="text-category">APP</span>
  74. </div>
  75. <div class="label-bg"></div>
  76. </div>
  77. </div>
  78. </div>
  79. <div class="portfolio web" data-cat="web">
  80. <div class="portfolio-wrapper">
  81. <img src="~/Content/image/web/4.jpg" alt="" />
  82. <div class="label">
  83. <div class="label-text">
  84. <a class="text-title">Sonor's Design</a>
  85. <span class="text-category">Web design</span>
  86. </div>
  87. <div class="label-bg"></div>
  88. </div>
  89. </div>
  90. </div>
  91. <div class="portfolio card" data-cat="card">
  92. <div class="portfolio-wrapper">
  93. <img src="~/Content/image/card/1.jpg" alt="" />
  94. <div class="label">
  95. <div class="label-text">
  96. <a class="text-title">Typography Company</a>
  97. <span class="text-category">Business card</span>
  98. </div>
  99. <div class="label-bg"></div>
  100. </div>
  101. </div>
  102. </div>
  103. <div class="portfolio app" data-cat="app">
  104. <div class="portfolio-wrapper">
  105. <img src="~/Content/image/app/3.jpg" alt="" />
  106. <div class="label">
  107. <div class="label-text">
  108. <a class="text-title">Weatherette</a>
  109. <span class="text-category">APP</span>
  110. </div>
  111. <div class="label-bg"></div>
  112. </div>
  113. </div>
  114. </div>
  115. <div class="portfolio card" data-cat="card">
  116. <div class="portfolio-wrapper">
  117. <img src="~/Content/image/card/4.jpg" alt="" />
  118. <div class="label">
  119. <div class="label-text">
  120. <a class="text-title">BMF</a>
  121. <span class="text-category">Business card</span>
  122. </div>
  123. <div class="label-bg"></div>
  124. </div>
  125. </div>
  126. </div>
  127. <div class="portfolio card" data-cat="card">
  128. <div class="portfolio-wrapper">
  129. <img src="~/Content/image/card/5.jpg" alt="" />
  130. <div class="label">
  131. <div class="label-text">
  132. <a class="text-title">Techlion</a>
  133. <span class="text-category">Business card</span>
  134. </div>
  135. <div class="label-bg"></div>
  136. </div>
  137. </div>
  138. </div>
  139. <div class="portfolio logo" data-cat="logo">
  140. <div class="portfolio-wrapper">
  141. <img src="~/Content/image/logo/1.jpg" alt="" />
  142. <div class="label">
  143. <div class="label-text">
  144. <a class="text-title">KittyPic</a>
  145. <span class="text-category">Logo</span>
  146. </div>
  147. <div class="label-bg"></div>
  148. </div>
  149. </div>
  150. </div>
  151. <div class="portfolio app" data-cat="app">
  152. <div class="portfolio-wrapper">
  153. <img src="~/Content/image/app/2.jpg" alt="" />
  154. <div class="label">
  155. <div class="label-text">
  156. <a class="text-title">Graph Plotting</a>
  157. <span class="text-category">APP</span>
  158. </div>
  159. <div class="label-bg"></div>
  160. </div>
  161. </div>
  162. </div>
  163. <div class="portfolio card" data-cat="card">
  164. <div class="portfolio-wrapper">
  165. <img src="~/Content/image/card/2.jpg" alt="" />
  166. <div class="label">
  167. <div class="label-text">
  168. <a class="text-title">QR Quick Response</a>
  169. <span class="text-category">Business card</span>
  170. </div>
  171. <div class="label-bg"></div>
  172. </div>
  173. </div>
  174. </div>
  175. <div class="portfolio logo" data-cat="logo">
  176. <div class="portfolio-wrapper">
  177. <img src="~/Content/image/logo/6.jpg" alt="" />
  178. <div class="label">
  179. <div class="label-text">
  180. <a class="text-title">Mobi Sock</a>
  181. <span class="text-category">Logo</span>
  182. </div>
  183. <div class="label-bg"></div>
  184. </div>
  185. </div>
  186. </div>
  187. <div class="portfolio logo" data-cat="logo">
  188. <div class="portfolio-wrapper">
  189. <img src="~/Content/image/logo/7.jpg" alt="" />
  190. <div class="label">
  191. <div class="label-text">
  192. <a class="text-title">Village Community Church</a>
  193. <span class="text-category">Logo</span>
  194. </div>
  195. <div class="label-bg"></div>
  196. </div>
  197. </div>
  198. </div>
  199. <div class="portfolio icon" data-cat="icon">
  200. <div class="portfolio-wrapper">
  201. <img src="~/Content/image/icon/4.jpg" alt="" />
  202. <div class="label">
  203. <div class="label-text">
  204. <a class="text-title">Domino's Pizza</a>
  205. <span class="text-category">Icon</span>
  206. </div>
  207. <div class="label-bg"></div>
  208. </div>
  209. </div>
  210. </div>
  211. <div class="portfolio web" data-cat="web">
  212. <div class="portfolio-wrapper">
  213. <img src="~/Content/image/web/3.jpg" alt="" />
  214. <div class="label">
  215. <div class="label-text">
  216. <a class="text-title">Backend Admin</a>
  217. <span class="text-category">Web design</span>
  218. </div>
  219. <div class="label-bg"></div>
  220. </div>
  221. </div>
  222. </div>
  223. <div class="portfolio icon" data-cat="icon">
  224. <div class="portfolio-wrapper">
  225. <img src="~/Content/image/icon/1.jpg" alt="" />
  226. <div class="label">
  227. <div class="label-text">
  228. <a class="text-title">Instagram</a>
  229. <span class="text-category">Icon</span>
  230. </div>
  231. <div class="label-bg"></div>
  232. </div>
  233. </div>
  234. </div>
  235. <div class="portfolio web" data-cat="web">
  236. <div class="portfolio-wrapper">
  237. <img src="~/Content/image/web/2.jpg" alt="" />
  238. <div class="label">
  239. <div class="label-text">
  240. <a class="text-title">Student Guide</a>
  241. <span class="text-category">Web design</span>
  242. </div>
  243. <div class="label-bg"></div>
  244. </div>
  245. </div>
  246. </div>
  247. <div class="portfolio icon" data-cat="icon">
  248. <div class="portfolio-wrapper">
  249. <img src="~/Content/image/icon/2.jpg" alt="" />
  250. <div class="label">
  251. <div class="label-text">
  252. <a class="text-title">Scoccer</a>
  253. <span class="text-category">Icon</span>
  254. </div>
  255. <div class="label-bg"></div>
  256. </div>
  257. </div>
  258. </div>
  259. <div class="portfolio icon" data-cat="icon">
  260. <div class="portfolio-wrapper">
  261. <img src="~/Content/image/icon/5.jpg" alt="" />
  262. <div class="label">
  263. <div class="label-text">
  264. <a class="text-title">3D Map</a>
  265. <span class="text-category">Icon</span>
  266. </div>
  267. <div class="label-bg"></div>
  268. </div>
  269. </div>
  270. </div>
  271. <div class="portfolio web" data-cat="web">
  272. <div class="portfolio-wrapper">
  273. <img src="~/Content/image/web/1.jpg" alt="" />
  274. <div class="label">
  275. <div class="label-text">
  276. <a class="text-title">Note</a>
  277. <span class="text-category">Web design</span>
  278. </div>
  279. <div class="label-bg"></div>
  280. </div>
  281. </div>
  282. </div>
  283. <div class="portfolio logo" data-cat="logo">
  284. <div class="portfolio-wrapper">
  285. <img src="~/Content/image/logo/3.jpg" alt="" />
  286. <div class="label">
  287. <div class="label-text">
  288. <a class="text-title">Native Designers</a>
  289. <span class="text-category">Logo</span>
  290. </div>
  291. <div class="label-bg"></div>
  292. </div>
  293. </div>
  294. </div>
  295. <div class="portfolio logo" data-cat="logo">
  296. <div class="portfolio-wrapper">
  297. <img src="~/Content/image/logo/4.jpg" alt="" />
  298. <div class="label">
  299. <div class="label-text">
  300. <a class="text-title">Bookworm</a>
  301. <span class="text-category">Logo</span>
  302. </div>
  303. <div class="label-bg"></div>
  304. </div>
  305. </div>
  306. </div>
  307. <div class="portfolio icon" data-cat="icon">
  308. <div class="portfolio-wrapper">
  309. <img src="~/Content/image/icon/3.jpg" alt="" />
  310. <div class="label">
  311. <div class="label-text">
  312. <a class="text-title">Sandwich</a>
  313. <span class="text-category">Icon</span>
  314. </div>
  315. <div class="label-bg"></div>
  316. </div>
  317. </div>
  318. </div>
  319. <div class="portfolio card" data-cat="card">
  320. <div class="portfolio-wrapper">
  321. <img src="~/Content/image/card/3.jpg" alt="" />
  322. <div class="label">
  323. <div class="label-text">
  324. <a class="text-title">Reality</a>
  325. <span class="text-category">Business card</span>
  326. </div>
  327. <div class="label-bg"></div>
  328. </div>
  329. </div>
  330. </div>
  331. <div class="portfolio logo" data-cat="logo">
  332. <div class="portfolio-wrapper">
  333. <img src="~/Content/image/logo/2.jpg" alt="" />
  334. <div class="label">
  335. <div class="label-text">
  336. <a class="text-title">Speciallisterne</a>
  337. <span class="text-category">Logo</span>
  338. </div>
  339. <div class="label-bg"></div>
  340. </div>
  341. </div>
  342. </div>
  343. </div>
  344. </div><!-- container -->
  345. </body>
  346. </html>
  347. muxitup

以上是博主最近收藏的一些前端组件,在此分享给大家,有实用型,也有炫酷型,不管如何,希望能帮助需要的朋友节省寻找组件的时间。

上面分享了几个项目中比较常用的组件,引起了许多朋友的关注。下面还是继续,因为觉得还有几个非常简单、实用的组件,实在不愿自己一人独享,没办法,谁让博主这么爱分享呢~~

七、多值输入组件manifest
 关于文本框的多值输入,一直是一个比较常见的需求,今天博主推荐一款好用的多值输入组件给大家,不要谢我,请叫我“红领巾”!
1、效果展示
 本地多值输入框

远程多值输入框

2、源码说明
感谢开源社区,感谢那些喜欢分享的可爱的人儿,开源地址。
3、代码示例
(1)本地多值输入
首先需要引用如下几个文件 

  1. <link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" />
  2. <link href="~/Content/jquery-manifest-master/src/jquery.manifest.css" rel="stylesheet" />
  3. <script src="~/Content/jquery-1.9.1.js"></script>
  4. <script src="~/Content/bootstrap/js/bootstrap.js"></script>
  5. <script src="~/Content/jquery-manifest-master/build/parts/jquery.ui.widget.js"></script>
  6. <script src="~/Content/jquery-manifest-master/build/jquery.manifest.js"></script>

bootstrap的Js和css文件并非必须,本文是为了样式好看,所以将其引用进来。manifest组件不依赖bootstrap,但是依赖jQuery,除此之外还需要引用jquery.manifest.css、jquery.ui.widget.js、jquery.marcopolo.js三个文件。
然后就是html和js的初始化

  1. <input type='text' autocomplete="off" id="txt_man" />
  2. <script type="text/javascript">
  3. $(function () {
  4. $('#txt_man').manifest();
  5. });
  6. </script>

通过简单如上简单的步骤,上面的效果就可出来,是不是很简单。简单来看看它的一些用法

  1. //常用属性:得到文本框里面所有项的集合
  2. var values = $('#txt_man').manifest('values');
  3. //常用方法1:移除最后一项
  4. $('#txt_man').manifest('remove', ':last');
  5. //常用方法2:项文本框里面新增一项。第二个参数的格式由JSON数据的格式决定
  6. $('#txt_man').manifest('add', {
  7. id: "1",
  8. name:"ABC"
  9. });
  10. //常用方法3:获取远程搜索到的数据的列表
  11. $('#txt_man').manifest('list');
  12. //常用事件1:组件的新增项事件
  13. $('#txt_man').on('manifestadd', function (event, data, $item, initial) {
  14. //alert("新增的项为:"+data);
  15. });
  16. //常用事件2:组件的移除项事件
  17. $('#txt_man').on('manifestremove', function (event, data, $item) {
  18. });
  19. //常用事件3:远程调用时通过键盘选择项变化的事件
  20. $('#txt_man').on('manifestselect', function (event, data, $item) {
  21. });

(2)远程多值输入 
远程搜索输入的方式,需要我们提供一个url地址,获取数据,然后返回到浏览器。本文为了简单,就直接用源码网站上面的url来展示效果了。 
首先需要引用的js文件 

  1. <link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" />
  2. <link href="~/Content/jquery-manifest-master/src/jquery.manifest.css" rel="stylesheet" />
  3. <script src="~/Content/jquery-1.9.1.js"></script>
  4. <script src="~/Content/bootstrap/js/bootstrap.js"></script>
  5. <script src="~/Content/jquery-manifest-master/build/parts/jquery.ui.widget.js"></script>
  6. <script src="~/Content/jquery-manifest-master/build/parts/jquery.marcopolo.js"></script>
  7. <script src="~/Content/jquery-manifest-master/build/jquery.manifest.js"></script>

和上面的相比,多了一个文件jquery.marcopolo.js的引用。
 然后就是html和js的初始化 

  1. <form action="https://api.foursquare.com/v2/venues/search?callback=?" method="get">
  2. <div class="form-group"><div class="col-xs-10">
  3. <input type='text' id="txt_man2" />
  4. <img src="~/Content/jquery-manifest-master/busy.gif" />
  5. </div>
  6. </div>
  7. </form>
  1. <script type="text/javascript">
  2. $(function () {
  3. $('#txt_man2').manifest({
  4. formatDisplay: function (data, $item, $mpItem) {
  5. return data.name;
  6. },
  7. formatValue: function (data, $value, $item, $mpItem) {
  8. return data.id;
  9. },
  10. marcoPolo: {
  11. data: {
  12. client_id: 'NO2MTQVBQANW3Q3SG23OFVMEGYOWIZDT4E1QHRPZO0BFCN4X',
  13. client_secret: 'LG2WRKKS1SXZ2FMKDG01LDW1KDTEKKTULMXM0XEVWRN0LLHB',
  14. intent: 'global',
  15. limit: 5,
  16. v: '20150601'
  17. },
  18. formatData: function (data) {
  19. return data.response.venues;
  20. },
  21. formatItem: function (data, $item) {
  22. return data.name;
  23. },
  24. minChars: 3,
  25. param: 'query'
  26. },
  27. required: true
  28. });
  29. });
  30. </script>

至于每一个参数的意义,园友们有需要可以研究下,应该不难理解。博主简单监视了一下这个远程搜索方法的返回值 

如果有打算自己用这个远程的方法,可以参考这个数据格式去实现。 

八、文本框搜索组件bootstrap-typeahead
其实关于文本框搜索的功能,很多组件都带有这个功能,比如原来博主用过的jQuery UI里面就有一个autocomplete组件可以实现自动完成。而bootstrap文本框的自动搜索组件,网上也是层出不穷,今天之所以选择这个组件是因为觉得它和bootstrap的风格比较类似,而且组件比较小,简单实用。 
1、效果展示 
本地静态搜索(数据源在本地) 

远程搜索(数据源通过ajax请求远程获取)

2、源码说明
源码地址
3、代码示例
 首先需要引用的文件:主要包含一个css和一个js文件。需要jQuery和bootstrap的支持。

  1. <link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" />
  2. <link href="~/Content/twitter-bootstrap-typeahead-master/twitter-bootstrap-typeahead-master/demo/css/prettify.css" rel="stylesheet" />
  3. <script src="~/Content/jquery-1.9.1.js"></script>
  4. <script src="~/Content/bootstrap/js/bootstrap.js"></script>
  5. <script src="~/Content/twitter-bootstrap-typeahead-master/twitter-bootstrap-typeahead-master/js/bootstrap-typeahead.js"></script>

然后组件的初始化
<input type='text' class="form-control" id="txt_man" />
数据源在本地 

  1. <script type="text/javascript">
  2. $(function () {
  3. $("#txt_man").typeahead({
  4. source: [
  5. { key: 1, value: 'Toronto' },
  6. { key: 2, value: 'Montreal' },
  7. { key: 3, value: 'New York' },
  8. { key: 4, value: 'Buffalo' },
  9. { key: 5, value: 'Boston' },
  10. { key: 6, value: 'Columbus' },
  11. { key: 7, value: 'Dallas' },
  12. { key: 8, value: 'Vancouver' },
  13. { key: 9, value: 'Seattle' },
  14. { key: 10, value: 'Los Angeles' }
  15. ],
  16. display: "value",
  17. val:"key"
  18. });
  19. });
  20. </script>

数据源通过ajax请求获取 

  1. <script type="text/javascript">
  2. $(function () {
  3. $("#txt_man").typeahead({
  4. ajax: {
  5. url: '/Home2/TypeaheadData',
  6. timeout: 300,
  7. method: 'post',
  8. triggerLength: 1,
  9. loadingClass: null,
  10. displayField: null,
  11. preDispatch: null,
  12. preProcess: null
  13. },
  14. display: "value",
  15. val:"key"
  16. });
  17. });
  18. </script>

后台对应的测试方法 

  1. public JsonResult TypeaheadData()
  2. {
  3. var lstRes = new List<object>();
  4. for (var i = 0; i < 20; i++)
  5. lstRes.Add(new { key = i, value = Guid.NewGuid().ToString().Substring(0, 4) });
  6. return Json(lstRes, JsonRequestBehavior.AllowGet) ;
  7. }

常用属性:
 •display:显示的字段名称
 •val:实际的值
 •items:搜索结果默认展示的个数。默认值为8
 •source:本地数据源,格式为数组。
 •ajax:ajax请求的对象,可以直接为一个string的url,也可是object对象。如果是object对象,url这个就不说了,triggerLength的属性表示输入几个字符触发搜索。 

常用事件:
 •itemSelected:选中搜索值的时候触发。 

  1. <script type="text/javascript">
  2. $(function () {
  3. $("#txt_man").typeahead({
  4. ajax: {
  5. url: '/Home2/TypeaheadData',
  6. timeout: 300,
  7. method: 'post',
  8. triggerLength: 1,
  9. loadingClass: null,
  10. displayField: null,
  11. preDispatch: null,
  12. preProcess: null
  13. },
  14. display: "value",
  15. val: "key",
  16. itemSelected: function (item, val, text) {
  17. }
  18. });
  19. });
  20. </script>

参数item表示选中的对象,参数val表示选中项的实际值,text表示选中项的显示值。 

九、bootstrap步骤组件
关于bootstrap步骤组件,上篇介绍过一个ystep这个小组件,它在查看任务的进度方面能起到一定的作用,但是对于一些复杂的业务,需要按照当前的步骤处理相应的业务这个方面它就有点无能为力了。今天博主就介绍一款效果相当不错的步骤组件,有了这个组件,程序员再也不用担心复杂的步骤设计了。
 1、效果展示
 一睹风采 

按照步骤进行“上一步”、“下一步”

更多步骤 

2、源码说明
 这个组件是博主在网上找到的,看了下很多的样式和用法都是bootstrap里面的,唯一需要引用一个js和一个css文件。暂时未找到源码出处,如果有知道源码出处的可以告诉博主,博主再加上,为了尊重作者的劳动成果博主一定尊重原创! 
3、代码示例
 需要引用的文件

  1. <link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" />
  2. <link href="~/Content/bootstrap-step/css/bs-is-fun.css" rel="stylesheet" />  <script src="~/Content/jquery-1.9.1.js"></script>
  3. <script src="~/Content/bootstrap/js/bootstrap.js"></script>
  4. <script src="~/Content/bootstrap-step/js/brush.js"></script>

bs-is-fun.css和brush.js这两个文件需要引用,组件需要jQuery和bootstrap的支持。

 然后就是组件的初始化。
 (1)箭头 

  1. <ul class="nav nav-pills nav-justified step step-arrow">
  2. <li class="active">
  3. <a>step1</a>
  4. </li>
  5. <li class="active">
  6. <a>step2</a>
  7. </li>
  8. <li>
  9. <a>step3</a>
  10. </li>
  11. </ul>

如果是静态的步骤,只需要以上一段html代码即可看到上图中的箭头步骤效果。这里的active样式表示步骤已经经过的样式。

(2)正方形 

  1. <ul class="nav nav-pills nav-justified step step-square">
  2. <li class="active">
  3. <a>step1</a>
  4. </li>
  5. <li>
  6. <a>step2</a>
  7. </li>
  8. <li>
  9. <a>step3</a>
  10. </li>
  11. </ul>

(3)圆形 

  1. <ul class="nav nav-pills nav-justified step step-round">
  2. <li class="active">
  3. <a>step1</a>
  4. </li>
  5. <li class="active">
  6. <a>step2</a>
  7. </li>
  8. <li class="active">
  9. <a>step3</a>
  10. </li>
  11. </ul>

(4)进度条 

  1. <ul class="nav nav-pills nav-justified step step-progress">
  2. <li class="active">
  3. <a>step1<span class="caret"></span></a>
  4. </li>
  5. <li class="active">
  6. <a>step2<span class="caret"></span></a>
  7. </li>
  8. <li>
  9. <a>step3<span class="caret"></span></a>
  10. </li>
  11. <li>
  12. <a>step4<span class="caret"></span></a>
  13. </li>
  14. <li>
  15. <a>step5<span class="caret"></span></a>
  16. </li>
  17. <li>
  18. <a>step6<span class="caret"></span></a>
  19. </li>
  20. </ul>

(5)上一步、下一步
 上图中的“上一步”、“下一步”是在bootstrap的modal组件里面自己定义的,还是把代码贴出来,供大家参考。 

  1. <div class="modal fade" id="myModalNext">
  2. <div class="modal-dialog modal-lg">
  3. <div class="modal-content">
  4. <div class="modal-header">
  5. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  6. <span aria-hidden="true">×</span>
  7. </button>
  8. <h4 class="modal-title">选项配置</h4><ul class="nav nav-pills nav-justified step step-progress">
  9. <li class="active">
  10. <a>步骤一<span class="caret"></span></a>
  11. </li>
  12. <li>
  13. <a>步骤二<span class="caret"></span></a>
  14. </li>
  15. <li>
  16. <a>步骤三<span class="caret"></span></a>
  17. </li>
  18. <li>
  19. <a>步骤四<span class="caret"></span></a>
  20. </li>
  21. <li>
  22. <a>步骤五<span class="caret"></span></a>
  23. </li>
  24. <li>
  25. <a>步骤六<span class="caret"></span></a>
  26. </li>
  27. </ul>
  28. </div>
  29. <div class="modal-body">
  30. <div class="container-fluid">
  31. <div class="carousel slide" data-ride="carousel" data-interval="false" data-wrap="false">
  32. <div class="carousel-inner" role="listbox">
  33. <div class="item active">
  34. <p>步骤一</p>
  35. <div class="col-xs-2">
  36. 配置角色
  37. </div>
  38. <div class="col-xs-4">
  39. <input type="text" class="form-control" />
  40. </div>
  41. <div class=" col-xs-4">
  42. <button type="button" class=" btn btn-primary">保存</button>
  43. </div>
  44. </div>
  45. <div class="item">
  46. <p>步骤二</p>
  47. <div class="col-xs-2">
  48. 配置用户
  49. </div>
  50. <div class="col-xs-4">
  51. <input type="text" class="form-control" />
  52. </div>
  53. <div class=" col-xs-4">
  54. <button type="button" class=" btn btn-primary">保存</button>
  55. </div>
  56. </div>
  57. <div class="item">
  58. <p>步骤三</p>
  59. </div>
  60. <div class="item">
  61. <p>步骤四</p>
  62. </div>
  63. <div class="item">
  64. <p>步骤五</p>

人气教程排行