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

js自动闭合html标签(自动补全html标记)

Oct 04 Javascript

获得Javascript对象属性个数的示例代码

Nov 21 Javascript

使用jQuery实现的掷色子游戏动画效果

Mar 14 Javascript

javascript替换已有元素replaceChild()使用介绍

Apr 03 Javascript

JS倒计时代码汇总

Nov 25 Javascript

微信支付如何实现内置浏览器的H5页面支付

Sep 25 Javascript

ajax接收后台数据在html页面显示

Feb 19 Javascript

node.js利用redis数据库缓存数据的方法

Mar 01 Javascript

JavaScript设计模式之缓存代理模式原理与简单用法示例

Aug 07 Javascript

jquery+css实现Tab栏切换的代码实例

May 14 jQuery

解决微信小程序scroll-view组件无横向滚动的问题

Feb 04 Javascript

vuejs实现下拉框菜单选择

Oct 23 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

DC游戏Steam周三特惠《蝙蝠侠》阿卡姆系列平史低

2020/04/09 欧美动漫

php 5.3.5安装memcache注意事项小结

2011/04/12 PHP

PHP利用二叉堆实现TopK-算法的方法详解

2017/04/24 PHP

Javascript hasOwnProperty 方法 & in 关键字

2008/11/26 Javascript

TextArea设置MaxLength属性最大输入值的js代码

2012/12/21 Javascript

jQuery实现类似滑动门切换效果的层切换

2013/09/23 Javascript

js的匿名函数使用介绍

2013/12/11 Javascript

JavaScript 事件入门知识

2015/04/13 Javascript

jquery实现两个图片渐变切换效果的方法

2015/06/25 Javascript

jQuery实现动态表单验证时文本框抖动效果完整实例

2015/08/21 Javascript

浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用

2016/09/09 Javascript

JS防止网页被嵌入iframe框架的方法分析

2016/09/13 Javascript

jquery 正整数数字校验正则表达式

2017/01/10 Javascript

原生JS实现N级菜单的代码

2017/05/21 Javascript

vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法

2018/01/25 Javascript

JavaScript格式化json和xml的方法示例

2019/01/22 Javascript

Python输出汉字字库及将文字转换为图片的方法

2016/06/04 Python

详谈Python2.6和Python3.0中对除法操作的异同

2017/04/28 Python

python绘制地震散点图

2019/06/18 Python

python的pstuil模块使用方法总结

2019/07/26 Python

Django文件存储自己定制存储系统解析

2019/08/02 Python

python实现简单坦克大战

2020/03/27 Python

TensorFlow打印输出tensor的值

2020/04/19 Python

pytorch查看通道数维数尺寸大小方式

2020/05/26 Python

windows系统Tensorflow2.x简单安装记录(图文)

2021/01/18 Python

解析浏览器的一些“滚动”行为鉴赏

2019/09/16 HTML / CSS

固特异美国在线轮胎店：Goodyear Tire

2019/02/23 全球购物

敬老模范事迹

2014/05/21 职场文书

四风问题党员个人整改措施

2014/10/27 职场文书

五年级上册复习计划

2015/01/19 职场文书

2015年学校财务工作总结

2015/05/19 职场文书

就业证明函

2015/06/17 职场文书

格列夫游记读书笔记

2015/07/01 职场文书

基于Python实现的购物商城管理系统

2021/04/27 Python

Mysql服务添加 iptables防火墙策略的方案

2021/04/29 MySQL

javascript遍历对象的五种方式实例代码

2021/10/24 Javascript