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

非常不错的功能强大代码简单的管理菜单美化版

Jul 09 Javascript

File文件控件，选中文件(图片,flash,视频)即立即预览显示

Apr 09 Javascript

js前台分页显示后端JAVA数据响应

Mar 18 Javascript

jquery实现右键菜单插件

Mar 29 Javascript

深入理解javascript作用域第二篇之词法作用域和动态作用域

Jul 24 Javascript

jQuery与JavaScript节点创建方法的对比

Nov 18 Javascript

基于vue2的table分页组件实现方法

Mar 20 Javascript

聊聊JS动画库 Velocity.js的使用

Mar 13 Javascript

详解Webpack + ES6 最新环境搭建与配置

Jun 04 Javascript

es6数据变更同步到视图层的方法

Mar 04 Javascript

基于Vue2-Calendar改进的日历组件（含中文使用说明）

Apr 14 Javascript

Weex开发之地图篇的具体使用

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

追忆往昔！浅谈收音机的百年发展历史

2021/03/01 无线电

php 中英文语言转换类

2011/09/07 PHP

php实现天干地支计算器示例

2014/03/14 PHP

codeigniter中实现一次性加载多个view的方法

2015/03/20 PHP

javascript new一个对象的实质

2010/01/07 Javascript

jquery实现的让超出显示范围外的导航自动固定屏幕最顶上

2011/09/22 Javascript

js将字符串转成正则表达式的实现方法

2013/11/13 Javascript

JS+DIV实现鼠标划过切换层效果的实例代码

2013/11/26 Javascript

《JavaScript DOM 编程艺术》读书笔记之DOM基础

2015/01/09 Javascript

JavaScript中for循环的使用详解

2015/06/03 Javascript

jquery及js实现动态加载js文件的方法

2016/01/21 Javascript

jQuery操作Table技巧大汇总

2016/01/23 Javascript

bootstrap表单示例代码分享

2017/05/18 Javascript

[52:26]完美世界DOTA2联赛决赛 FTD vs Phoenix 第一场 11.08

2020/11/11 DOTA

在Python中使用HTML模版的教程

2015/04/29 Python

Python微信企业号开发之回调模式接收微信端客户端发送消息及被动返回消息示例

2017/08/21 Python

Python实现DDos攻击实例详解

2019/02/02 Python

Django 解决开发自定义抛出异常的问题

2020/05/21 Python

Python urllib3软件包的使用说明

2020/11/18 Python

html5 postMessage前端跨域并前端监听的方法示例

2018/11/01 HTML / CSS

Html5基于canvas实现电子签名并生成PDF文档

2020/12/07 HTML / CSS

Crucial英睿达法国官网：内存条及SSD固态硬盘升级

2018/07/13 全球购物

美国现代家具购物网站：LexMod

2019/01/09 全球购物

Laravel中Kafka的使用详解

2021/03/24 PHP

毕业生简单求职信

2013/11/19 职场文书

大学生秋游活动方案

2014/02/17 职场文书

2014年清明节网上祭英烈寄语

2014/04/09 职场文书

小学教师师德承诺书

2014/05/23 职场文书

大学生党员学习焦裕禄精神思想汇报

2014/09/10 职场文书

离婚协议书该怎么写

2014/10/04 职场文书

2015年乡镇科普工作总结

2015/05/13 职场文书

2016年社会主义核心价值观心得体会

2016/01/21 职场文书

导游词之吉林吉塔

2019/11/11 职场文书

如何使用JavaScript策略模式校验表单

2021/04/29 Javascript

python实现手机推送代码也就10行左右

2022/04/12 Python

MySQL导致索引失效的几种情况

2022/06/25 MySQL