bootstrap五星评分_jquery星星评分插件Bootstrap Star Rating

特点

任何HTML输入转换为一个星级控制。

插件自动转换一个星级的输入控制如果你设置它的类=评级。所有的选项输入可以通过HTML5数据属性。

纯粹的CSS3样式星星。告别图像精灵或图像背景。提供清洁的可缩放矢量图标。选择一个可以使用Unicode字符设置为覆盖符号。

渲染和显示部分星评级。配置数量的星星,最小,最大,一步,理论上支持任何分数评级。

使用引导3。默认x风格&符号。但这可以覆盖与插件参数和自己的CSS样式。

支持右到左(RTL)输入。自动变化对RTL明星风格。

星星清晰选择的方式方法。控制按钮元素可以清楚的表明。

星级重置为初始值重置表单。

整个插件的大小,小于11 kb(约8 kb的缩小JS和3 kb缩小CSS)。

使用方法

你也可以手动安装插件很容易到你的项目中。只是下载源代码插件(css和js文件夹)到您的项目。

步骤1:加载下列资产在你的头。

如果你注意到,你需要加载jquery.min.js和bootstrap.min.css除了star-rating.min.css和star-rating.min.js插件使用默认设置。

第二步:设置您输入标记自动初始化评级

步骤3:初始化插件页面上的其他输入类型。例如,

//初始化默认值

$("#input-id").rating();

//插件选项

$("#input-id").rating({'size':'lg'});

input-id是标识符的输入(e.g. type=number)在你的页面,自动隐藏的插件。

或者,你可以直接调用插件选项通过数据属性设置为你的输入字段。

可以使用bootstrap中的星星评分组件和jQuery来实现星星评分功能。 首先,需要在html页面中引入bootstrapjQuery的库文件: ```html <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> ``` 然后,在页面中添加一个星星评分的HTML元素: ```html <div class="star-rating"> <input id="star-5" type="radio" name="rating" value="5"> <label for="star-5" title="5 stars"> <i class="active fa fa-star" aria-hidden="true"></i> </label> <input id="star-4" type="radio" name="rating" value="4"> <label for="star-4" title="4 stars"> <i class="active fa fa-star" aria-hidden="true"></i> </label> <input id="star-3" type="radio" name="rating" value="3"> <label for="star-3" title="3 stars"> <i class="active fa fa-star" aria-hidden="true"></i> </label> <input id="star-2" type="radio" name="rating" value="2"> <label for="star-2" title="2 stars"> <i class="active fa fa-star" aria-hidden="true"></i> </label> <input id="star-1" type="radio" name="rating" value="1"> <label for="star-1" title="1 star"> <i class="active fa fa-star" aria-hidden="true"></i> </label> </div> ``` 接下来,使用jQuery来监听星星评分的变化,并将选中的星级值保存到一个隐藏的表单输入框中,以便在后台处理: ```javascript $(document).ready(function(){ $('.star-rating input').change(function() { var rating = $(this).val(); $('#rating-value').val(rating); }); }); ``` 最后,在表单提交时,将隐藏的表单输入框中的星级值发送到后台进行处理。 这样,就可以实现一个简单的基于bootstrapjQuery星星评分功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值