前言:上篇 JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐 分享了几个项目中比较常用的组件,引起了许多园友的关注。这篇还是继续,因为博主觉得还有几个非常简单、实用的组件,实在不愿自己一人独享,没办法,谁让博主这么爱分享呢~~

本文原创地址:http://www.cnblogs.com/landeanfen/p/5603790.html

七、多值输入组件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.  
  4. <script src="~/Content/jquery-1.9.1.js"></script>
  5. <script src="~/Content/bootstrap/js/bootstrap.js"></script>
  6. <script src="~/Content/jquery-manifest-master/build/parts/jquery.ui.widget.js"></script>
  7. <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" />
  1. <script type="text/javascript">
  2. $(function () {
  3. $('#txt_man').manifest();
  4. });
  5. </script>

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

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

(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.  
  4. <script src="~/Content/jquery-1.9.1.js"></script>
  5. <script src="~/Content/bootstrap/js/bootstrap.js"></script>
  6. <script src="~/Content/jquery-manifest-master/build/parts/jquery.ui.widget.js"></script>
  7. <script src="~/Content/jquery-manifest-master/build/parts/jquery.marcopolo.js"></script>
  8. <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.  
  4. <script src="~/Content/jquery-1.9.1.js"></script>
  5. <script src="~/Content/bootstrap/js/bootstrap.js"></script>
  6. <script src="~/Content/twitter-bootstrap-typeahead-master/twitter-bootstrap-typeahead-master/js/bootstrap-typeahead.js"></script>

然后组件的初始化

  1. <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 = ; i < ; i++)
  5. lstRes.Add(new { key = i, value = Guid.NewGuid().ToString().Substring(, ) });
  6.  
  7. return Json(lstRes, JsonRequestBehavior.AllowGet) ;
  8. }

常用属性:

  • 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. });
  21. </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" />
  3.  
  4.   <script src="~/Content/jquery-1.9.1.js"></script>
  5. <script src="~/Content/bootstrap/js/bootstrap.js"></script>
  6. <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">&times;</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>
  65. </div>
  66. <div class="item">
  67. <p>步骤六</p>
  68. </div>
  69. </div>
  70. </div>
  71. </div>
  72.  
  73. </div>
  74. <div class="modal-footer">
  75. <button type="button" class="btn btn-default MN-pre">上一步</button>
  76. <button type="button" class="btn btn-primary MN-next">下一步</button>
  77. </div>
  78. </div>
  79. </div>
  80. </div>

当然,还需要注册两个按钮的点击事件

  1.     $("#myModalNext .modal-footer button").each(function () {
  2. $(this).click(function () {
  3. if ($(this).hasClass("MN-next")) {
  4. $("#myModalNext .carousel").carousel('next');
  5. $("#myModalNext .step li.active").next().addClass("active");
  6. } else {
  7. $("#myModalNext .carousel").carousel('prev');
  8. if ($("#myModalNext .step li").length > 1) {
  9. $($($("#myModalNext .step li.active"))[$("#myModalNext .step li.active").length - 1]).removeClass("active")
  10. }
  11. }
  12. })
  13. })

逻辑可能并不完善,如果正式使用需要测试。

十、按钮加载组件ladda-bootstrap

关于按钮加载,博主早就想找一个合适的组件去优化,如果不处理,肯定存在重复操作的可能。今天来看下这么一个小东西吧。

1、效果展示

初见

自定义颜色、大小、进度条

2、源码说明

源码地址

3、代码示例

需要引用的文件

  1.   <link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" />
  2. <link href="~/Content/ladda-bootstrap-master/ladda-bootstrap-master/dist/ladda-themeless.min.css" rel="stylesheet" />
  3.  
  4.   <script src="~/Content/jquery-1.9.1.js"></script>
  5. <script src="~/Content/bootstrap/js/bootstrap.js"></script>
  6. <script src="~/Content/ladda-bootstrap-master/ladda-bootstrap-master/dist/spin.min.js"></script>
  7. <script src="~/Content/ladda-bootstrap-master/ladda-bootstrap-master/dist/ladda.min.js"></script>

