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

借用Google的Javascript API Loader来加速你的网站

Jan 28 Javascript

JavaScript 对话框和状态栏使用说明

Oct 25 Javascript

下拉框select的绑定示例

Sep 04 Javascript

JavaScript数组去重的五种方法

Nov 05 Javascript

快速使用Bootstrap搭建传送带

May 06 Javascript

Javascript基础教程之比较null和undefined值

May 16 Javascript

详解vuex 中的 state 在组件中如何监听

May 23 Javascript

微信小程序tabbar不显示解决办法

Jun 08 Javascript

微信开发之微信jssdk录音功能开发示例

Oct 22 Javascript

详解js根据百度地图提供经纬度计算两点距离

May 13 Javascript

详解如何在Javascript和Sass之间共享变量

Nov 13 Javascript

在vue中使用Echarts利用watch做动态数据渲染操作

Jul 20 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的网址

2006/11/25 PHP

使用PHP Socket写的POP3类

2013/10/30 PHP

php将图片保存入mysql数据库失败的解决方法

2014/12/27 PHP

php is_executable判断给定文件名是否可执行实例

2016/09/26 PHP

Laravel手动返回错误码示例

2019/10/22 PHP

参考：关于Javascript中实现暂停的几篇文章

2007/03/04 Javascript

javascript的对话框详解与参数

2007/03/08 Javascript

jquery 最简单易用的表单验证插件

2010/02/27 Javascript

silverlight线程与基于事件驱动javascript引擎（实现轨迹回放功能）

2011/08/09 Javascript

防止文件缓存的js代码

2013/01/10 Javascript

js操纵跨frame的三级联动select下拉选项实例介绍

2013/05/19 Javascript

JS跨域问题详解

2014/11/25 Javascript

使用jQuery获得内容以及内容的属性

2015/02/26 Javascript

JS实现文字链接感应鼠标淡入淡出改变颜色的方法

2015/02/26 Javascript

复杂的javascript窗口分帧解析

2016/02/19 Javascript

BootStrap 模态框实现刷新网页并关闭功能

2017/01/04 Javascript

JavaScript中从setTimeout与setInterval到AJAX异步

2017/02/13 Javascript

原生javascript移动端滑动banner效果

2017/03/10 Javascript

node.js爬虫爬取拉勾网职位信息

2017/03/14 Javascript

requirejs按需加载angularjs文件实例

2017/06/08 Javascript

JS实现按钮添加背景音乐示例代码

2017/10/17 Javascript

对angularjs框架下controller间的传值方法详解

2018/10/08 Javascript

vue中音频wavesurfer.js的使用方法

2020/02/20 Vue.js

Python3读取文件常用方法实例分析

2015/05/22 Python

Python+django实现文件下载

2016/01/17 Python

Python3之文件读写操作的实例讲解

2018/01/23 Python

python中shell执行知识点

2020/05/06 Python

Python下使用Trackbar实现绘图板

2020/10/27 Python

李维斯牛仔裤英国官方网站：Levi’s英国

2019/10/10 全球购物

瑞士最大的图书贸易公司：Orell Füssli

2019/12/28 全球购物

美国踏板车和轻便摩托车销售网站：Mega Motor Madness

2020/02/26 全球购物

金融专业个人求职信范文

2013/11/28 职场文书

成功经营餐厅的创业计划书范文

2013/12/26 职场文书

天猫某品牌专卖店运营计划书

2014/03/21 职场文书

用Python简陋模拟n阶魔方

2021/04/17 Python

MySql数据库触发器使用教程

2022/06/01 MySQL