编程 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 相关文章推荐

在javascript将NodeList作为Array数组处理的方法

Jul 09 Javascript

js 判断脚本加载完毕的代码

Jul 13 Javascript

使用js正则控制input标签只允许输入的值

Jul 29 Javascript

jquery获取颜色在ie和ff下的区别示例介绍

Mar 28 Javascript

浅谈javascript的Array.prototype.slice.call

Aug 31 Javascript

使用jQuery实现WordPress中的Ctrl+Enter和@评论回复

May 21 Javascript

jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析

Jun 08 Javascript

浅谈jQuery绑定事件会叠加的解决方法和心得总结

Oct 26 Javascript

Vue集成Iframe页面的方法示例

Dec 12 Javascript

vue中导出Excel表格的实现代码

Oct 18 Javascript

在vue中封装的弹窗组件使用队列模式实现方法

Jul 23 Javascript

vue中axios封装使用的完整教程

Mar 03 Vue.js

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

PHP导出EXCEL快速开发指南--PHPEXCEL的使用详解

2013/06/03 PHP

jQuery Ajax 全解析

2009/02/08 Javascript

javascript中的array数组使用技巧

2010/01/31 Javascript

JQuery 插件制作实践 xMarquee插件V1.0

2010/04/02 Javascript

Web Inspector：关于在 Sublime Text 中调试Js的介绍

2013/04/18 Javascript

多引号嵌套的变量命名的问题

2014/05/09 Javascript

javascript数据结构与算法之检索算法

2015/04/04 Javascript

JavaScript获取数组最小值和最大值的方法

2015/06/09 Javascript

jQuery基于ajax操作json数据简单示例

2017/01/05 Javascript

jquery ajaxfileupload异步上传插件使用详解

2017/02/08 Javascript

详解使用fetch发送post请求时的参数处理

2017/04/05 Javascript

详解ES6语法之可迭代协议和迭代器协议

2018/01/13 Javascript

详解基于vue-cli3.0如何构建功能完善的前端架子

2018/10/09 Javascript

extract-text-webpack-plugin用法详解

2019/02/14 Javascript

JS前端知识点offset，scroll，client，冒泡，事件对象的应用整理总结

2019/06/27 Javascript

如何在JavaScript中正确处理变量

2020/12/25 Javascript

python搭建简易服务器分析与实现

2012/12/15 Python

Python Web服务器Tornado使用小结

2014/05/06 Python

快速了解python leveldb

2018/01/18 Python

Python常见字典内建函数用法示例

2018/05/14 Python

Python运维自动化之nginx配置文件对比操作示例

2018/08/29 Python

Pycharm打开已有项目配置python环境的方法

2020/07/03 Python

python 常用日期处理-- datetime 模块的使用

2020/09/02 Python

英国经典球衣网站：Classic Football Shirts

2017/05/20 全球购物

Coach澳大利亚官方网站：美国著名时尚奢侈品牌

2017/05/24 全球购物

贝嫂喜欢的婴儿品牌，个性化的婴儿礼物：My 1st Years

2017/11/19 全球购物

泰国Robinson百货官网：购买知名品牌的商品

2020/02/08 全球购物

广州一家公司的.NET面试题

2016/06/11 面试题

周鸿祎：教你写创业计划书

2013/12/30 职场文书

大学军训感言300字

2014/03/09 职场文书

护士上岗前培训自我鉴定

2014/04/20 职场文书

禁止酒驾标语

2014/06/25 职场文书

个人维稳承诺书

2015/05/04 职场文书

初中体育教学随笔

2015/08/15 职场文书

无故旷工检讨书

2015/08/15 职场文书

用基于python的appium爬取b站直播消费记录

2021/04/17 Python