首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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 相关文章推荐
ajax更新数据后，jquery、jq失效问题
Mar 16 Javascript
angular中使用路由和$location切换视图
Jan 23 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
Feb 04 Javascript
AngularJS 模块化详解及实例代码
Sep 14 Javascript
ES6新特性之Object的变化分析
Mar 31 Javascript
Node.js安装配置图文教程
May 10 Javascript
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
JavaScript常用数学函数用法示例
May 14 Javascript
vue指令做滚动加载和监听等
May 26 Javascript
原生JavaScript实现滑动拖动验证的示例代码
Dec 06 Javascript
微信小程序实现音频文件播放进度的实例代码
Mar 02 Javascript
JavaScript canvas实现流星特效
May 20 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
粒子对撞机(1) FTP服务器(1) DNS服务器(2) GZIP(2) DBLink(1) 磁盘分区(1) IIS7(1) 界面设计(1) .NET Framework(2) 事务并发(1)
You might like
php计算当前程序执行时间示例
2014/04/24 PHP
微信公众号模板消息群发php代码示例
2016/12/29 PHP
PHP 爬取网页的主要方法
2018/07/13 PHP
Thinkphp5框架异常处理操作实例分析
2020/06/03 PHP
Javascript中arguments用法实例分析
2015/06/13 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
2015/09/17 Javascript
浅谈js原生拖放
2016/11/21 Javascript
Angular ui.bootstrap.pagination分页
2017/01/20 Javascript
vue ssr 指南详读
2018/06/29 Javascript
js计算最大公约数和最小公倍数代码实例
2019/09/11 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
2019/10/29 Javascript
基于js实现数组相邻元素上移下移
2020/05/19 Javascript
原生js滑动轮播封装
2020/07/31 Javascript
Js利用正则表达式去除字符串的中括号
2020/11/23 Javascript
Vue开发中常见的套路和技巧总结
2020/11/24 Vue.js
[54:41]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VGJ.T VS paiN
2018/03/31 DOTA
python实现DNS正向查询、反向查询的例子
2014/04/25 Python
Python实现监控程序执行时间并将其写入日志的方法
2015/06/30 Python
Python实现将SQLite中的数据直接输出为CVS的方法示例
2017/07/13 Python
python+selenium识别验证码并登录的示例代码
2017/12/21 Python
Selenium定位元素操作示例
2018/08/10 Python
python递归法实现简易连连看小游戏
2020/03/25 Python
python创建属于自己的单词词库 便于背单词
2019/07/30 Python
利用pandas向一个csv文件追加写入数据的实现示例
2020/04/23 Python
英国领先的男士服装和时尚零售商：Burton
2017/01/09 全球购物
美国首屈一指的礼品篮供应商：GiftTree
2018/01/06 全球购物
商务助理岗位职责
2013/11/13 职场文书
机关财务管理制度
2014/01/17 职场文书
仓库文员岗位职责
2014/04/06 职场文书
大学新闻系自荐书
2014/05/31 职场文书
幼儿园六一活动总结
2014/08/27 职场文书
2015年音乐教师个人工作总结
2015/05/20 职场文书
学校运动会通讯稿
2015/07/18 职场文书
八年级英语教学反思
2016/02/15 职场文书
检讨书格式
2019/04/25 职场文书
高考要来啦!用Python爬取历年高考数据并分析
2021/06/03 Python