首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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 批量上传图片实现代码
Jan 28 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
Jan 10 Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
Aug 16 Javascript
简单实现js页面切换功能
Jan 10 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
Jan 05 Javascript
flexslider.js实现移动端轮播
Feb 05 Javascript
JS获取url参数,JS发送json格式的POST请求方法
Mar 29 Javascript
Node.js 使用AngularJS的方法示例
May 11 Javascript
Vue项目打包部署到iis服务器的配置方法
Oct 14 Javascript
d3.js实现图形拖拽
Dec 19 Javascript
JS使用正则表达式实现常用的表单验证功能分析
Apr 30 Javascript
Vue 中获取当前时间并实时刷新的实现代码
May 12 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
陨石(1) NASA(1) 美国航天局(1) 大脑(1) 火星(2) RNA(2) 嘧啶碱基(2) 富碳陨石(1) 毅力号(1) 数据(1)
You might like
ThinkPHP模板中判断volist循环的最后一条记录的验证方法
2014/07/01 PHP
异步加载技术实现当滚动条到最底部的瀑布流效果
2014/09/16 PHP
PHP使用preg_split()分割特殊字符(元字符等)的方法分析
2017/02/04 PHP
javascript运动框架用法实例分析(实现放大与缩小效果)
2016/01/08 Javascript
JavaScript手机振动API
2016/06/11 Javascript
利用BootStrap弹出二级对话框的简单实现方法
2016/09/21 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
2016/11/25 Javascript
vue-cli之router基本使用方法详解
2017/10/17 Javascript
[原创]微信小程序获取网络类型的方法示例
2019/03/01 Javascript
iview form清除校验状态的实现
2019/09/19 Javascript
Vue自定义组件的四种方式示例详解
2020/02/28 Javascript
vue实现点击按钮切换背景颜色的示例代码
2020/06/23 Javascript
vue 二维码长按保存和复制内容操作
2020/09/22 Javascript
[01:44]《为梦想出发》—联想杯DOTA2完美世界全国高校联赛
2015/09/30 DOTA
跟老齐学Python之关于循环的小伎俩
2014/10/02 Python
Python类方法__init__和__del__构造、析构过程分析
2015/03/06 Python
Python网络爬虫神器PyQuery的基本使用教程
2018/02/03 Python
Python File readlines() 使用方法
2018/03/19 Python
python中virtualenvwrapper安装与使用
2018/05/20 Python
python微信公众号之关键词自动回复
2018/06/15 Python
浅析Python 3 字符串中的 STR 和 Bytes 有什么区别
2018/10/14 Python
Python 通过调用接口获取公交信息的实例
2018/12/17 Python
对python dataframe逻辑取值的方法详解
2019/01/30 Python
Python 调用 Windows API COM 新法
2019/08/22 Python
美国在线奢侈品寄售商店：Luxury Garage Sale
2018/08/19 全球购物
Booking.com德国：预订最好的酒店和住宿
2020/02/16 全球购物
怎样声明一个匿名的内部类
2016/06/01 面试题
DIY手工制作经营店创业计划书
2014/02/01 职场文书
本科毕业生求职信
2014/06/15 职场文书
党员评议思想汇报
2014/10/08 职场文书
机关作风建设自查报告
2014/10/22 职场文书
文体活动总结
2015/02/04 职场文书
食品药品安全责任书
2015/05/11 职场文书
56句经典英文座右铭
2019/08/09 职场文书
pandas提升计算效率的一些方法汇总
2021/05/30 Python
vue css 相对路径导入问题级踩坑记录
2022/06/05 Vue.js