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

jquery form表单提交插件asp.net后台中文解码

Jun 12 Javascript

5秒后跳转效果(setInterval/SetTimeOut)

May 03 Javascript

js处理php输出时间戳对不上号的解决方法

Jun 20 Javascript

JavaScript事件委托用法分析

Jan 24 Javascript

JavaScript获取网页支持表单字符集的方法

Apr 02 Javascript

javascript实现起伏的水波背景效果

May 16 Javascript

js完整倒计时代码分享

Sep 18 Javascript

vue.js项目中实用的小技巧汇总

Nov 29 Javascript

AngularJS创建一个上传照片的指令实例代码

Feb 24 Javascript

jQuery发请求传输中文参数乱码问题的解决方案

May 22 jQuery

解决layer.confirm快速点击会重复触发事件的问题

Sep 23 Javascript

简单了解vue 插值表达式Mustache

Jul 22 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+FFMPEG实现将视频自动转码成H264标准Mp4文件

2014/09/24 PHP

PHP SPL标准库之SplFixedArray使用实例

2015/05/12 PHP

PHP+HTML+JavaScript+Css实现简单爬虫开发

2016/03/28 PHP

cakephp2.X多表联合查询join及使用分页查询的方法

2017/02/23 PHP

TP5(thinkPHP5)框架使用ajax实现与后台数据交互的方法小结

2020/02/10 PHP

THINKPHP-Apache服务器中使用Alias虚拟目录URL重写隐藏index.php

2021/03/09 PHP

javascript权威指南学习笔记之null和undefined

2011/09/25 Javascript

TimergliderJS 一个基于jQuery的时间轴插件

2011/12/07 Javascript

Three.js源码阅读笔记(Object3D类)

2012/12/27 Javascript

jquery控制select的text/value值为选中状态

2014/06/03 Javascript

javascript中parseInt()函数的定义和用法分析

2014/12/20 Javascript

JavaScript检测鼠标移动方向的方法

2015/05/22 Javascript

Express的路由详解

2015/12/10 Javascript

jQuery定义插件的方法

2015/12/18 Javascript

nginx部署访问vue-cli搭建的项目的方法

2018/02/12 Javascript

实例分析JS中的相等性判断===、 ==和Object.is()

2019/11/17 Javascript

vant实现购物车功能

2020/06/29 Javascript

如何在selenium中使用js实现定位

2020/08/18 Javascript

vue用ant design中table表格,点击某行时触发的事件操作

2020/10/28 Javascript

python实现数值积分的Simpson方法实例分析

2015/06/05 Python

python自定义异常实例详解

2017/07/11 Python

Python 多核并行计算的示例代码

2017/11/07 Python

python 对txt中每行内容进行批量替换的方法

2018/07/11 Python

对pycharm 修改程序运行所需内存详解

2018/12/03 Python

Python读取实时数据流示例

2019/12/02 Python

kafka监控获取指定topic的消息总量示例

2019/12/23 Python

一款纯css3实现的颜色渐变按钮的代码教程

2014/11/12 HTML / CSS

德国化妆品和天然化妆品网上商店：kosmetikfuchs.de

2017/06/09 全球购物

全球最大的中文旅行网站：去哪儿网

2017/11/16 全球购物

总经理岗位职责

2013/11/09 职场文书

餐饮周年庆活动方案

2014/08/14 职场文书

承诺书模板

2014/08/30 职场文书

销售员态度差检讨书

2014/10/26 职场文书

向女朋友道歉的话

2015/01/20 职场文书

电力工程合作意向书

2015/05/11 职场文书

公司欠款证明

2015/06/24 职场文书