基于jQuery8款超赞的评分插件

基于jquery8款超赞的评分插件。这是一款基于jquery.barrating插件实现的，该评级小部件可灵活设置CSS样式。具体效果请查看演示。效果图如下：

实现的代码。

html代码：

<section class="section section-examples">

    <div class="examples">

        <div class="row">

                <div class="col">

                        <div class="box box-orange">

                            <div class="box-header">Example A</div>

                            <div class="box-body">

                                <select id="example-a" name="rating">

                                    <option value="1">1</option>

                                    <option value="2">2</option>

                                    <option value="3">3</option>

                                    <option value="4">4</option>

                                    <option value="5">5</option>

                                    <option value="6">6</option>

                                    <option value="7" selected="selected">7</option>

                                    <option value="8">8</option>

                                    <option value="9">9</option>

                                    <option value="10">10</option>

                                </select>

                            </div>

                        </div>

                </div>

                <div class="col">

                        <div class="box box-green">

                            <div class="box-header">Example B</div>

                            <div class="box-body">

                                <select id="example-b" name="rating">

                                    <option value="Bad">Bad</option>

                                    <option value="Mediocre">Mediocre</option>

                                    <option value="Good" selected="selected">Good</option>

                                    <option value="Awesome">Awesome</option>

                                </select>

                            </div>

                        </div>

                </div>

        </div>

        <div class="row">

                <div class="col">

                        <div class="box box-blue">

                            <div class="box-header">Example C</div>

                            <div class="box-body">

                                <select id="example-c" name="rating">

                                        <option value=""></option>

                                        <option value="1">1</option>

                                        <option value="2">2</option>

                                        <option value="3">3</option>

                                        <option value="4">4</option>

                                        <option value="5">5</option>

                                </select>

                            </div>

                        </div>

                </div>

                <div class="col">

                        <div class="box box-orange">

                            <div class="box-header">Example D</div>

                            <div class="box-body">

                                <select id="example-d" name="rating">

                                        <option value="1" data-html="<strong>1</strong>">1</option>

                                        <option value="2" data-html="<strong>2</strong>">2</option>

                                        <option value="3" data-html="<strong>3</strong>">3</option>

                                        <option value="4" data-html="<strong>4</strong>">4</option>

                                        <option value="5" data-html="<strong>5</strong>">5</option>

                                        <option value="6" data-html="<strong>6</strong>">6</option>

                                        <option value="7" data-html="<strong>7</strong>">7</option>

                                        <option value="8" data-html="<strong>8</strong>">8</option>

                                </select>

                            </div>

                        </div>

                </div>

        </div>

        <div class="row">

                <div class="col">

                        <div class="box box-green">

                            <div class="box-header">Example E</div>

                            <div class="box-body">

                                <select id="example-e" name="rating">

                                    <option value="A">A</option>

                                    <option value="B">B</option>

                                    <option value="C">C</option>

                                    <option value="D">D</option>

                                    <option value="E">E</option>

                                    <option value="F">F</option>

                                </select>

                            </div>

                        </div>

                </div>

                <div class="col">

                        <div class="box box-blue">

                            <div class="box-header">Example F</div>

                            <div class="box-body">

                                <select id="example-f" name="rating">

                                    <option value="1">1</option>

                                    <option value="2">2</option>

                                    <option value="3">3</option>

                                    <option value="4">4</option>

                                    <option value="5">5</option>

                                </select>

                            </div>

                        </div>

                </div>

        </div>

        <div class="row">

                <div class="col">

                        <div class="box box-orange box-large">

                            <div class="box-header">Example G</div>

                            <div class="box-body">

                                <select id="example-g" name="rating">

                                    <option value="Strongly Agree">Strongly Agree</option>

                                    <option value="Agree">Agree</option>

                                    <option value="Neither Agree or Disagree" selected="selected">Neither Agree or Disagree</option>

                                    <option value="Disagree">Disagree</option>

                                    <option value="Strongly Disagree">Strongly Disagree</option>

                                </select>

                            </div>

                        </div>

                </div>

                <div class="col">

                        <div class="box box-green box-large">

                            <div class="box-header">Example H</div>

                            <div class="box-body">

                                <select id="example-h" name="rating">

                                    <option value="10">10</option>

                                    <option value="9">9</option>

                                    <option value="8">8</option>

                                    <option value="7">7</option>

                                    <option value="6">6</option>

                                    <option value="5">5</option>

                                    <option value="4">4</option>

                                    <option value="3">3</option>

                                    <option value="2">2</option>

                                    <option value="1" selected="selected">1</option>

                                </select>

                            </div>

                        </div>

                </div>

        </div>

    </div>

</section>

via：http://www.w2bc.com/Article/40601

基于jQuery8款超赞的评分插件的更多相关文章

