编程 Javascript

jQuery超赞的评分插件（8款）

Posted in Javascript onAugust 20, 2015

本文跟大家分享了8款jQuery评分插件，相信总有一款是适合你的哦

抓紧先上图给大家挑选一下

------------------------------------------效果查看源码下载------------------------------------------

jQuery超赞的评分插件（8款）

小编挺喜欢第一款的，亲，你呐？

为大家再分享实现8款jQuery评分插件代码，抓紧试试吧

<head>
<meta charset="gb2312">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>8款超赞的jQuery评分插件</title>
<meta name="description" content="">
<meta name="viewport" content="width=1024">
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/examples.css">
<!--[if lt IE 9]>
 <script src="js/vendor/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<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>

<script src="js/vendor/jquery-1.11.2.min.js"></script> 
<script src="js/jquery.barrating.js"></script>
<script src="js/examples.js"></script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

以上就是以上就是为大家分享的jQuery超赞的评分插件代码，希望大家可以喜欢。

jQuery超赞的评分插件（8款）

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

求得div 下 img的src地址的js代码

Feb 28 Javascript

弹出广告特效代码(一个IP只弹出一次)

May 11 Javascript

[Web]防止用户复制页面内容和另存页面的方法

Feb 06 Javascript

Javascript异步表单提交，图片上传，兼容异步模拟ajax技术

May 10 Javascript

jQuery powerFloat万能浮动层下拉层插件使用介绍

Dec 27 Javascript

javascript中encodeURI和decodeURI方法使用介绍

May 06 Javascript

jQuery中RadioButtonList的功能及用法实例介绍

Aug 23 Javascript

jquery清空表单数据示例分享

Feb 13 Javascript

页面加载完成后再执行JS的jquery写法以及区别说明

Feb 22 Javascript

jQuery中andSelf()方法用法实例

Jan 08 Javascript

Angular 2父子组件之间共享服务通信的实现

Jul 04 Javascript

Laravel admin实现消息提醒、播放音频功能

Jul 10 Javascript

jQuery网页版打砖块小游戏源码分享

Aug 20 #Javascript

js实现鼠标点击文本框自动选中内容的方法

Aug 20 #Javascript

js实现文字在按钮上滚动的方法

Aug 20 #Javascript

jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享

Aug 20 #Javascript

js实现网页多级级联菜单代码

Aug 20 #Javascript

javascript常用的方法整理

Aug 20 #Javascript

JS实现的Select三级下拉菜单代码

Aug 20 #Javascript

You might like

PHP实现模仿socket请求返回页面的方法

2014/11/04 PHP

PHP+JS实现的商品秒杀倒计时用法示例

2016/11/15 PHP

PHP获取当前URL路径的处理方法(适用于多条件筛选列表)

2017/02/10 PHP

PHP 7.4 新语法之箭头函数实例详解

2019/05/09 PHP

php 使用mpdf实现指定字段配置字体样式的方法

2019/07/29 PHP

JS控件autocomplete 0.11演示及下载 1月5日已更新

2007/01/09 Javascript

jQuery Validation插件remote验证方式的Bug解决

2010/07/01 Javascript

JavaScript中使用构造函数实现继承的代码

2010/08/12 Javascript

简单谈谈Javascript中类型的判断

2015/10/19 Javascript

JS使用post提交的两种方式

2015/12/03 Javascript

JavaScript获取select中text值的方法

2017/02/13 Javascript

vue 之 .sync 修饰符示例详解

2018/04/21 Javascript

JS实现将对象转化为数组的方法分析

2019/01/21 Javascript

JS html事件冒泡和事件捕获操作示例

2019/05/01 Javascript

jQuery实现移动端笔触canvas电子签名

2020/05/21 jQuery

解决vue单页面应用进入页面加载所有 js 的问题

2020/08/12 Javascript

python使用cookielib库示例分享

2014/03/03 Python

Python中获取网页状态码的两个方法

2014/11/03 Python

Keras使用tensorboard显示训练过程的实例

2020/02/15 Python

python中adb有什么功能

2020/06/07 Python

Python配置pip国内镜像源的实现

2020/08/20 Python

Django框架实现在线考试系统的示例代码

2020/11/30 Python

html5 Canvas实现图片旋转的示例

2018/01/15 HTML / CSS

C语言中break与continue的区别

2012/07/12 面试题

LINUX下线程，GDI类的解释

2016/12/14 面试题

财务会计应届生求职信

2013/11/24 职场文书

2013年军训通讯稿

2014/02/05 职场文书

中班中秋节活动反思

2014/02/18 职场文书

党员自我剖析材料范文

2014/10/06 职场文书

房产公证书样本

2015/01/23 职场文书

庆六一开幕词

2015/01/29 职场文书

离婚起诉书范文2015

2015/05/19 职场文书

2016年少先队活动总结

2016/04/06 职场文书

2016年“5.12”国际护士节活动总结

2016/04/06 职场文书

Nginx反向代理配置的全过程记录

2021/06/22 Servers

TS 类型收窄教程示例详解

2022/09/23 Javascript