<!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. Xcode解决代码高亮、语法提示、错误警告等功能失效的解决方法

    在编写xcode的项目的时候出现过代码不高亮的症状,而且所有的warning都不再提示,include的内容也显示symbol not found,非常奇怪,解决方案如下: 方法一: 1.把.pch里 ...

  2. ES6 Set和Map

    一.Set遍历方法: set.key() set.values() set.entries() 二.Set例子: var s = new Set(); var arr = [1,1,2,3,6,8,8 ...

  3. 推荐csdn里的几篇activiti基础入门及提高的博客

    昨天有个网友加qq询问我有没有非maven搭建的activiti项目的demo,因为我博客中写了一个用maven,我当时没有,于是晚上回家尝试了一下,结果比较容易就实现了. 之后和那个网友聊了一下,他 ...

  4. linux命令行与shell脚本编程大全---更多bash shell命令

    进程状态:0代表正在运行:S代表在休眠:R代表可运行,正等待运行:Z代表僵化,进程已经结束但父进程已不存在:T代表停止. 查看有那些进程运行:ps  -ef 基本的linux文件系统: 1.ext文件 ...

  5. 货币单位类RmbUnit

    import java.math.BigDecimal; public enum RmbUnit { FEN{ public String toFen(String amt) { BigDecimal ...

  6. hbase运行shell时ERROR:org.apache.hadoop.hbase.PleaseHoldException: Master is initializing 的解决办法

    这个问题困扰了我一天多的时间,百度搜索的前几条的答案也是很扯淡的,说什么把/etc/hosts文件下的127.0.1.1改成127.0.0.1就行了,我也只能呵呵了.今天早上起得很晚,中午迪哥请我们去 ...

  7. QTP实现功能测试的时候，当新版本的页面都改变了，应该如何解决

    去更改对象仓库的属性和更改对象仓库.

  8. js实现右侧的分享效果

    就是当鼠标移到上面的时候,他会出现,鼠标移出就消失. nmouseover和nmouseout就能实现 <style> *{padding:0;margin:0;} #s1{width:2 ...

  9. C++ 创建和遍历二叉树

    一个简单的创建和遍历二叉树的C++程序,二叉树的其他操作程序待更新. #include <iostream> using namespace std; struct BiTNode{ ch ...

  10. 主机+虚拟机ubuntu+mini2440开发板互相ping通

    折腾这么久,终于将主机,虚拟机和开发板三者之间能够相互ping通,虽然还没有实现我要的功能,不管怎么说先将步骤简单的概括下,用交叉网线将开发板与主机相连,开发板与主机的ip要设置在同一网段内,在配置u ...