<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jquery星级评论打分组件-nolure的博客，前端开发专业博客，前端学习资源分享</title>
<meta name="description" content="jquery实现的网站星级评论打分组件" />
<meta name="keywords" content="nolure，前端开发，jquery，打分组件" />
<script src="http://lib.sinaapp.com/js/jquery/1.7/jquery.min.js"></script>
<link rel="stylesheet" href="http://www.nolure.com/p/css/base.css"/>
<script>
/*
* 通用打分组件
* callBack打分后执行的回调
* this.Index:获取当前选中值
*/
var pRate = function(box,callBack){
this.Index = null;
var B = $("#"+box),
rate = B.children("i"),
w = rate.width(),
n = rate.length,
me = this;
for(var i=0;i<n;i++){
rate.eq(i).css({
'width':w*(i+1),
'z-index':n-i
});
}
rate.hover(function(){
var S = B.children("i.select");
$(this).addClass("hover").siblings().removeClass("hover");
if($(this).index()>S.index()){
S.addClass("hover");
}
},function(){
rate.removeClass("hover");
})
rate.click(function(){
rate.removeClass("select hover");
$(this).addClass("select");
me.Index = $(this).index() + 1;
if(callBack){callBack();}
})
}
</script>
<style type="text/css">
h1{font:26px/3 'microsoft yahei','simhei';color:#000;text-indent:2em;text-shadow:1px 1px 2px #ccc}
.p_rate{height:14px;position:relative;width:80px;overflow:hidden;display:inline-block;background:url(http://www.nolure.com/wp-content/uploads/2011/12/rate.png) repeat-x;margin:40px 100px}
.p_rate i{position:absolute;top:0;left:0;cursor:pointer;height:14px;width:16px;background:url(http://www.nolure.com/wp-content/uploads/2011/12/rate.png) repeat-x 0 -500px}
.p_rate .select{background-position:0 -32px}
.p_rate .hover{background-position:0 -16px}
</style>
</head>
<body>
<h1>jquery星级评论打分组件</h1>
<span class="p_rate" id="p_rate">
<i title="1分"></i>
<i title="2分"></i>
<i title="3分"></i>
<i title="4分"></i>
<i title="5分"></i>
</span>
<script>
var Rate = new pRate("p_rate",function(){
alert(Rate.Index+'分')
});
</script>

</body>
</html>

jquery星级评论打分组件的更多相关文章

  1. js星级评分点击星级评论打分效果

    html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  2. js星级评分点击星级评论打分效果--收藏--转载

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. jQuery星级评论表单美化代码

    最近正在做php第二阶段的项目,由于我们小组做的是游戏评论网站,所以需要用到评分评论的页面,这里我做了个星级评论表单 1.首先,我们需要引入一个jQuery文件,代码如下: /*! * jQuery ...

  4. Android View 之进度条+拖动条+星级评论条....

    PS:将来的你会感谢现在奋斗的自己.... 学习内容: 1.进度条 2.拖动条 3.星级评论条 1.进度条...       进图条这东西想必大家是很熟悉的...为了使用户不会觉得应用程序死掉了,因此 ...

  5. 分享一个discuz touch端的jQuery下拉刷新组件

    在线Demo 最近装了个discuz论坛, 趣股VIP吧,发现里面内置的jQuery上拉刷新组件写得还行,STATICURL可以用'http://o9gzet7tk.bkt.clouddn.com/i ...

  6. SharePoint 2010 文档管理系列之星级评论功能

    前言:正如我们前面介绍的是,文档管理就是让大家更加直观.方便的对手里的文档,进行统筹掌控,哪些文档是有价值的,哪些文档更受大家欢迎,所有就带来了这个星级评论. 当然,这个是SharePoint 201 ...

  7. 星级评论jq

    html结构 <div class="list_item"> <span>商品包装满意度:</span> <b class="s ...

  8. 基于jQuery封装的分页组件

    前言: 由于项目需要实现分页效果,上jQuery插件库找了下,但是木有找到自己想要的效果,于是自己封装了个分页组件. 思路: 主要是初始化时基于原型建立的分页模板然后绑定动态事件并实现刷新DOM的分页 ...

  9. Jquery图片上传组件，支持多文件上传

    Jquery图片上传组件,支持多文件上传http://www.jq22.com/jquery-info230jQuery File Upload 是一个Jquery图片上传组件,支持多文件上传.取消. ...

随机推荐

  1. nova boot instance call flow

    参考http://www.cnblogs.com/popsuper1982/p/3927390.html

  2. EditText 自动格式化电话电话号码

    需要格式化的格式为:xxx xxxx xxxx 有两种方式:1.为监听当前输入的长度,当长度为第四位,九位的时候,在原内容上追加空格.(from stackOverFlow)2.每次输入后,格式化当前 ...

  3. go 的 protoc 插件调用逻辑

    要让protoc使用插件,需要做下面事情: Place the plugin binary somewhere in the PATH and give it the name "proto ...

  4. 顽皮的小球II

    感谢世外苏子恒同学提供   uses crt; var   x,y,xd,yd,xb,yb:shortint;   k:char; procedure intro; begin   clrscr;   ...

  5. [VB.NET]取消按钮按下的默认事件响应

    大家应该有过这样的经历:有两个文本框a,b.通过编程,当我们在A中回车后,光标会移动到B文本框. 但是,不可避免的会听到一声“铛”的声音. 解决办法: 在Keydown或者KeyUp事件中,设置e.S ...

  6. oracle 常见恢复

    author by :shawnloong 环境:windows 2008 r2 sp1 db:oracle 11g r2 做之前记得做个完整备份 ONFIGURE RETENTION POLICY ...

  7. invalid END header (bad central directory offset) 异常解决方法

    今天版本升级时,一个ear包在传到aix下,weblogic后启动出现 invalid END header (bad central directory offset) 后来才发下是文件传输中出现了 ...

  8. out参数，ref参数，params参数数组

    params参数数组 params关键字可以为方法指定数目可变的参数.params关键字修饰的参数,可以传入任意数目的同类型参数,甚至可以不传入参数. 不过params修饰的参数必须是方法的最后一个参 ...

  9. C++中的RTTI机制解析

    RTTI RTTI概念 RTTI(Run Time Type Identification)即通过运行时类型识别,程序能够使用基类的指针或引用来检查着这些指针或引用所指的对象的实际派生类型. RTTI ...

  10. VMware 中windows server 之DHCP 搭建与测试

    感悟: 由于打算将windows server 的服务器搭建维护从头重新学习总结一下,遇到搭建dhcp服务的时候,在虚拟机中一直测试不成功,耽误我好几星期了,一点也不夸张,心情和积极性也大大受到打击. ...