打印

添加了行为的CSS星级选择器

yoom [楼主]

木匠的背篓

版主

认证
帖子: 2484
体力: 3620
威望: 3
当前: 四川达州

专长 前端制作,JS

1^# 大中小发表于 2008-9-16 22:31

半原创，表现层代码源自 一叶千鸟 http://demo.rexsong.com，我添加了点行为。
如果觉得运行框中的代码看似有点繁多，那么请下载附件，附件中表现和行为都被分离了。

没有负分功能，也没有做过多测试，先弄到经典上来再说。
有个地方要注意，不管有多少个星级块，都必须被一个id为star_level的容器所包含，才能初始化事件。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>半原创--星级选择器</title>
<style type="text/css">

</style>
</head>
<body>
<h1>添加了行为的星级选择器</h1>
<p>表现层代码源自 <a href="http://demo.rexsong.com" target="_blank">一叶千鸟 http://demo.rexsong.com</a>，我仅写的行为。</p>
<form action="" method="get">
	<div id="star_level" star_width="14">
		<p>服务</p>
		<ul class="star_rating">
			<li style="display:none;">
				<input type="text" name="serve" value="" />
			</li>
			<li class="current_rating">default level</li>
			<li><a href="#" title="1 of 5 stars" class="one_star">1</a></li>
			<li><a href="#" title="2 of 5 stars" class="two_stars">2</a></li>
			<li><a href="#" title="3 of 5 stars" class="three_stars">3</a></li>
			<li><a href="#" title="4 of 5 stars" class="four_stars">4</a></li>
			<li><a href="#" title="5 of 5 stars" class="five_stars">5</a></li>
		</ul>
		<p>价格</p>
		<ul class="star_rating">
			<li style="display:none;">
				<input type="text" name="price" value="4" title="这里设置为2的话，表示默认2颗星亮。" />
			</li>
			<li class="current_rating">default level</li>
			<li><a href="#" title="1 of 5 stars" class="one_star">1</a></li>
			<li><a href="#" title="2 of 5 stars" class="two_stars">2</a></li>
			<li><a href="#" title="3 of 5 stars" class="three_stars">3</a></li>
			<li><a href="#" title="4 of 5 stars" class="four_stars">4</a></li>
			<li><a href="#" title="5 of 5 stars" class="five_stars">5</a></li>
		</ul>
		<p>质量</p>
		<ul class="star_rating">
			<li style="display:none;">
				<input type="text" name="mass" value="" />
			</li>
			<li class="current_rating">default level</li>
			<li><a href="#" title="1 of 5 stars" class="one_star">1</a></li>
			<li><a href="#" title="2 of 5 stars" class="two_stars">2</a></li>
			<li><a href="#" title="3 of 5 stars" class="three_stars">3</a></li>
			<li><a href="#" title="4 of 5 stars" class="four_stars">4</a></li>
			<li><a href="#" title="5 of 5 stars" class="five_stars">5</a></li>
		</ul>
	</div>
	<input type="submit" value="选好星星后，点我，然后看地址栏。" />
</form>
</body>
</html>
<script type="text/javascript">

</script>

提示：您可以先修改部分代码再运行

[ 本帖最后由 yoom 于 2008-9-16 22:32 编辑 ]

附件: 您所在的用户组无法下载或查看附件，您需要注册/登录后才能查看！

年后到上海

TOP

西部数码分布式集群主机傲视群雄 | Adobe设计师狂欢节在线讲座免注册进入

saltprune

初级会员

帖子: 81
体力: 180
威望: 0
离线: 3 天

专长 MSSQL,网管,安全

2^# 大中小发表于 2008-9-17 08:30

很有意思，类似于好多CMS的心情插件

TOP

PSD网页模板下载,高端实用 | 俄罗斯大蜘蛛反病毒软件

tangl198710

啸天皇帝

银牌会员

帖子: 559
体力: 1234
威望: 0
当前: 广东深圳
离线: 9 天

专长 JS,PHP,MySQL

3^# 大中小发表于 2008-9-17 09:06

留个记号。。

TOP

国际动画人才海外高薪就业

heluyao

的士司机

银牌会员

帖子: 1224
体力: 2091
威望: 0
当前: 广东深圳

专长 网页设计,前端制作,JS

4^# 大中小发表于 2008-9-24 17:48

不错了。有些博客有这样的效果，一般用在评论的表情上

Heluyao's Blog

TOP

明天教室职业插画师培训计划

jordan36

新手上路

帖子: 71
体力: 45
威望: 0
当前: 北京海淀区

5^# 大中小发表于 2008-9-24 18:05

