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

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、效果展示 

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

2、源码说明
 源码下载

 3、代码示例
  此组件需要jQuery和bootstrap样式的支持 

  <link href="https://www.jb51.net/~/Content/bootstrap/css/bootstrap.css" /> <link href="https://www.jb51.net/~/Content/bootstrap-star-rating-master/bootstrap-star-rating-master/css/star-rating.css" /> <script src="https://www.jb51.net/~/Content/jquery-1.9.1.js"></script> <script src="https://www.jb51.net/~/Content/bootstrap-star-rating-master/bootstrap-star-rating-master/js/star-rating.js"></script> <script src="https://www.jb51.net/~/Content/bootstrap-star-rating-master/bootstrap-star-rating-master/js/locales/zh.js"></script>

直接通过html初始组件 

<input type="number" min="0" max="5" step="0.5" data-size="xl" data-symbol="&#xe005;" data-default-caption="{rating} hearts" data-star-captions="{}"> <input value="0" type="number" min=0 max=5 step=0.5 data-size="xl"> <input value="4" type="number" min=0 max=5 step=0.2 data-size="lg"> <input value="0" type="number" min=0 max=8 step=0.5 data-size="xl" data-stars="8"> <input value="2" type="number" min=0 max=5 step=0.5 data-size="sm"> <input value="0" type="number" min=0 max=5 step=0.5 data-size="xs"> <input value="0" type="number" min=0 max=5 step=0.5 data-size="md"> <input type="number" min="0" max="5" step="0.5" data-stars=5 data-symbol="&#xe005;" data-default-caption="{rating} hearts" data-star-captions="{}"> <input value="0" type="number" 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组件的总结暂时告一段落,后面将会分享下ko的一些封装。如果你觉得本文能够帮到你,可以推荐下,博主一定继续努力!

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzswfz.html