编程 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创建快捷方式的简单实例

Aug 09 Javascript

jquery+css3实现会动的小圆圈效果

Jan 27 Javascript

详解XMLHttpRequest（二）响应属性、二进制数据、监测上传下载进度

Sep 14 Javascript

js前端解决跨域问题的8种方案（最新最全）

Nov 18 Javascript

JavaScript实现大图轮播效果

Jan 11 Javascript

Vue.js仿Metronic高级表格（一）静态设计

Apr 17 Javascript

使用vue-cli创建项目的图文教程(新手入门篇)

May 02 Javascript

JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例

May 31 jQuery

jQuery实现王者荣耀手风琴效果

Jan 17 jQuery

解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题

Aug 14 Javascript

解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题

Nov 05 Javascript

Js利用正则表达式去除字符串的中括号

Nov 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

PHP的几个常用加密函数

2016/02/03 PHP

php使用strip_tags()去除html标签仍有空白的解决方法

2016/07/28 PHP

浅谈PHP定义命令空间的几个注意点(推荐)

2016/10/29 PHP

PHP环境搭建(php+Apache+mysql)

2016/11/14 PHP

JavaScript的Function详细

2006/11/14 Javascript

javascript下过滤数组重复值的代码

2007/09/10 Javascript

圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现

2012/12/27 Javascript

javascript弹出页面回传值的方法

2015/01/28 Javascript

工作中常用的js、jquery自定义扩展函数代码片段汇总

2016/12/22 Javascript

JS实现仿百度文库评分功能

2017/01/12 Javascript

微信小程序图片横向左右滑动案例

2017/05/19 Javascript

ReactNative中使用Redux架构总结

2017/12/15 Javascript

详解自定义ajax支持跨域组件封装

2018/02/08 Javascript

Nodejs模块载入运行原理

2018/02/23 NodeJs

微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能

2019/07/20 Javascript

JQuery使用数组遍历跳出each循环

2020/09/01 jQuery

[03:36]DOTA2完美大师赛coL战队趣味视频——我演你猜

2017/11/23 DOTA

从Python的源码浅要剖析Python的内存管理

2015/04/16 Python

深入解析Python中的descriptor描述器的作用及用法

2016/06/27 Python

Python获取暗黑破坏神3战网前1000命位玩家的英雄技能统计

2016/07/04 Python

浅谈numpy数组的几种排序方式

2017/12/15 Python

python实现按长宽比缩放图片

2018/06/07 Python

PyCharm 创建指定版本的 Django（超详图解教程）

2019/06/18 Python

Python正则表达式学习小例子

2020/03/03 Python

python实现杨辉三角的几种方法代码实例

2021/03/02 Python

CSS3盒子模型详解

2013/04/24 HTML / CSS

使用css3实现的windows8开机加载动画

2014/12/09 HTML / CSS

巴西最好的男鞋：Rafarillo

2018/05/25 全球购物

Lampenwelt德国：欧洲领先的灯具和照明在线商店

2018/08/05 全球购物

VICHY薇姿俄罗斯官方网上商店：法国护肤品牌，火山温泉水

2019/11/22 全球购物

美国滑板店：Tactics

2020/11/08 全球购物

简历中的自我评价怎么写

2014/01/29 职场文书

乡镇交通安全实施方案

2014/03/29 职场文书

工伤赔偿协议书

2014/04/15 职场文书

党支部遵守党的政治纪律情况对照检查材料

2014/09/26 职场文书

2015年计生协会工作总结

2015/04/24 职场文书