首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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 相关文章推荐
Android中资源文件(非代码部分)的使用概览
Dec 18 Javascript
node.js中的console.assert方法使用说明
Dec 10 Javascript
PHP守护进程实例
Mar 06 Javascript
将页面table内容与样式另存成excel文件的方法
Aug 05 Javascript
详解Bootstrap创建表单的三种格式（一）
Jan 04 Javascript
JavaScript实现身份证验证代码
Feb 17 Javascript
js多功能分页组件layPage使用方法详解
May 19 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
Jul 23 Javascript
深入理解 webpack 文件打包机制(小结)
Jan 08 Javascript
实例讲解v-if和v-show的区别
Jan 31 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
Nov 14 Javascript
node静态服务器实现静态读取文件或文件夹
Dec 03 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
子查询(1) mounted(1) el-table(1) set(1) frozenset(1) Mybatis-Plus(3) 脚手架(2) TableField(1) create(1) Next.js(1)
You might like
地球防卫队：陪着奥特曼打小怪兽的人类力量 那些经典队服
2020/03/08 日漫
php zlib压缩和解压缩swf文件的代码
2008/12/30 PHP
PHP自动选择 连接本地还是远程数据库
2010/12/02 PHP
PHP调用Linux命令权限不足问题解决方法
2015/02/07 PHP
php中关于socket的系列函数总结
2015/05/18 PHP
Laravel5.1 框架响应基本用法实例分析
2020/01/04 PHP
如何确保JavaScript的执行顺序 之实战篇
2011/03/03 Javascript
Javascript 闭包引起的IE内存泄露分析
2012/05/23 Javascript
基于jQuery的倒计时实现代码
2012/05/30 Javascript
JQuery之focus函数使用介绍
2013/08/20 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
2014/05/20 Javascript
JQuery Tips相关(1)----关于$.Ready()
2014/08/14 Javascript
Javascript中arguments对象详解
2014/10/22 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新，页面关闭不进行倒计时功能)
2016/09/02 Javascript
jQuery实现图片轮播效果代码
2016/09/27 Javascript
webpack进阶——缓存与独立打包的用法
2017/08/02 Javascript
详解nodejs中express搭建权限管理系统
2017/09/15 NodeJs
vue-scroller记录滚动位置的示例代码
2018/01/17 Javascript
Vue中父子组件通讯之todolist组件功能开发
2018/05/21 Javascript
浅谈Javascript中的对象和继承
2019/04/19 Javascript
layui中select，radio设置不生效的解决方法
2019/09/05 Javascript
基于vue实现图片验证码倒计时60s功能
2019/12/10 Javascript
python用fsolve、leastsq对非线性方程组求解
2018/12/15 Python
Python BeautifulSoup [解决方法] TypeError: list indices must be integers or slices, not str
2019/08/07 Python
python Dijkstra算法实现最短路径问题的方法
2019/09/19 Python
Django Form常用功能及代码示例
2020/10/13 Python
Python爬虫自动化获取华图和粉笔网站的错题(推荐)
2021/01/08 Python
CSS3实现图片抽屉式效果的示例代码
2019/11/06 HTML / CSS
洛杉矶时尚女装系列：J.ING US
2019/03/17 全球购物
工商企业管理实习自我鉴定
2013/12/04 职场文书
2014升学宴答谢词
2014/01/26 职场文书
实验室的标语
2014/06/20 职场文书
标准大学生职业生涯规划书写作指南
2014/09/18 职场文书
如何写一份具有法律效力的借款协议书？
2019/07/02 职场文书
详解nginx进程锁的实现
2021/06/14 Servers
使用GO语言实现Mysql数据库CURD的简单示例
2021/08/07 Golang