编程 Javascript

jquery五角星评分插件示例分享

Posted in Javascript onFebruary 21, 2014

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery五角星评分插件</title>
<script type="text/javascript" src="js/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/star_rating.js"></script>
<style type="text/css">
#rating_cont { background: #1E1D1C url(images/rating_background.jpg) top left no-repeat; border: 1px solid #F9BA0D; width: 140px; height: 23px; text-align: left; margin-left: 6px;}
 #rating_on { background: url(images/rating_onbackground.jpg) top left no-repeat; width: 0px; height: 21px; position: relative; z-index: 50; top: -21px; }
#rated { display: none; width: 138px; padding: 3px 0px 3px 2px; height: 23px; background-color: #1E1D1C; height: 17px;font-size: 11px;color: #FFC910;}
 #rated div { display: block; float: left; }
 #rating { font-size: 11px; font-family: Arial, Helvetica, sans-serif; color: #FFC910; padding-left: 3px; width: 22px; }
 #small_stars { height: 11px; width: 69px; background-image: url(images/stars_small_sprite.jpg); background-position: 0px -11px; font-size:1px; line-height: 11px; margin-top:3px; }
 #rate_edit { line-height: 17px; font-size: 11px; font-family: Arial, Helvetica, sans-serif; color: #FFF; padding-left: 9px; cursor: pointer; }
 #rate_edit:hover { text-decoration: underline; }
 #rating_btns { position: relative; z-index: 100; width: 140px; height: 21px;}
 #rating_btns ul, #rating_btns li  { padding: 0; margin: 0; }
 #rating_btns li { float: left; width: 14px; height: 21px; display: block; font-size: 1px; cursor: pointer; color: #1E1D1C;
  }
</style>
</head>
<body>
<div id="demo">
 <div id="rating_cont">  
  <div id="rating_btns">
   <ul>
    <li>0.5</li>
    <li>1.0</li>
    <li>1.5</li>
    <li>2.0</li>
    <li>2.5</li>
    <li>3.0</li>
    <li>3.5</li>
    <li>4.0</li>
    <li>4.5</li>
    <li>5.0</li>
   </ul>
  </div> 
  <div id="rating_on" > </div>
  <div id="rated">
   <div id="rating" style="height: 17px; line-height: 17px;">not rated</div>
   <div> -  </div>
   <div id="small_stars"> </div>
   <div id="rate_edit">edit</div>
  </div>  
 </div>
 <input type="hidden" id="rating_output" name="rating_output" value="not rated" />
</div>
</body>
</html>

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery五角星评分插件 </title>
<script type="text/javascript" src="js/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/star_rating.js"></script>
<style type="text/css">
#rating_cont { background: #1E1D1C url(images/rating_background.jpg) top left no-repeat; border: 1px solid #F9BA0D; width: 140px; height: 23px; text-align: left; margin-left: 6px;}
 #rating_on { background: url(images/rating_onbackground.jpg) top left no-repeat; width: 0px; height: 21px; position: relative; z-index: 50; top: -21px; }
#rated { display: none; width: 138px; padding: 3px 0px 3px 2px; height: 23px; background-color: #1E1D1C; height: 17px;font-size: 11px;color: #FFC910;}
 #rated div { display: block; float: left; }
 #rating { font-size: 11px; font-family: Arial, Helvetica, sans-serif; color: #FFC910; padding-left: 3px; width: 22px; }
 #small_stars { height: 11px; width: 69px; background-image: url(images/stars_small_sprite.jpg); background-position: 0px -11px; font-size:1px; line-height: 11px; margin-top:3px; }
 #rate_edit { line-height: 17px; font-size: 11px; font-family: Arial, Helvetica, sans-serif; color: #FFF; padding-left: 9px; cursor: pointer; }
 #rate_edit:hover { text-decoration: underline; }
 #rating_btns { position: relative; z-index: 100; width: 140px; height: 21px;}
 #rating_btns ul, #rating_btns li  { padding: 0; margin: 0; }
 #rating_btns li { float: left; width: 14px; height: 21px; display: block; font-size: 1px; cursor: pointer; color: #1E1D1C;
  }
</style>
</head>
<body>
<div id="demo">
 <div id="rating_cont">  
  <div id="rating_btns">
   <ul>
    <li>0.5</li>
    <li>1.0</li>
    <li>1.5</li>
    <li>2.0</li>
    <li>2.5</li>
    <li>3.0</li>
    <li>3.5</li>
    <li>4.0</li>
    <li>4.5</li>
    <li>5.0</li>
   </ul>
  </div> 
  <div id="rating_on" > </div>
  <div id="rated">
   <div id="rating" style="height: 17px; line-height: 17px;">not rated</div>
   <div> -  </div>
   <div id="small_stars"> </div>
   <div id="rate_edit">edit</div>
  </div>  
 </div>
 <input type="hidden" id="rating_output" name="rating_output" value="not rated" />