组件初始化:初始化4个按钮

  1. <button class="btn btn-primary ladda-button" data-style="expand-left"><span class="ladda-label">expand-left</span></button>
  2. <button class="btn btn-primary ladda-button" data-style="expand-right"><span class="ladda-label">expand-right</span></button>
    <button class="btn btn-primary ladda-button" data-style="zoom-in"><span class="ladda-label">zoom-in</span></button>
  3. <button class="btn btn-primary ladda-button" data-style="zoom-out"><span class="ladda-label">zoom-out</span></button>
  1.       $(function () {
  2. $('button').click(function (e) {
  3. e.preventDefault();
  4. var l = Ladda.create(this);
  5. l.start();
  6. l.setProgress(0 - 1);
  7. $.post("/Home2/TypeaheadData",{ },
  8. function (data,statu) {
  9. console.log(statu);
  10. }, "json");
  11. .always(function () { l.stop(); });
  12. return false;
  13. });
  14. });

代码释疑:应该不难理解,初始化组件主要涉及的代码 var l = Ladda.create(this);   l.start(); ,这里的this表示当前点击的按钮的对象(注意这里是dom对象而不是jQuery对象),然后请求结束后调用 l.stop(); 关闭加载。

(1)data-style所有选项如下,有兴趣可以去试试,看看都是些什么效果:

  1. data-style="expand-left"
  2. data-style="expand-right"
  3. data-style="expand-up"
  4. data-style="expand-down"
  5. data-style="zoom-in"
  6. data-style="zoom-out"
  7. data-style="slide-left"
  8. data-style="slide-right"
  9. data-style="slide-up"
  10. data-style="slide-down"
  11. data-style="contract"

(2)如果需要调整按钮的大小,组件内置了data-size属性,data-size所有选项如下:

  1. data-size="xs"
  2. data-size="s"
  3. data-size="l"

(3)如果需要设置按钮的颜色,通过data-spinner-color

  1. data-spinner-color="#FF0000"

(4)按钮的进度条的设置

  1.     Ladda.bind('button', {
  2. callback: function (instance) {
  3. var progress = 0;
  4. var interval = setInterval(function () {
  5. progress = Math.min(progress + Math.random() * 0.1, 1);
  6. instance.setProgress(progress);
  7. if (progress === 1) {
  8. instance.stop();
  9. clearInterval(interval);
  10. }
  11. }, 200);
  12. }
  13. });
  14. });

主要通过instance.setProgress(progress);这一句来设置当前执行的进度,progress的取值在0到1之间。当然,以上只是测试进度效果的代码,在正式项目中这里需要计算当前请求执行的情况来动态返回进度。

十一、开关组件bootstrap-switch

在bootstrap中文网的首页上面,你就能找到这么一个组件

1、效果展示

初始效果

五花八门的属性以及事件

2、源码说明

Bootstrap-Switch源码地址:https://github.com/nostalgiaz/bootstrap-switch

Bootstrap-Switch文档以及Demo:http://www.bootstrap-switch.org/examples.html

3、代码示例

需要引用的文件

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

组件依赖于JQuery和bootstrap

然后就是和html和js的初始化

  1. <input type="checkbox" checked />
  1. $(function () {
  2. $('input[type=checkbox]').bootstrapSwitch({ size: "large" });
  3. })

size属性并非必须,如果你使用默认的样式,参数可以不传。

常用的属性

  • size:开关大小。可选值有'mini', 'small', 'normal', 'large'
  • onColor:开关中开按钮的颜色。可选值有'primary', 'info', 'success', 'warning', 'danger', 'default'
  • offColor:开关中关按钮的颜色。可选值'primary', 'info', 'success', 'warning', 'danger', 'default'
  • onText:开关中开按钮的文本,默认是“ON”。
  • offText:开关中关按钮的文本,默认是“OFF”。
  • onInit:初始化组件的事件。
  • onSwitchChange:开关变化时的事件。

