基于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款超赞的评分插件的更多相关文章

  1. 基于Bootstrap的超酷jQuery开关按钮插件

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAAA2CAIAAAC0tsfoAAAB/0lEQVR4nO3bQWrCQBTGcc/mbVz0DD

  2. 7 款超炫的 jQuery 插件

    jQuery大大简化了我们的前端代码,因为jQuery的简单和开源,也涌现出了层出不穷的jQuery插件,这些实用的jQuery插件也不断推动着jQuery开源社区的发展.下面精选了几款让人跃跃欲试的 ...

  3. 【转】基于Bootstrap的超酷jQuery开关按钮插件

    基于Bootstrap的超酷jQuery开关按钮插件

  4. 15款好用超赞的chrome插件， 开发者们的必备~

    今天推荐一波Chrome插件干货.这些插件带给我开发效率上的提升.所以在这里整理一下,分享给朋友们. 作为一名程序开发者,推荐一波常用的chrome插件,用了就舍不得丢,包括免费FQ工具,github ...

  5. [转]VS2010几款超赞的扩展辅助工具总结

    前言 前两天刚把公司电脑系统和开发环境的重新安装http://www.cnblogs.com/aehyok/p/3603149.html, 主要是由于公司电脑配置稍微低了一些,运行.调试太慢,又因为要 ...

  6. VS2010几款超赞的扩展辅助工具总结

    详情请查看http://www.aehyok.com/Blog/Detail/72.html 个人网站地址:aehyok.com QQ 技术群号:206058845,验证码为:aehyok 本文文章链 ...

  7. 给大家推荐一款高大上的代码高亮插件（sublime，github风格）——highlight.js

    经常在一些大神博客里面看到非常好看的高亮代码,有sublime风格,GitHub风格等等.毫无疑问,好的高亮代码插件可以不仅仅让你的博文显得更高大上,更重要的是舒适的阅读体验.经过我在网上的一番搜罗, ...

  8. 分享29个超赞的响应式Web设计

    原文自:http://www.csdn.net/article/2013-01-16/2813678-responsive-design-websites 最近几年,响应式Web设计不断印入人们眼帘, ...

  9. IntelliJ IDEA 15款 神级超级牛逼插件推荐（超赞，谁用谁知道）

    满满的都是干货  所有插件都是在 ctrl+alt+s 里的plugins 里进行搜索安装 1.CodeGlance 代码迷你缩放图插件 2. Codota 代码提示工具,扫描你的代码后,根据你的敲击 ...

随机推荐

  1. 【Spring】Spring框架如何集成Hibernate框架

    下面个整理一下hibernate和Spring框架的结合. 首先是引入hibernate框架的包.Spring框架的包.数据库驱动包. User.java文件 package cn.shop.bean ...

  2. Kafka生产环境中的错误

    最近在处理日志收集任务时,发现前端服务器用flume进行收集,逐步把所有的服务器都增加上.增加的差不多时.Kafka报了如下类似错误: 709 [main] WARN kafka.producer.a ...

  3. React icon bak

  4. 将多个 docx 文件使用 POI 进行合并，生成单个文档，包含图片

    1 添加 maven 依赖,需要使用 poi 的依赖项 <!-- https://mvnrepository.com/artifact/org.apache.poi/poi-scratchpad ...

  5. wordxml文档格式说明

    近期需要对word xml文档进行各种操作,需要熟悉 wordxml 文档格式,搜索了一番后发现 open xml sdk 官网的文档最好.就按照官网说明来记录一番 1 word xml 文档基本格式 ...

  6. 分享十：php中并发读写文件冲突的解决方案

    对于日IP不高或者说并发数不是很大的应用,一般不用考虑这些!用一般的文件操作方法完全没有问题.但如果并发高,在我们对文件进行读写操作时,很有可能多个进程对进一文件进行操作,如果这时不对文件的访问进行相 ...

  7. Android USB配件模式

    原文:http://android.eoe.cn/topic/android_sdk USB配件模式允许用户连接那些专门搭载Android设备的USB主机硬件.这些配件必须遵守Android配件开发工 ...

  8. 源码解析-EventBus

    示例使用 时序图 源码解读 EventBus 使用 官网定义:EventBus 是一个使用 Java 写的观察者模式,解耦的 Android 开源库.EventBus 只需要几行代码即可解耦简化代码, ...

  9. 批处理向FTP上传指定属性的文件 批处理增量备份的例子

    使用windows批处理向FTP上传具有指定属性的文件,类似增量备份功能. 对一个目录里的几个文件自动上传FTP时只上传有归档属性的文件,然后FTP上传成功后自动清除(本机)刚上传文件的归档属性. 类 ...

  10. mongoose查询不到数据表中的数据的问题

    在做分类管理的时候,在数据库中创建了一张category表,但使用下面这行代码始终查不到表里的数据,也没有任何报错. var Category = mongoose.model('Category', ...