强大，收了，回家YJ

TOP

xyflash

银牌会员

帖子: 1103
体力: 2342
威望: 0
离线: 52 天

6^# 大中小发表于 2008-9-25 07:37

好东西

TOP

yyb1813

银牌会员

帖子: 311
体力: 1010
威望: 0
离线: 60 天

7^# 大中小发表于 2008-9-25 08:21

不错，支持了，行为做的好

test

TOP

fugees

新手上路

帖子: 1
体力: 2
威望: 0
离线: 297 天

8^# 大中小发表于 2008-9-29 01:20

留個記號啊

TOP

Lion5859

荣泰

高级会员

认证
帖子: 368
体力: 811
威望: 0
当前: 广东广州
离线: 7 天

专长 网页设计,前端制作,JS

9^# 大中小发表于 2008-9-29 09:11

不错不错，试用下

TOP

zihao

初级会员

帖子: 78
体力: 176
威望: 0
当前: 安徽合肥
离线: 6 天

10^# 大中小发表于 2008-9-29 11:55

不错
顶啦

ezz.cc

TOP

naruco

异客迷徒

初级会员

帖子: 58
体力: 102
威望: 0
当前: 江苏常州
离线: 33 天

专长 网页设计,PHP,网管

11^# 大中小发表于 2008-9-30 00:38

大多数新闻类,博客类,digg类网站都有这样的功能的
只是个人一直疑惑,这样的一个web2.0的行为动作对用户的触动是否有明显的地方呢?

TOP

bbsonline

初级会员

帖子: 86
体力: 163
威望: 0
离线: 41 天

12^# 大中小发表于 2008-10-3 18:32

恩这个东西好啊

TOP

takuma888

银牌会员

帖子: 709
体力: 1282
威望: 2
当前: 北京海淀区
离线: 33 天

专长 前端制作,JS,JAVA

13^# 大中小发表于 2008-10-3 19:40

希望能够封装一下,那样用起来方便

Javascript原型编程前端交互

TOP

yoom [楼主]

木匠的背篓

版主

认证
帖子: 2484
体力: 3620
威望: 3
当前: 四川达州

专长 前端制作,JS

14^# 大中小发表于 2008-10-4 02:01

回复 13# takuma888 的帖子

您好，其实我是封装好了的。
请下载1楼的附件，附件中的示例是封装好了的。
运行框只是为了演示，没有把JS和xhtml分离开来。

年后到上海

TOP

yangedie

银牌会员

帖子: 782
体力: 1622
威望: 14
当前: 广东汕头
离线: 308 天

15^# 大中小发表于 2008-10-4 02:06

有两个地方能够再改进一下就好了
一个是默认值没有体现出来
另外一个就是如果用ajax提交了之后没有disable，还是照样响应鼠标hover

TOP

mypda07

中级会员

帖子: 151
体力: 298
威望: 2
当前: 湖南长沙
离线: 238 天

专长 网页设计,UI,JS

16^# 大中小发表于 2008-10-4 08:12

"点我，看地址栏“后怎么没效果啊

TOP

fanyong85309

初级会员

帖子: 25
体力: 61
威望: 0
离线: 10 天

17^# 大中小发表于 2008-10-4 09:21

不错,收藏了,漫漫研究了~

TOP

IRecall

追忆浪漫

高级会员

认证
帖子: 1424
体力: 939
威望: 3
当前: 北京海淀区
离线: 20 天

专长 网页设计,PHP,产品设计

18^# 大中小发表于 2008-10-4 09:33

嗯，效果很好~~收藏啦。

かわいい娜、chenvii.cn/about

TOP

sophiastone

初级会员

帖子: 54
体力: 99
威望: 0
离线: 274 天

19^# 大中小发表于 2008-10-7 11:24

很有趣，收藏。谢谢~~

TOP

koofox

中级会员

认证
帖子: 182
体力: 398
威望: 0
当前: 广东肇庆

专长 前端制作,ASP,MSSQL

20^# 大中小发表于 2008-10-8 10:14

留下足迹

TOP

yandongxu886

烟花

初级会员

帖子: 30
体力: 128
威望: 0
当前: 辽宁大连

专长 前端制作

21^# 大中小发表于 2008-11-22 00:51

usefull & powerful
mark

TOP

huzdl

新手上路

帖子: 10
体力: 27
威望: 0
当前: 北京朝阳区
离线: 441 天

22^# 大中小发表于 2008-11-22 11:35

收藏了，慢慢看，哈哈

huzdl.cn

TOP

bao162047

新手上路

