基于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平台的音乐资源管理与播放
Android平台基于Linux和开放手机联盟(OHA)系统,经过中国移动的创新研发,设计出拥有新颖独特的用户操作界面,增强了浏览器能力和WAP 兼容性,优化了多媒体领域的OpenCORE.浏览器领域 ...
- CListCtrl设置选中行
原文链接: http://blog.163.com/lejianz@126/blog/static/11650292013610103232600/ CListCtrl 设置选中状态 1. 使用CLi ...
- Knockout与Require框架同时使用时的visible绑定的问题,造成的影响,以及解决的方法。
Knockout 可以将 visible 绑定到DOM 元素上,使得该元素的hidden 或visible 状态取决于绑定的值. 查看以下knockout的描述,http://knockoutjs.c ...
- spring中InitializingBean接口使用理解(转)
InitializingBean接口为bean提供了初始化方法的方式,它只包括afterPropertiesSet方法,凡是继承该接口的类,在初始化bean的时候会执行该方法. 测试程序如下: imp ...
- 支付接口中常用的加密解密以及验签rsa,md5,sha
一.常用加密类型分类 1.对称加密:采用单钥对信息进行加密和解密,即同一个秘钥既可以对信息进行加密,也可以进行解密.此类型称之为对称加密.特点速度快,常用于对大量数据信息或文件加密时使用.常用例子:D ...
- Android SDK不能够更新
Adroid不能够更新,因为国内将google的服务器墙掉了,在 1) vim /etc/hosts(Windows上路径为:C:\Windows\System32\drivers\etc\hosts ...
- php分享二十三:字符编码
1:ASCII 在计算机中,所有的数据在存储和运算时都要使用二进制数表示(因为计算机用高电平和低电平分别表示1和0),例如,像a.b.c.d这样的52个字母(包括大写).以及0.1等数字还有一些常用的 ...
- idea自动编译
idea修改后台代码自动编译 On 'update' action = Update classes and resources On frame deactivation = Update clas ...
- javaweb下载文件
//读取文件->写出文件 public static void main(String[] args) { InputStream in =null; OutputStream out = nu ...
- linq筛选唯一
var sizelist= (from p in stockList select p.Size).Distinct().ToArray(); newslist = newslist.OrderBy( ...