编程 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实现的服务器验证控件的启用和禁用代码

Apr 27 Javascript

javascript 内存回收机制理解

Jan 17 Javascript

关于jQuery UI 使用心得及技巧

Oct 10 Javascript

jQuery validate+artdialog+jquery form实现弹出表单思路详解

Apr 18 Javascript

BootStrap智能表单实战系列(四)表单布局介绍

Jun 13 Javascript

网页挂马方式整理及详细介绍

Nov 03 Javascript

微信小程序五星评价功能的实现

Mar 09 Javascript

jQuery中$原理实例分析

Aug 13 jQuery

原生JS实现简单的倒计时功能示例

Aug 30 Javascript

vue axios 简单封装以及思考

Oct 09 Javascript

vue组件定义，全局、局部组件，配合模板及动态组件功能示例

Mar 19 Javascript

原生JS实现微信通讯录

Jun 18 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

如何修改和添加Apache的默认站点目录

2013/07/05 PHP

php获取数组长度的方法（有实例）

2013/10/27 PHP

PHP学习笔记（一）：基本语法之标记、空白、和注释

2015/04/17 PHP

php中define用法实例

2015/07/30 PHP

php支付宝APP支付功能

2020/07/29 PHP

JavaScript delete 属性的使用

2009/10/08 Javascript

分页栏的web标准实现

2011/11/01 Javascript

解析js中获得父窗口链接getParent方法以及各种打开窗口的方法

2013/06/19 Javascript

基于javascript实现判断移动终端浏览器版本信息

2014/12/09 Javascript

javascript结合Canvas 实现简易的圆形时钟

2015/03/11 Javascript

在jQuery中使用$而避免跟其它库产生冲突的方法

2015/08/13 Javascript

jQuery zclip插件实现跨浏览器复制功能

2015/11/02 Javascript

详解jQuery中的DOM操作

2016/12/23 Javascript

angularJS深拷贝详解

2017/03/23 Javascript

vue组件通信传值操作示例

2019/01/08 Javascript

js new Date()实例测试

2019/10/31 Javascript

原生js实现简单轮播图

2020/10/26 Javascript

Python的Django中django-userena组件的简单使用教程

2015/05/30 Python

举例讲解Python中的list列表数据结构用法

2016/03/12 Python

Python提取网页中超链接的方法

2016/09/18 Python

使用tensorflow实现AlexNet

2017/11/20 Python

Python爬虫工程师面试问题总结

2018/03/22 Python

解决Python2.7读写文件中的中文乱码问题

2018/04/12 Python

Python、 Pycharm、Django安装详细教程(图文)

2019/04/12 Python

Keras之fit_generator与train_on_batch用法

2020/06/17 Python

Myprotein葡萄牙官方网站：英国优质运动营养品牌

2016/09/12 全球购物

Can a struct inherit from another struct? (结构体能继承结构体吗)

2016/09/25 面试题

教师师德教育的自我评价

2013/10/31 职场文书

社会调查研究计划书

2014/05/01 职场文书

奥林匹克运动会口号

2014/06/19 职场文书

县委常委班子专题民主生活会查摆问题及整改措施

2014/09/27 职场文书

工作作风建设心得体会

2014/10/22 职场文书

中国合伙人观后感

2015/06/02 职场文书

学校学期工作总结

2015/08/13 职场文书

2019个人工作态度自我评价

2019/04/24 职场文书

超外差式晶体管收音机的组装与统调

2021/04/22 无线电