Bootstrap组件系列之福利篇几款好用的组件推荐二

在上篇文章给大家介绍了，接下来本文给大家介绍Bootstrap组件系列之福利篇几款好用的组件（推荐二），感兴趣的朋友一起学习吧！

七、多值输入组件manifest

关于文本框的多值输入，一直是一个比较常见的需求，今天博主推荐一款好用的多值输入组件给大家，不要谢我，请叫我“红领巾”！

1、效果展示

本地多值输入框

远程多值输入框

2、源码说明

感谢开源社区，感谢那些喜欢分享的可爱的人儿。。

3、代码示例

（1）本地多值输入

首先需要引用如下几个文件

rush:js;">

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

然后就是html和js的初始化

rush:js;">

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

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

八、文本框搜索组件bootstrap-typeahead

其实关于文本框搜索的功能，很多组件都带有这个功能，比如原来博主用过的jQuery UI里面就有一个autocomplete组件可以实现自动完成。而bootstrap文本框的自动搜索组件，网上也是层出不穷，今天之所以选择这个组件是因为觉得它和bootstrap的风格比较类似，而且组件比较小，简单实用。

1、效果展示

本地静态搜索（数据源在本地）

远程搜索（数据源通过ajax请求远程获取）

2、源码说明

3、代码示例

首先需要引用的文件：主要包含一个css和一个js文件。需要jQuery和bootstrap的支持。

数据源通过ajax请求获取

后台对应的测试方法　　

(); for (var i = 0; i < 20; i++) lstRes.Add(new { key = i,value = Guid.NewGuid().ToString().Substring(0,4) }); return Json(lstRes,JsonRequestBehavior.AllowGet) ; }

常用属性：

•display：显示的字段名称

•val：实际的值

•items：搜索结果默认展示的个数。默认值为8

•source：本地数据源，格式为数组。

•ajax：ajax请求的对象，可以直接为一个string的url，也可是object对象。如果是object对象，url这个就不说了，triggerLength的属性表示输入几个字符触发搜索。

常用事件：

•itemSelected：选中搜索值的时候触发。

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

九、bootstrap步骤组件

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

1、效果展示

一睹风采

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

更多步骤

2、源码说明

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

3、代码示例

需要引用的文件

　　

组件依赖于JQuery和bootstrap

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

$(function () { $('input[type=checkbox]').bootstrapSwitch({ size: "large" }); })

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

常用的属性

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

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

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

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

1、效果展示

2、源码说明

3、代码示例

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

rush:js;">

直接通过html初始组件

rush:js;"> rating" min="0" max="5" step="0.5" data-size="xl" data-symbol="" data-default-caption="{rating} hearts" data-star-captions="{}"> rating" min=0 max=5 step=0.5 data-size="xl"> rating" min=0 max=5 step=0.2 data-size="lg"> rating" min=0 max=8 step=0.5 data-size="xl" data-stars="8"> rating" min=0 max=5 step=0.5 data-size="sm"> rating" min=0 max=5 step=0.5 data-size="xs"> rating" min=0 max=5 step=0.5 data-size="md"> rating" min="0" max="5" step="0.5" data-stars=5 data-symbol="" data-default-caption="{rating} hearts" data-star-captions="{}">

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

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

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

以上所述是小编给大家介绍的Bootstrap组件系列之福利篇几款好用的组件（推荐二）。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。