帖子: 19
体力: 0
威望: 0
当前: 上海普陀
离线: 6 天

23^# 大中小发表于 2008-11-22 13:38

支持一下吧，看你写得这么辛苦

TOP

togoog

天使共舞

银牌会员

帖子: 616
体力: 1254
威望: 0
当前: 北京海淀区
离线: 22 天

专长 网页设计,ASP,搜索

24^# 大中小发表于 2008-11-24 09:43

谢谢分享。

一起的力量~一起杀毒网

TOP

ajaxer

初级会员

帖子: 52
体力: 108
威望: 0
离线: 36 天

25^# 大中小发表于 2008-11-24 13:34

不错，很有用的东西。做评论的时候可以用。谢谢lz

TOP

joelioa

烟灰受伤

高级会员

帖子: 296
体力: 610
威望: 0
当前: 天津南开
离线: 15 天

26^# 大中小发表于 2008-11-24 15:03

问下楼主，如果想在同一个页面里多次运用呢？

加油~~

TOP

sheva1982

24K金

高级会员

认证
帖子: 317
体力: 663
威望: 0
当前: 上海静安
离线: 7 天

专长 网页设计,前端制作,UE

27^# 大中小发表于 2008-11-24 15:12

这个不错，感谢楼主分享！

TOP

yoom [楼主]

木匠的背篓

版主

认证
帖子: 2484
体力: 3620
威望: 3
当前: 四川达州

专长 前端制作,JS

28^# 大中小发表于 2008-11-24 15:17

回复 26# joelioa 的帖子

我不是说了这句话么！
有个地方要注意，不管有多少个星级块，都必须被一个id为star_level的容器所包含，才能初始化事件。
你可以将body的ID设置为star_level，或最大的那个div容器设置id为 star_level,脚本就会自动查找所有符合条件的星星。

不过我现在在学习JS框架，现在看看我的js代码，貌似太复杂了。

年后到上海

TOP

joelioa

烟灰受伤

高级会员

帖子: 296
体力: 610
威望: 0
当前: 天津南开
离线: 15 天

29^# 大中小发表于 2008-11-24 15:33

给改了下，能多次使用，有多个form比较讨厌

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>半原创--星级选择器</title>
<style type="text/css">

</style>
</head>
<body>
<div id='starDiv'>
<h1>添加了行为的星级选择器</h1>
<p>表现层代码源自 <a href="http://demo.rexsong.com" target="_blank">一叶千鸟 http://demo.rexsong.com</a>，我仅写的行为。</p>
<form action="" method="get">
	<div id="star_level" star_width="14">
		<p>服务</p>
		<ul class="star_rating">
			<li style="display:none;">
				<input type="text" name="serve" value="" />
			</li>
			<li class="current_rating">default level</li>
			<li><a href="#" title="1 of 5 stars" class="one_star">1</a></li>
			<li><a href="#" title="2 of 5 stars" class="two_stars">2</a></li>
			<li><a href="#" title="3 of 5 stars" class="three_stars">3</a></li>
			<li><a href="#" title="4 of 5 stars" class="four_stars">4</a></li>
			<li><a href="#" title="5 of 5 stars" class="five_stars">5</a></li>
		</ul>
		<p>价格</p>
		<ul class="star_rating">
			<li style="display:none;">
				<input type="text" name="price" value="4" title="这里设置为2的话，表示默认2颗星亮。" />
			</li>
			<li class="current_rating">default level</li>
			<li><a href="#" title="1 of 5 stars" class="one_star">1</a></li>
			<li><a href="#" title="2 of 5 stars" class="two_stars">2</a></li>
			<li><a href="#" title="3 of 5 stars" class="three_stars">3</a></li>
			<li><a href="#" title="4 of 5 stars" class="four_stars">4</a></li>
			<li><a href="#" title="5 of 5 stars" class="five_stars">5</a></li>
		</ul>
		<p>质量</p>
		<ul class="star_rating">
			<li style="display:none;">
				<input type="text" name="mass" value="" />
			</li>
			<li class="current_rating">default level</li>
			<li><a href="#" title="1 of 5 stars" class="one_star">1</a></li>
			<li><a href="#" title="2 of 5 stars" class="two_stars">2</a></li>
			<li><a href="#" title="3 of 5 stars" class="three_stars">3</a></li>
			<li><a href="#" title="4 of 5 stars" class="four_stars">4</a></li>
			<li><a href="#" title="5 of 5 stars" class="five_stars">5</a></li>
		</ul>
	</div>
	<input type="submit" value="选好星星后，点我，然后看地址栏。" />
