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超赞的评分插件代码,希望大家可以喜欢。

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 方法 &amp; 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