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超赞的评分插件代码,希望大家可以喜欢。

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