编程 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格式化货币数据实现代码

Sep 04 Javascript

connect中间件session、cookie的使用方法分享

Jun 17 Javascript

JQuery 给元素绑定click事件多次执行的解决方法

Sep 09 Javascript

JS及PHP代码编写八大排序算法

Jul 12 Javascript

微信公众号支付H5调用支付解析

Nov 04 Javascript

Vue.js实现一个漂亮、灵活、可复用的提示组件示例

Mar 17 Javascript

详解如何使用vue-cli脚手架搭建Vue.js项目

May 19 Javascript

jQuery实现简单的计时器功能实例分析

Aug 29 jQuery

uploadify插件实现多个图片上传并预览

Sep 30 Javascript

关于vue表单提交防双/多击的例子

Oct 31 Javascript

Vue Object.defineProperty及ProxyVue实现双向数据绑定

Sep 02 Javascript

基于JavaScript实现随机点名器

Feb 25 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

MYSQL环境变量设置方法

2007/01/15 PHP

Yii2.0框架behaviors方法使用实例分析

2019/09/30 PHP

JavaScript中的Window窗口对象

2008/01/16 Javascript

javascript 设置某DIV区域内的checkbox复选框

2009/11/30 Javascript

JavaScript flash复制库类 Zero Clipboard

2011/01/17 Javascript

jquery zTree异步加载简单实例分享

2013/02/05 Javascript

jquery自定义类似$.ajax()的方法实现代码

2013/08/13 Javascript

jquery查找tr td 示例模拟

2014/05/08 Javascript

Bootstrap弹出框(modal)垂直居中的问题及解决方案详解

2016/06/12 Javascript

Vue中使用 setTimeout() setInterval()函数的问题

2018/09/13 Javascript

ES10 特性的完整指南小结

2019/03/04 Javascript

[01:33:59]真人秀《加油 DOTA》第六期

2014/09/09 DOTA

Python中MYSQLdb出现乱码的解决方法

2014/10/11 Python

浅谈python中的面向对象和类的基本语法

2016/06/13 Python

python 重定向获取真实url的方法

2018/05/11 Python

Python实现多属性排序的方法

2018/12/05 Python

Django+zTree构建组织架构树的方法

2019/08/21 Python

Python实现TCP探测目标服务路由轨迹的原理与方法详解

2019/09/04 Python

win10系统下python3安装及pip换源和使用教程

2020/01/06 Python

pytorch 图像中的数据预处理和批标准化实例

2020/01/15 Python

CSS3 旋转立方体问题详解

2020/01/09 HTML / CSS

Dr. Martens马汀博士官网：马丁靴始祖品牌

2016/10/15 全球购物

国际礼品店：GiftsnIdeas

2018/05/03 全球购物

黄色火烈鸟：De Gele Flamingo

2019/03/18 全球购物

使用C#编写创建一个线程的代码

2013/01/22 面试题

大学生秋游活动方案

2014/02/17 职场文书

爱情寄语大全

2014/04/09 职场文书

艺术设计专业个人求职信

2014/04/10 职场文书

小学生期末评语大全

2014/04/21 职场文书

安全生产承诺书范文

2014/05/22 职场文书

学校四风问题对照检查材料思想汇报

2014/09/26 职场文书

安全月宣传标语

2014/10/07 职场文书

教师学期末个人总结

2015/02/13 职场文书

异地恋情人节寄语

2015/02/28 职场文书

2015年高校教师个人工作总结

2015/05/25 职场文书

mysql中关键词exists的用法实例详解

2022/06/10 MySQL