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 相关文章推荐
JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
Jan 22 Javascript
JavaScript事件委托实例分析
May 26 Javascript
jQuery EasyUi实战教程之布局篇
Jan 26 Javascript
React中jquery引用的实现方法
Sep 12 jQuery
Vue实现表格中对数据进行转换、处理的方法
Sep 06 Javascript
js实现图片放大并跟随鼠标移动特效
Jan 18 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
Apr 09 Javascript
js神秘的电报密码 哈弗曼编码实现
Sep 10 Javascript
JS字符串和数组如何实现相互转化
Jul 02 Javascript
Vue 401配合Vuex防止多次弹框的案例
Nov 11 Javascript
Javascript节流函数throttle和防抖函数debounce
Dec 03 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中的观察者模式
2010/03/24 PHP
PHP中Http协议post请求参数
2015/11/02 PHP
Symfony生成二维码的方法
2016/02/04 PHP
PHP实现百度人脸识别
2019/05/06 PHP
Thinkphp5框架异常处理操作实例分析
2020/06/03 PHP
JavaScript的Cookies
2008/01/16 Javascript
测试JavaScript字符串处理性能的代码
2009/12/07 Javascript
JS鼠标事件大全 推荐收藏
2011/11/01 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
2013/11/13 Javascript
javascript跨浏览器的属性判断方法
2014/03/16 Javascript
javascript使用正则获取url上的某个参数
2014/09/04 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
2016/06/06 Javascript
jQuery实现简洁的轮播图效果实例
2016/09/07 Javascript
jQuery给表格添加分页效果
2017/03/02 Javascript
vue高德地图之玩转周边
2017/06/16 Javascript
Vue.js实例方法之生命周期详解
2017/07/03 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
2018/04/22 Javascript
react实现换肤功能的示例代码
2018/08/14 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
2019/02/27 Javascript
python修改操作系统时间的方法
2015/05/18 Python
对pyqt5中QTabWidget的相关操作详解
2019/06/21 Python
python 整数越界问题详解
2019/06/27 Python
Python解析命令行读取参数之argparse模块
2019/07/26 Python
Python在Matplotlib图中显示中文字体的操作方法
2019/07/29 Python
解决Django提交表单报错:CSRF token missing or incorrect的问题
2020/03/13 Python
keras训练曲线,混淆矩阵,CNN层输出可视化实例
2020/06/15 Python
解决Keras使用GPU资源耗尽的问题
2020/06/22 Python
销售找工作求职信
2013/12/20 职场文书
广告学专业自荐信范文
2014/02/24 职场文书
气象学专业个人求职信
2014/03/15 职场文书
小学校长汇报材料
2014/08/20 职场文书
2015年大学辅导员工作总结
2015/05/12 职场文书
赡养老人协议书范本
2015/08/06 职场文书
导游词之金鞭溪风景区
2019/09/12 职场文书
详解Oracle块修改跟踪功能
2021/11/07 Oracle
http通过StreamingHttpResponse完成连续的数据传输长链接方式
2022/02/12 Python