编程 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之函数直接量(function(){})()

Jun 29 Javascript

javascript 解析后的xml对象的读取方法细解

Jul 25 Javascript

js利用事件的阻止冒泡实现点击空白模态框的隐藏

Jan 24 Javascript

JS定义网页表单提交（submit）的方法

Mar 20 Javascript

纯js代码实现简单计算器

Dec 02 Javascript

JavaScript+canvas实现七色板效果实例

Feb 18 Javascript

VueJs监听window.resize方法示例

Jan 17 Javascript

JS正则表达式常见用法实例详解

Jun 19 Javascript

vue实现类似淘宝商品评价页面星级评价及上传多张图片功能

Oct 29 Javascript

基于vue+element实现全局loading过程详解

Jul 10 Javascript

vue中父子组件的参数传递和应用示例

Jan 04 Vue.js

深入详解JS函数的柯里化

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

CI框架学习笔记（一） - 环境安装、基本术语和框架流程

2014/10/26 PHP

PHP抽象类和接口用法实例详解

2019/07/20 PHP

Centos7安装swoole扩展操作示例

2020/03/26 PHP

一些javascript一些题目的解析

2010/12/25 Javascript

JQuery.closest(),parent(),parents()寻找父结点

2012/02/17 Javascript

基于jquery实现一张图片点击鼠标放大再点缩小

2013/09/29 Javascript

JavaScript子类用Object.getPrototypeOf去调用父类方法解析

2013/12/05 Javascript

jquery实现点击页面计算点击次数

2015/01/23 Javascript

angularJS结合canvas画图例子

2015/02/09 Javascript

js进行表单验证实例分析

2015/02/10 Javascript

基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)

2015/11/24 Javascript

浅谈JS之iframe中的窗口

2016/09/13 Javascript

BootStrap实现手机端轮播图左右滑动事件

2016/10/13 Javascript

关于RequireJS的简单介绍即使用方法

2016/10/20 Javascript

实例详解ztree在vue项目中使用并且带有搜索功能

2018/08/24 Javascript

默认浏览器设置及vue自动打开页面的方法

2018/09/21 Javascript

vue实现的仿淘宝购物车功能详解

2019/01/27 Javascript

[57:55]EG vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.19

2018/08/21 DOTA

python检测是文件还是目录的方法

2015/07/03 Python

Python中执行存储过程及获取存储过程返回值的方法

2017/10/07 Python

spark dataframe 将一列展开,把该列所有值都变成新列的方法

2019/01/29 Python

python实现输入三角形边长自动作图求面积案例

2020/04/12 Python

python使用列表的最佳方案

2020/08/12 Python

2021年值得向Python开发者推荐的VS Code扩展插件

2021/01/25 Python

CSS3教程(9):设置RGB颜色

2009/04/02 HTML / CSS

canvas与html5实现视频截图功能示例

2016/12/15 HTML / CSS

Solid & Striped官网：美国泳装品牌

2019/06/19 全球购物

BAILEY 44官网：美国制造的女性服装

2019/07/01 全球购物

澳大利亚网上买书：Angus & Robertson

2019/07/21 全球购物

What is the purpose of Void class? Void类的作用是什么？

2016/10/31 面试题

金融管理应届生求职信

2014/02/20 职场文书

如何写一份好的英文求职信

2014/03/19 职场文书

微信小程序实现录音Record功能

2021/05/09 Javascript

解决Swagger2返回map复杂结构不能解析的问题

2021/07/02 Java/Android

详解Vue router路由

2021/11/20 Vue.js

Elasticsearch 配置详解

2022/04/19 Java/Android