常用的事件和方法可以直接查看文档,官方提供了很详细的说明。

十二、评分组件bootstrap-star-rating

某东、某宝上面的评分大家应该都有了解,无意中发现了一块bootstrap风格的评分组件,觉得有点意思,以后做电商、社区、论坛系统或许用得着,就来分享分享。

1、效果展示

2、源码说明

源码下载

3、代码示例

此组件需要jQuery和bootstrap样式的支持

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

直接通过html初始组件

  1. <input id="input-2b" type="number" class="rating" min="0" max="5" step="0.5" data-size="xl"
  2. data-symbol="" data-default-caption="{rating} hearts" data-star-captions="{}">
  3. <input id="input-21a" value="0" type="number" class="rating" min=0 max=5 step=0.5 data-size="xl">
  4. <input id="input-21b" value="4" type="number" class="rating" min=0 max=5 step=0.2 data-size="lg">
  5. <input id="input-21c" value="0" type="number" class="rating" min=0 max=8 step=0.5 data-size="xl" data-stars="8">
  6. <input id="input-21d" value="2" type="number" class="rating" min=0 max=5 step=0.5 data-size="sm">
  7. <input id="input-21e" value="0" type="number" class="rating" min=0 max=5 step=0.5 data-size="xs">
  8. <input id="input-21f" value="0" type="number" class="rating" min=0 max=5 step=0.5 data-size="md">
  9. <input id="input-2ba" type="number" class="rating" min="0" max="5" step="0.5" data-stars=5
  10. data-symbol="" data-default-caption="{rating} hearts" data-star-captions="{}">
  11. <input id="input-22" value="0" type="number" class="rating" min=0 max=5 step=0.5 data-rtl=1 data-container-class='text-right' data-glyphicon=0>

组件通过class="rating"这一个来进行初始化。这里几个参数应该很好理解:

  • value:表示组件初始化的时候默认的分数
  • min:最小分数
  • max:最大分数
  • step:每次增加的最小刻度
  • data-size:星星的大小
  • data-stars:星星的个数

通过 $("#input-21a").val() 即可得到当前的评分数。

十三、总结

通过这两篇给大家分享了下bootstrap的十二款组件,博主相信这些里面肯定有些你能够用上,可能有些并不常用,但留着以后或许能用上呢!或许有园友会觉得天天去扒别人的组件没啥意思,也没啥技术含量,或许是的,但博主觉得如果将这些东西整理成一套完善的bootstrap组件库,对于以后是非常有用的,这十二款组件只是博主组件库的一部分,还有很多没有抽离出来,有需要的园友可以联系博主。至此,bootstrap组件的总结暂时告一段落,后面将会分享下ko的一些封装。如果你觉得本文能够帮到你,可以推荐下,博主一定继续努力!

欢迎各位转载,但是未经作者本人同意,转载文章之后必须在文章页面明显位置给出作者和原文连接,否则保留追究法律责任的权利

JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐(二)的更多相关文章

  1. Bootstrap组件系列之福利篇几款好用的组件(推荐)

    引用 :http://www.jb51.net/article/87189.htm 一.时间组件 bootstrap风格的时间组件非常多,你可以在github上面随便搜索“datepicker”关键字 ...

  2. 【转】JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐(二)

    前言:上篇 JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐 分享了几个项目中比较常用的组件,引起了许多园友的关注.这篇还是继续,因为博主觉得还有几个非常简单.实用的组件,实在不愿自己 ...

  3. JS组件系列——Bootstrap Table 表格行拖拽(二:多行拖拽)

    前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...

  4. [转]JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐

    本文转自:https://www.cnblogs.com/landeanfen/p/5461849.html#_label3 阅读目录 一.时间组件 1.效果展示 2.源码说明 3.代码示例 二.自增 ...

  5. JS组件系列——Bootstrap寒冬暖身篇:弹出框和提示框效果以及代码展示

    前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...

  6. JS组件系列——Bootstrap Select2组件使用小结

    前言:在介绍select组件的时候,博主之前分享过一篇JS组件系列——两种bootstrap multiselect组件大比拼,这两个组件的功能确实很强大,只可惜没有图文结合的效果(也就是将图片放入到 ...

  7. JS组件系列——Bootstrap文件上传组件:bootstrap fileinput

    前言:之前的三篇介绍了下bootstrap table的一些常见用法,发现博主对这种扁平化的风格有点着迷了.前两天做一个excel导入的功能,前端使用原始的input type='file'这种标签, ...

  8. JS组件系列——Bootstrap 树控件使用经验分享

    前言:很多时候我们在项目中需要用到树,有些树仅仅是展示层级关系,有些树是为了展示和编辑层级关系,还有些树是为了选中项然后其他地方调用选中项.不管怎么样,树控件都是很多项目里面不可或缺的组件之一.今天, ...

  9. JS组件系列——Bootstrap右键菜单解决方案:ContextMenu

    前言:有段时间没发表随笔了,过个年人都变得懒了.新年刚来上班,今天正好得空,将去年遗留的两个小组件总结记录下.有朋友跟我说:你的bootstrap组件要能够形成一个可以满足一般项目需求的系列组件,才有 ...

随机推荐

  1. JS将秒转换为 天-时-分-秒

    记录一下,备忘.. function SecondToDate(msd) { var time =msd if (null != time && "" != tim ...

  2. 线上bug的解决方案--带来的全新架构设计

    缘由 本人从事游戏开发很多年一直都是游戏服务器端开发. 因为个人原因吧,一直在小型公司,或者叫创业型团队工作吧.这样的环境下不得不逼迫我需要什么都会,什么做. 但是自我感觉好像什么都不精通..... ...

  3. ASP.NET MVC Controller的激活

    最近抽空看了一下ASP.NET MVC的部分源码,顺带写篇文章做个笔记以便日后查看. 在UrlRoutingModule模块中,将请求处理程序映射到了MvcHandler中,因此,说起Controll ...

  4. linux系统编程之进程(二):进程生命周期与PCB(进程控制块)

    本节目标: 进程状态变迁 进程控制块 进程创建 进程撤消 终止进程的五种方法 一,进程状态变迁 进程的三种基本状态 就绪(Ready)状态 当进程已分配到除CPU以外的所有必要的资源,只要获得处理机便 ...

  5. Springmvc responsebody 返回对象属性 是date日期格式时 如何返回给前台自己想要的形式

    1添加依赖 <!-- Jackson Json处理工具包 -->            <dependency>              <groupId>org ...

  6. 【夯实PHP基础】PHP的反射机制

    本文地址 分享提纲: 1. 介绍 2. 具体例子 2.1 创建Persion类 2.2 反射过程 2.3 反射后使用 1. 介绍 -- PHP5添加了一项新的功能:Reflection.这个功能使得p ...

  7. jstack+top定位性能问题

    定位性能问题,尤其是cpu使用率过高时,经常需要查找cpu消耗较高的线程,然后查看其堆栈,从而进入代码定位问题. 该场景下, jstack+top是一种非常经典的方式. jstack+top:   1 ...

  8. Quartz框架(第一版)

    任务调度 在企业级应用中,经常会制定一些"计划任务",即在某个时间点做某件事情 核心是以时间为关注点,即在一个特定的时间点,系统执行指定的一个操作 任务调度涉及多线程并发.线程池维 ...

  9. CSS3 Flexbox轻松实现元素的水平居中和垂直居中

    CSS3 Flexbox轻松实现元素的水平居中和垂直居中 网上有很多关于Flex的教程,对于Flex的叫法也不一,有的叫Flexbox,有的叫Flex,其实这两种叫法都没有错,只是Flexbox旧一点 ...

  10. HTTP、HTTP2

      HTTP.HTTP2.0.SPDY.HTTPS 你应该知道的一些事 原文链接:http://www.alloyteam.com/2016/07/httphttp2-0spdyhttps-readi ...