`
Donald_Draper
  • 浏览: 979369 次
社区版块
存档分类
最新评论

BootStrap五星评分插件使用详解

    博客分类:
  • HTML
阅读更多
插件:http://www.jq22.com/jquery-info460
网上有很多,基于原生JS和DOM的五星评分案例,今天我们看一个评分插件,基于bootstrap和jquery

css,js文件引入:
star.html

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link href="http://www.jq22.com/jquery/bootstrap-3.3.4.css" rel="stylesheet">
    <script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
    <link href="/${base}/css/star/star-rating.css" media="all" rel="stylesheet" type="text/css"/>
    <script src="/${base}/js/star/star-rating.js" type="text/javascript"></script>
  </head>
</html>


打分页面:
score.html
...
<body>
<!-- 引入css,js->
[#include "../star.html"/]
评分:
<input id="score" value="0" type="number" class="rating" min=0 max=5 step=0.5 data-size="sm">
<input type="submit" value="评分" class="search_btn" name="submit" onclick="gradeScored()">

<script type="text/javascript">
	jQuery(document).ready(function () {
	    $(".rating-kv").rating();
	});
	function gradeScored(){
	var score = $("#score").val();
	//alert(score);
	 $.post("${base}/test/gradeScore.jspx",{id:id,score:score},
	     function(data){
		   alert("评分成功");
		 },
		"html"); 
	}
</script>
</body>

页面如下:



下面所讲的是css和js是经过修改后的,原插件,会贴在附件中
在star-rating.css中
需要注意点
.rating-container {
    position: relative;
    vertical-align: middle;
    display: inline-block;
    /*打分容器颜色*/
    color: #e3e3e3;
    overflow: hidden;
}
.rating-container .rating-stars {
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    overflow: hidden;
	/* #FFFF00 为打分星星的颜色 */
    color: #FFFF00;
    transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -webkit-transition: all 0.25s ease-out;
}

在star-rating.js中,需要注意的点:
init: function (options) {
            var self = this;
            self.options = options;
            self.initSlider(options);
            self.checkDisabled();
            $element = self.$element;
            self.containerClass = options.containerClass;
            self.glyphicon = options.glyphicon;
	    //默认星星图表,\ue006为方框,\u2605★,
            var defaultStar = (self.glyphicon) ? '\ue006' : '\u2605';
	    ...,
	    renderCaption: function () {
            var self = this, val = self.$element.val();
            if (!self.showCaption) {
                return '';
            }
            var html = self.fetchCaption(val);
            if (!isEmpty(self.$captionElement)) {
                self.$captionElement.removeClass('caption').addClass('caption').attr({"title": self.clearCaption});
                self.$captionElement.html(html);
                return '';
            }
	    //去掉后面的打分信息显示
	    return ;
            //显示打分信息
            //return '<div class="caption">' + html + '</div>';
           },
	   //清除打分按钮
           //clearButton: '<i class="glyphicon glyphicon-minus-sign"></i>',
	   //无打分按钮
           clearButton: '' ,
	   ...
	   };

至此五星评分结束;

下面给出插件的应用实例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Krajee JQuery Plugins - &copy; Kartik</title>
    <link href="http://www.jq22.com/jquery/bootstrap-3.3.4.css" rel="stylesheet">
    <script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
    <link href="css/star-rating.css" media="all" rel="stylesheet" type="text/css"/>
    <script src="js/star-rating.js" type="text/javascript"></script>
<body>

<h1>Bootstrap Star Rating Example</h1>
<div class="container">
<form>
    <input id="input-2b" type="number" class="rating" min="0" max="5" step="0.5" data-size="xl"
    data-symbol="&#xe005;" data-default-caption="{rating} hearts" data-star-captions="{}">
    <br>
    <input id="input-21a" value="0" type="number" class="rating" min=0 max=5 step=0.5 data-size="xl" >
    <br>
    <input id="input-21b" value="3"  type="number" class="rating" min=0 max=5 step=0.5 data-size="lg">
    <br>
    <input id="input-21c" value="0" type="number" class="rating" min=0 max=8 step=0.5 data-size="xl" data-stars="8">
    <br>
    <input id="input-21d" value="2" type="number" class="rating" min=0 max=5 step=0.5 data-size="sm">
    <br>
    <input id="input-21e" value="0" type="number" class="rating" min=0 max=5 step=0.5 data-size="xs" >
    <br>
    <input id="input-21f" value="0" type="number" class="rating" min=0 max=5 step=0.5 data-size="md" >
    <br>
    <input id="input-2ba" type="number" class="rating" min="0" max="5" step="0.5" data-stars=5
    data-symbol="&#xe005;" data-default-caption="{rating} hearts" data-star-captions="{}">
    <br>
    <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>
    <div class="clearfix"></div>
    <div class="form-group">
    <button type="submit" class="btn btn-primary" onclick="getScore()">Submit</button>
    <button type="reset" class="btn btn-default">Reset</button>
    </div>
</form>
<br>
<script>
    $(function() {
			var score = $("#input-21b").val();
			alert(score);
	});
	function getScore(){
			var score = $("#input-21b").val();
			alert(score);
	}
    jQuery(document).ready(function () {
        $(".rating-kv").rating();
    });
</script>
</div>  
</body>
</html>

data-stars为星星的个数,data-size为星星的大小,min=0 max=5 step=0.5,为最小值,最大值,步长;
data-symbol为评分图表,如星星
页面如下:



本年度,最后一片文章,感谢各位陪伴,你们的访问,是对我最大的动力,今天要回家结婚了,来年再战...浪里个浪
  • 大小: 7.1 KB
  • 大小: 30.6 KB
1
0
分享到:
评论

相关推荐

    Bootstrap五星评分插件Bootstrap-Star-Rating使用教程

    BootStrap五星插件bootstrap-Star-Rating,包括官方文件和例子,例子中包含js引用。

    bootstrap-star-rating-master星级评分插件

    Bootstrap Star Rating插件是一款基于流行的前端框架Bootstrap开发的交互式星级评分组件,它为用户提供了一种直观、易于使用的评分方式,常用于用户评价、产品评级等场景。在本篇文章中,我们将详细介绍这款插件的...

    Bootstrap五星评价,五颗星星

    Bootstrap五星评价系统是一种常见于电商网站、用户反馈和产品评分中的设计元素,它允许用户以图形化的方式对产品或服务进行一到五星的评级。在本文中,我们将深入探讨Bootstrap框架如何实现这样的功能,以及其背后的...

    Bootstrap 响应式jquery星星评分插件

    Bootstrap响应式jQuery星星评分插件是一种常见的用户反馈和评价机制,广泛应用于网站和应用程序中,为用户提供直观、易于操作的评级体验。这个插件利用了流行的前端框架Bootstrap的响应式设计,确保在不同设备和屏幕...

    bootstrap时间轴插件

    在使用Bootstrap时间轴插件时,首先需要在项目中引入Bootstrap的CSS和JS文件,确保所有基础样式和交互功能正常工作。然后,可以按照插件提供的HTML结构创建时间轴。例如: ```html &lt;!-- 时间轴项 --&gt; ...

    基于bootstrap的进度插件

    插件描述:基于bootstrap的进度插件。参见实例:http://www.jq22.com/jquery-info4654

    Bootstrap双日历插件使用演示

    在本示例中,我们将深入探讨如何使用Bootstrap的双日历插件,该插件通常用于处理需要同时选择两个日期的场景,比如预订区间、活动范围等。 首先,为了使用Bootstrap双日历插件,你需要确保已经在项目中引入了...

    BootstrapFileInput 图片上传插件 详解

    总的来说,BootstrapFileInput是一个功能强大且易于使用的图片上传插件,它提供了丰富的特性,能够满足大部分网页文件上传的需求。通过熟练掌握其配置和事件,开发者可以轻松构建出符合用户需求的上传功能。在实际...

    bootstrap-table插件包

    这个插件充分利用了Bootstrap框架的灵活性和响应式设计,使得创建交互式、功能丰富的表格变得简单易行。在提供的“bootstrap-table插件包”中,包含了所有必要的资源文件,如CSS样式表、JavaScript脚本以及可能的...

    Bootstrap模态框插件使用详解

    Bootstrap 模态框插件使用详解 Bootstrap 模态框插件是一款交互式网站非常常见的弹窗功能插件,主要用于在网站中弹出模态框,以便与用户进行交互。下面是 Bootstrap 模态框插件的使用方法详解: 一、基本使用 ...

    bootstrap分页插件.zip

    Bootstrap分页插件是前端开发中常用的一种工具,它基于Twitter Bootstrap框架,为网页提供美观且功能丰富的分页导航。这个压缩包文件“bootstrap分页插件.zip”包含了一个名为“317482454-tm.pagination-195db9b”的...

    bootstrap fileinput完整插件

    这款插件是基于流行的前端框架Bootstrap构建,因此它可以无缝地融入Bootstrap主题,提供一致的用户体验。在本篇文章中,我们将深入探讨Bootstrap FileInput的核心特性、使用方法以及如何在实际项目中集成。 1. **...

    bootstrap table表格插件使用详解

    Bootstrap Table 表格插件使用详解 Bootstrap Table 是一种流行的表格插件,广泛应用于后台系统的数据处理和回显。下面是 Bootstrap Table 的使用详解,包括插件的基本使用方法、参数设置、事件处理等方面的详细...

    Bootstrap图标实现移动端的星星评分功能

    Bootstrap图标在移动端应用中常用于增强用户界面的视觉效果,特别是在实现星星评分功能时,它能够提供直观且易于理解的反馈。Bootstrap图标库通常包含了多种预定义的图标,包括星形图标,这些图标设计简洁、响应式且...

    bootstrap上传下载插件

    文件名为“bootstrap-fileinput20190218”的压缩包可能包含了这个插件的源代码、示例、文档和其他资源,供开发者下载使用。开发者可以通过解压文件,阅读文档,学习如何将这个插件集成到自己的项目中,以实现功能...

    bootstrap分页插件

    1. **样式兼容性**:此插件的设计与Bootstrap的原始样式保持一致,这意味着它能够无缝融入到任何使用Bootstrap构建的项目中,保持整体视觉效果的一致性。 2. **灵活性**:虽然插件的样式基础来源于Bootstrap,但它...

    Twitter bootstrap模糊查询插件

    而"Twitter Bootstrap模糊查询插件"是Bootstrap生态系统中的一个扩展,它为用户提供了强大的搜索和过滤功能,适用于构建具有智能输入、自动补全和实时查询的交互式界面。 模糊查询是一种允许用户输入不完整或有误的...

    jquery星星评分插件Bootstrap Star Rating

    Bootstrap Star Rating是一款基于jQuery的插件,用于在Web应用程序中创建功能丰富的星级评分系统。它以其简洁的界面和强大的自定义能力,在Web开发领域中受到广泛欢迎。此插件是与Bootstrap框架兼容的,因此可以无缝...

    bootstrap select2插件使用demo

    这款插件充分利用了Bootstrap框架的样式和组件,使得在网页中创建下拉菜单、多选框或搜索框变得更加便捷和高效。 **一、依赖与引入** Bootstrap Select2的使用首先需要确保已经引入了Bootstrap的基本样式库(CSS)...

Global site tag (gtag.js) - Google Analytics