</div><br />
<br />
</body>
</html>

jquery五角星评分插件示例分享

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

让回调函数 showResponse 也带上参数的代码

Aug 13 Javascript

控制文字内容的显示与隐藏示例

Jun 11 Javascript

整理Javascript函数学习笔记

Dec 01 Javascript

BootStrap Validator使用注意事项(必看篇)

Sep 28 Javascript

利用angular.copy取消变量的双向绑定与解析

Nov 25 Javascript

深入理解AngularJs－scope的脏检查（一）

Jun 19 Javascript

微信小程序选择图片和放大预览图片功能

Nov 02 Javascript

详解js中let与var声明变量的区别

Apr 05 Javascript

JS实现灯泡开关特效

Mar 30 Javascript

vue滚动插件better-scroll使用详解

Oct 18 Javascript

基于node+websocket+html实现腾讯课堂聊天室聊天功能

Mar 04 Javascript

vue实现简单计算商品价格

Sep 14 Javascript

jQuery对下拉框,单选框,多选框的操作

Feb 21 #Javascript

jquery自定义滚动条插件示例分享

Feb 21 #Javascript

jquery制作搜狐快站页面效果示例分享

Feb 21 #Javascript

利用Jquery实现可多选的下拉框

Feb 21 #Javascript

jquery 无限级下拉菜单的简单实现代码

Feb 21 #Javascript

jQuery 无限级菜单的简单实例

Feb 21 #Javascript

js控制table合并具体实现

Feb 20 #Javascript

You might like

利用discuz自带通行证整合dedecms的方法以及文件下载

2007/03/06 PHP

PHP基于单例模式实现的mysql类

2016/01/09 PHP

PHP简单读取PDF页数的实现方法

2016/07/21 PHP

验证坐标在某坐标区域内php代码

2016/10/08 PHP

js计算页面刷新的次数

2009/07/20 Javascript

html向js方法传递参数具体实现

2013/08/08 Javascript

IE浏览器IFrame对象内存不释放问题解决方法

2014/08/22 Javascript

node.js中的buffer.toJSON方法使用说明

2014/12/14 Javascript

js计算德州扑克牌面值的方法

2015/03/04 Javascript

jquery常用函数与方法汇总

2015/09/01 Javascript

jquery淡入淡出效果简单实例

2016/01/14 Javascript

Bootstrap carousel轮转图的使用实例详解

2016/05/17 Javascript

关于js函数解释(包括内嵌,对象等)

2016/11/20 Javascript

浅谈vue的iview列表table render函数设置DOM属性值的方法

2017/09/30 Javascript

JavaScript判断变量名是否存在数组中的实例

2017/12/28 Javascript

微信小程序中遇到的iOS兼容性问题小结

2018/11/14 Javascript

Vue.js结合bootstrap前端实现分页和排序效果

2018/12/29 Javascript

微信小程序实现获取小程序码和二维码java接口开发

2019/03/29 Javascript

JS实现根据详细地址获取经纬度功能示例

2019/04/16 Javascript

python爬虫正则表达式使用技巧及爬取个人博客的实例讲解

2017/10/20 Python

Python实现快速计算词频功能示例

2018/06/25 Python

Django框架使用内置方法实现登录功能详解

2019/06/12 Python

python实现倒计时小工具

2019/07/29 Python

django数据模型（Model）的字段类型解析

2019/12/25 Python

pytorch模型存储的2种实现方法

2020/02/14 Python

python通过文本在一个图中画多条线的实例

2020/02/21 Python

利用scikitlearn画ROC曲线实例

2020/07/02 Python

纯HTML5+CSS3制作图片旋转

2016/01/12 HTML / CSS

2014年公司植树节活动方案

2014/03/04 职场文书

早会主持词

2014/03/17 职场文书

乡镇食品安全责任书

2014/07/28 职场文书

大一新生期末自我评价

2014/09/12 职场文书

用Python提取PDF表格的方法

2021/04/11 Python

详解Java实现数据结构之并查集

2021/06/23 Java/Android

使用 Apache 反向代理的设置技巧

2022/01/18 Servers

唤醒紫霞仙子，携手再游三界！大话手游X《大话西游》电影合作专属剧情任务

2022/04/03 其他游戏