编程 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 相关文章推荐

javascript 实用的文字链提示框效果

Jun 30 Javascript

IE下js调试工具Companion.JS

Oct 15 Javascript

简单实用的反馈表单无刷新提交带验证

Nov 15 Javascript

用jquery.sortElements实现table排序

May 04 Javascript

在easyUI开发中，出现jquery.easyui.min.js函数库问题的解决办法

Sep 11 Javascript

jquery实现弹窗功能（窗口居中显示）

Feb 27 Javascript

学习Vue组件实例

Apr 28 Javascript

Vue+Typescript中在Vue上挂载axios使用时报错问题

Aug 07 Javascript

一文看懂如何简单实现节流函数和防抖函数

Sep 05 Javascript

vue 解决路由只变化参数页面组件不更新问题

Nov 05 Javascript

vue使用一些外部插件及样式的配置代码

Nov 18 Javascript

基于javascript的无缝滚动动画1

Aug 07 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

Ajax PHP简单入门教程代码

2008/04/25 PHP

php join函数应用

2011/05/04 PHP

php模块memcache和memcached区别分析

2011/06/14 PHP

phpmyadmin安装时提示：Warning: require_once(./libraries/common.inc.php)错误解决办法

2011/08/18 PHP

PHP调用Linux命令权限不足问题解决方法

2015/02/07 PHP

php关联数组快速排序的方法

2015/04/17 PHP

基于php+MySql实现学生信息管理系统实例

2020/08/04 PHP

XmlUtils JS操作XML工具类

2009/10/01 Javascript

javascript实现跳转菜单的具体方法

2013/07/05 Javascript

Node.js中HTTP模块与事件模块详解

2014/11/14 Javascript

深入理解JavaScript系列（48）：对象创建模式（下篇）

2015/03/04 Javascript

KnockoutJs快速入门教程

2016/05/16 Javascript

Angular 应用技巧总结

2016/09/14 Javascript

前端实现文件的断点续传(前端文件提交+后端PHP文件接收)

2016/11/04 Javascript

bootstrap网格系统使用方法解析

2017/01/13 Javascript

JavaScript之浏览器对象_动力节点Java学院整理

2017/07/03 Javascript

Vue filters过滤器的使用方法

2017/07/14 Javascript

微信小程序中使用Promise进行异步流程处理的实例详解

2017/08/17 Javascript

vue-router 权限控制的示例代码

2017/09/21 Javascript

ES6扩展运算符用法实例分析

2017/10/31 Javascript

解决vue做详情页跳转的时候使用created方法数据不会更新问题

2020/07/24 Javascript

2款Python内存检测工具介绍和使用方法

2014/06/01 Python

python中as用法实例分析

2015/04/30 Python

python学习流程控制语句详解

2016/06/01 Python

用python记录运行pid,并在需要时kill掉它们的实例

2017/01/16 Python

python和flask中返回JSON数据的方法

2018/03/26 Python

Python基础教程之利用期物处理并发

2018/03/29 Python

python对excel文档去重及求和的实例

2018/04/18 Python

HTML5+CSS3 诱人的实例：3D立方体旋转动画实例

2016/12/30 HTML / CSS

香港礼品网站：GiftU eshop

2017/09/01 全球购物

Berghaus官网：户外服装和设备，防水服

2020/01/17 全球购物

初中优秀教师事迹材料

2014/08/18 职场文书

大三学生学年自我鉴定

2014/09/12 职场文书

晋江市委常委班子四风问题整改工作方案

2014/10/26 职场文书

地道战观后感

2015/06/04 职场文书

使用这 6个Vue加载动画库来减少我们网站的跳出率

2021/05/18 Vue.js