基于Bootstrap的超酷jQuery开关按钮插件
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAAA2CAIAAAC0tsfoAAAB/0lEQVR4nO3bQWrCQBTGcc/mbVz0DD
7 款超炫的 jQuery 插件
jQuery大大简化了我们的前端代码,因为jQuery的简单和开源,也涌现出了层出不穷的jQuery插件,这些实用的jQuery插件也不断推动着jQuery开源社区的发展.下面精选了几款让人跃跃欲试的 ...
【转】基于Bootstrap的超酷jQuery开关按钮插件
基于Bootstrap的超酷jQuery开关按钮插件
15款好用超赞的chrome插件，开发者们的必备~
今天推荐一波Chrome插件干货.这些插件带给我开发效率上的提升.所以在这里整理一下,分享给朋友们. 作为一名程序开发者,推荐一波常用的chrome插件,用了就舍不得丢,包括免费FQ工具,github ...
[转]VS2010几款超赞的扩展辅助工具总结
前言前两天刚把公司电脑系统和开发环境的重新安装http://www.cnblogs.com/aehyok/p/3603149.html, 主要是由于公司电脑配置稍微低了一些,运行.调试太慢,又因为要 ...
VS2010几款超赞的扩展辅助工具总结
详情请查看http://www.aehyok.com/Blog/Detail/72.html 个人网站地址:aehyok.com QQ 技术群号:206058845,验证码为:aehyok 本文文章链 ...
给大家推荐一款高大上的代码高亮插件（sublime，github风格）——highlight.js
经常在一些大神博客里面看到非常好看的高亮代码,有sublime风格,GitHub风格等等.毫无疑问,好的高亮代码插件可以不仅仅让你的博文显得更高大上,更重要的是舒适的阅读体验.经过我在网上的一番搜罗, ...
分享29个超赞的响应式Web设计
原文自:http://www.csdn.net/article/2013-01-16/2813678-responsive-design-websites 最近几年,响应式Web设计不断印入人们眼帘, ...
IntelliJ IDEA 15款神级超级牛逼插件推荐（超赞，谁用谁知道）
满满的都是干货所有插件都是在 ctrl+alt+s 里的plugins 里进行搜索安装 1.CodeGlance 代码迷你缩放图插件 2. Codota 代码提示工具,扫描你的代码后,根据你的敲击 ...

随机推荐

CentOS下yum安装mcrypt错误：No package php-mcrypt available.解决方法
错误描述: #yum install libmcrypt libmcrypt-devel mcrypt mhashSetting up Install ProcessNo package php-mc ...
librbd 分析
一.概述
XML 特殊字符处理
在XML中,有一些符号作为XML 的标记符号,一些特定情况下,属性值必须带有这些特殊符号. 下面主要是讲解一些常用的特殊符号的处理例一: 双引号的使用. 双引号作为XML 属性值的开始结束符号,因此 ...
【java】switch case支持的6种数据类型
switch表达式后面的数据类型只能是byte,short,char,int四种整形类型,枚举类型和java.lang.String类型(从java 7才允许),不能是boolean类型. 在网上看到 ...
初步了解pandas（学习笔记）
1 pandas简介 pandas 是一种列存数据分析 API.它是用于处理和分析输入数据的强大工具,很多机器学习框架都支持将 pandas 数据结构作为输入. 虽然全方位介绍 pandas API ...
getServletContext()接口解析(收藏)
javax.servlet.ServletContext接口一个servlet上下文是servlet引擎提供用来服务于Web应用的接口.Servlet上下文具有名字(它属于Web应用的名字)唯一映射 ...
MongoDB学习笔记（2）
MongoDB 创建数据库语法 MongoDB 创建数据库的语法格式如下: use DATABASE_NAME 如果数据库不存在,则创建数据库,否则切换到指定数据库. 实例以下实例我们创建了数据库 ...
Java设计模式（八）----代理模式
代理模式 1.生活中: 代理就是一个人或者一个组织代表其它人去做一件事的现实生活中的. 在一些情况下,一个客户不想或者不能够直接引用一个对象,而代理对象能够在client和目标对象之间起到中介的作用. ...
构建基于阿里云OSS文件上传服务
转载请注明来源:http://blog.csdn.net/loongshawn/article/details/50710132 <构建基于阿里云OSS文件上传服务> <构建基于OS ...
stm8 io口重映射
STM8S003F3端口可以设置重映射,如pin16的PC6管脚,默认复用功能是SPI_MOSI功能,可以重映射为TIM1_CH1,也就是timer1的1通道.映射方式并不像STM32那样有个AFR寄 ...

基于jQuery8款超赞的评分插件

基于jQuery8款超赞的评分插件的更多相关文章

随机推荐

热门专题