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

ExtJS的FieldSet的column列布局

Nov 20 Javascript

了解jQuery技巧来提高你的代码

Jan 08 Javascript

javascript函数中的arguments参数

Aug 01 Javascript

jQuery数据显示插件整合实现代码

Oct 24 Javascript

javascript 在firebug调试时用console.log的方法

May 10 Javascript

jQuery源码中的chunker 正则过滤符分析

Jul 31 Javascript

Js动态添加复选框Checkbox的实例方法

Apr 08 Javascript

JavaScript函数的4种调用方法详解

Apr 22 Javascript

JS+html5 canvas实现的简单绘制折线图效果示例

Mar 13 Javascript

vue+vuex+axios实现登录、注册页权限拦截

Mar 09 Javascript

node-red File读取好保存实例讲解

Sep 11 Javascript

前端vue+express实现文件的上传下载示例

Feb 18 Vue.js

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

《雄兵连》系列首部大电影《烈阳天道》：可能是因为期望值太高了

2020/08/18 国漫

destoon实现调用当前栏目分类及子分类和三级分类的方法

2014/08/21 PHP

深入理解PHP中的empty和isset函数

2016/05/26 PHP

php表单习惯用的正则表达式

2017/10/11 PHP

用prototype实现的简单小巧的多级联动菜单

2007/03/24 Javascript

JavaScript 以对象为索引的关联数组

2010/05/19 Javascript

判断javascript的数据类型(示例代码)

2013/12/11 Javascript

jquery实现带缩略图的全屏图片画廊效果实例

2015/06/25 Javascript

jQuery跨域问题解决方案

2015/08/03 Javascript

CSS图片响应式垂直水平居中

2015/08/14 Javascript

Javascript函数式编程简单介绍

2015/10/11 Javascript

基于Jquery插件Uploadify实现实时显示进度条上传图片

2020/03/26 Javascript

ionic开发中点击input时键盘自动弹出

2016/12/23 Javascript

基于js原生和ajax的get和post方法以及jsonp的原生写法实例

2017/10/16 Javascript

Angular实现的table表格排序功能完整示例

2017/12/22 Javascript

利用JavaScript缓存远程窃取Wi-Fi密码的思路详解

2018/11/05 Javascript

jQuery-Citys省市区三级菜单联动插件使用详解

2019/07/26 jQuery

js实现三角形粒子运动

2020/09/22 Javascript

Vue中正确使用Element-UI组件的方法实例

2020/10/13 Javascript

Bootstrap FileInput实现图片上传功能

2021/01/28 Javascript

Python实现的一个找零钱的小程序代码分享

2014/08/25 Python

Python全局变量操作详解

2015/04/14 Python

python使用正则表达式提取网页URL的方法

2015/05/26 Python

python通过百度地图API获取某地址的经纬度详解

2018/01/28 Python

python如何实现反向迭代

2018/03/20 Python

Python实现的连接mssql数据库操作示例

2018/08/17 Python

Django数据库连接丢失问题的解决方法

2018/12/29 Python

Keras官方中文文档:性能评估Metrices详解

2020/06/15 Python

美国庭院家具购物网站：AlphaMarts

2019/04/10 全球购物

铁路安全事故反思

2014/04/26 职场文书

一年级语文下册复习计划

2015/01/17 职场文书

2016先进集体事迹材料范文

2016/02/25 职场文书

Python还能这么玩之用Python做个小游戏的外挂

2021/06/04 Python

关于mysql中时间日期类型和字符串类型的选择

2021/11/27 MySQL

如何打开Win11系统注册表编辑器？Win11注册表编辑器打开修复方法

2022/04/05 数码科技

3050和2060哪个好性能差多少差距有多大谁更有性价比

2022/06/17 数码科技