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>
Javascript 相关文章推荐
Jquery操作Select 简单方便 一个js插件搞定
Nov 12 Javascript
js展开闭合效果演示代码
Jul 24 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
Jun 20 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
Mar 09 Javascript
angular 用拦截器统一处理http请求和响应的方法
Jun 08 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
Dec 26 Javascript
webpack组织模块打包Library的原理及实现
Mar 10 Javascript
微信小程序自定义prompt组件步骤详解
Jun 12 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
Jan 08 Javascript
微信小程序(订阅消息)功能
Oct 25 Javascript
jquery ajax 请求小技巧实例分析
Nov 11 jQuery
基于JavaScript实现十五拼图代码实例
Apr 26 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
ftp类(myftp.php)
2006/10/09 PHP
ThinkPHP快速入门实例教程之数据分页
2014/07/01 PHP
[原创]ThinkPHP让../Public在模板不解析(直接输出)的方法
2015/10/09 PHP
Joomla使用Apache重写模式的方法
2016/05/04 PHP
PHP检查端口是否可以被绑定的方法示例
2018/08/09 PHP
最新优化收藏到网摘代码(digg,diigo)
2007/02/07 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
2014/05/02 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
2015/03/04 Javascript
javascript日期处理函数,性能优化批处理
2015/09/06 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
2015/10/26 Javascript
再谈javascript常见错误及解决方法
2016/09/16 Javascript
jquery文字填写自动高度的实现方法
2016/11/07 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
2017/01/21 Javascript
JS完成画圆圈的小球
2017/03/07 Javascript
基于JavaScript实现百度搜索框效果
2020/06/28 Javascript
vue中添加mp3音频文件的方法
2018/03/02 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
2018/06/25 Javascript
详解React native fetch遇到的坑
2018/08/30 Javascript
实例介绍JavaScript中多种组合继承
2019/01/20 Javascript
快速解决element的autofocus失效问题
2020/09/08 Javascript
如何在JS文件中获取Vue组件
2020/09/16 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
2020/11/04 Javascript
微信小程序轮播图swiper代码详解
2020/12/01 Javascript
python 切片和range()用法说明
2013/03/24 Python
Django自定义分页与bootstrap分页结合
2021/02/22 Python
Python编程使用*解包和itertools.product()求笛卡尔积的方法
2017/12/18 Python
Python打印“菱形”星号代码方法
2018/02/05 Python
django输出html内容的实例
2018/05/27 Python
python3 pillow模块实现简单验证码
2019/10/31 Python
PyTorch学习:动态图和静态图的例子
2020/01/06 Python
python数据预处理 :数据抽样解析
2020/02/24 Python
Python面向对象程序设计之类和对象、实例变量、类变量用法分析
2020/03/23 Python
Python pip 常用命令汇总
2020/10/19 Python
全球领先的各类汽车配件零售商:Advance Auto Parts
2016/08/26 全球购物
文明旅游倡议书
2015/04/28 职场文书
Python经常使用的一些内置函数
2022/04/11 Python