基于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 代码提示工具,扫描你的代码后,根据你的敲击 ...

随机推荐

Android Studio 常见问题汇总
一.字体大小问题在android studio的使用过程中没有发现类似于Eclipse中的font选项,调节字体大小方法如下: 1.File---- >Settings,找到Editor 2. ...
使用itext直接替换PDF中的文本
直接说问题,itext没有直接提供替换PDF中文本的接口(查看资料得到的结论是PDF不支持这种操作),不过存在解决思路:在需要替换的文本上覆盖新的文本.按照这个思路我们需要解决以下几个问题: itex ...
【ASP.NET】Layout使用详解
1.母板页_Layout.cshtml 类似于传统WebForm中的.master文件,起到页面整体框架重用的目地 1.母板页代码预览 1 <!DOCTYPE html> 2 <ht ...
eclipse插件安装的四种方法
Eclipse插件的安装方法 1.在eclipse的主目录(ECLIPSE_HOME,比如在我的机器上安装的目录是:D:\eclipse)有一个plugins的目录,这种方法的插件安装非常简单,只要将 ...
HDU - 4511 小明系列故事――女友的考验(AC自己主动机+DP)
Description 最终放寒假了,小明要和女朋友一起去看电影.这天,女朋友想给小明一个考验,在小明正准备出发的时候.女朋友告诉他.她在电影院等他,小明过来的路线必须满足给定的规则: 1.如果小明 ...
Eclipse Oxygen创建maven web项目（一）
1. 首先新建一个maven项目(默认是打包成jar的项目) 也可以建一个war类型的maven项目,反正都需要手动建立一些缺失的文件夹. 2. 修改pom.xml的打包类型参数默认的jar类型的包 ...
JPA学习笔记（8）——映射一对多关联关系
一对多关联关系本文有很多和多对一是一样的,因此不会写得非常具体. 有看不懂的.能够參考JPA学习笔记(7)--映射多对一关联关系 Order实体类 package com.jpa.helloworl ...
STM32定时器T2纯软件仿真时间准确，JTAG在线调试查看时间不准的问题
通过查看Sec的值和上次中断的差值计算的,虽然这个值是不准的 ,但实际上时间是准的, 原因如下:stm32在调试模式下虽然进断点之后程序停止了,但定时器的时钟还在走,计数器还在计数,若要在产生断点时计 ...
Knockout: 使用CSS绑定和event的blur失去焦点事件, 给未通过校验的输入框添加红色边框突出显示.
目的:使用knockout提供的机制实现输入框失去焦点后的校验工作,并使用CSS绑定给未通过校验的输入框添加红色边框突出显示. 步骤: 先在htm中添加.error的css样式, 并在输入框中的dat ...
php实现ZIP压缩文件解压缩(转)
测试使用了两个办法都可以实现: 第一个:需要开启配置php_aip.dll <?php //需开启配置 php_zip.dll //phpinfo(); header("Content ...

基于jQuery8款超赞的评分插件

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

随机推荐

热门专题