</form>
<form action="" method="get">
	<div id="star_level1" star_width="14">
		<p>服务1</p>
		<ul class="star_rating">
			<li style="display:none;">
				<input type="text" name="serve1" value="" />
			</li>
			<li class="current_rating">default level</li>
			<li><a href="#" title="1 of 5 stars" class="one_star">1</a></li>
			<li><a href="#" title="2 of 5 stars" class="two_stars">2</a></li>
			<li><a href="#" title="3 of 5 stars" class="three_stars">3</a></li>
			<li><a href="#" title="4 of 5 stars" class="four_stars">4</a></li>
			<li><a href="#" title="5 of 5 stars" class="five_stars">5</a></li>
		</ul>
		<p>价格1</p>
		<ul class="star_rating">
			<li style="display:none;">
				<input type="text" name="price1" value="4" title="这里设置为2的话，表示默认2颗星亮。" />
			</li>
			<li class="current_rating">default level</li>
			<li><a href="#" title="1 of 5 stars" class="one_star">1</a></li>
			<li><a href="#" title="2 of 5 stars" class="two_stars">2</a></li>
			<li><a href="#" title="3 of 5 stars" class="three_stars">3</a></li>
			<li><a href="#" title="4 of 5 stars" class="four_stars">4</a></li>
			<li><a href="#" title="5 of 5 stars" class="five_stars">5</a></li>
		</ul>
		<p>质量1</p>
		<ul class="star_rating">
			<li style="display:none;">
				<input type="text" name="mass1" value="" />
			</li>
			<li class="current_rating">default level</li>
			<li><a href="#" title="1 of 5 stars" class="one_star">1</a></li>
			<li><a href="#" title="2 of 5 stars" class="two_stars">2</a></li>
			<li><a href="#" title="3 of 5 stars" class="three_stars">3</a></li>
			<li><a href="#" title="4 of 5 stars" class="four_stars">4</a></li>
			<li><a href="#" title="5 of 5 stars" class="five_stars">5</a></li>
		</ul>
	</div>
	<input type="submit" value="选好星星后，点我，然后看地址栏。" />
</form>
<form action="" method="get">
	<div id="star_level2" star_width="14">
		<p>服务2</p>
		<ul class="star_rating">
			<li style="display:none;">
				<input type="text" name="serve2" value="" />
			</li>
			<li class="current_rating">default level</li>
			<li><a href="#" title="1 of 5 stars" class="one_star">1</a></li>
			<li><a href="#" title="2 of 5 stars" class="two_stars">2</a></li>
			<li><a href="#" title="3 of 5 stars" class="three_stars">3</a></li>
			<li><a href="#" title="4 of 5 stars" class="four_stars">4</a></li>
			<li><a href="#" title="5 of 5 stars" class="five_stars">5</a></li>
		</ul>
		<p>价格2</p>
		<ul class="star_rating">
			<li style="display:none;">
				<input type="text" name="price2" value="4" title="这里设置为2的话，表示默认2颗星亮。" />
			</li>
			<li class="current_rating">default level</li>
			<li><a href="#" title="1 of 5 stars" class="one_star">1</a></li>
			<li><a href="#" title="2 of 5 stars" class="two_stars">2</a></li>
			<li><a href="#" title="3 of 5 stars" class="three_stars">3</a></li>
			<li><a href="#" title="4 of 5 stars" class="four_stars">4</a></li>
			<li><a href="#" title="5 of 5 stars" class="five_stars">5</a></li>
		</ul>
		<p>质量2</p>
		<ul class="star_rating">
			<li style="display:none;">
				<input type="text" name="mass2" value="" />
			</li>
			<li class="current_rating">default level</li>
			<li><a href="#" title="1 of 5 stars" class="one_star">1</a></li>
			<li><a href="#" title="2 of 5 stars" class="two_stars">2</a></li>
			<li><a href="#" title="3 of 5 stars" class="three_stars">3</a></li>
			<li><a href="#" title="4 of 5 stars" class="four_stars">4</a></li>
			<li><a href="#" title="5 of 5 stars" class="five_stars">5</a></li>
		</ul>
	</div>
	<input type="submit" value="选好星星后，点我，然后看地址栏。" />
</form>
</div>
</body>
</html>
<script type="text/javascript">

</script>

提示：您可以先修改部分代码再运行

加油~~

TOP

yoom [楼主]

木匠的背篓

版主

认证
帖子: 2484
体力: 3620
威望: 3
当前: 四川达州

专长 前端制作,JS

30^# 大中小发表于 2008-11-24 17:05

回复 29# joelioa 的帖子

谢谢！

年后到上海

TOP