最近看了几个国外网站的评分设计.觉得mp3.com作的最值的学习,内容(html),行为(javascript),表现(CSS)将三者设计的恰到妙处.
评分的原理大致如下:
一张5星级的图片或5张一星的图片连接在一起,每一个星位上有一个事件函数把相应的星值和当前的记录ID通过ajax送到后台更新.mp3.com设计的妙点在：
1：用了一张星图,亮暗几占星图总高度的一半：
示例星图地址:http://image.com.com/mp3/images/stars/star-rating-bg.gif
2:评分设计中,移动鼠标显示相应的星值,一定会用到JS事件函数来改变星图.mp3.com在这步也作足了功夫
用8个处理函数打成一个rating.js,个人觉得最棒的是人家没在html中硬编码.
3.显示星值.这个部分不及前2个妙点.不过也有可圈可点之处.
示例代码从mp3.com中扣的,用到了prototype框架,没有服务器端代码.这个相信难不住大家.
示例代码:html
- <!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=gb2312" />
- <script type="text/javascript" src="http://localhost/demo/include/js/prototype.js"></script>
- <title>无标题文档</title>
- </head>
- <body>
- <div id="sitepage">
- <div class="star-rating fr">
- <div style="width: 84%;"></div>
- </div>
- <div id="vote-1-49320" class="star-rating fr">
- <div class="0" style="width: 0%;"></div>
- <a href="http://www.mp3.com/signup" title="0.5 stars!" rev="vote-against" name="1-49320-1"></a>
- <a href="http://www.mp3.com/signup" title="1 stars!" rev="vote-against" name="1-49320-2"></a>
- <a href="http://www.mp3.com/signup" title="1.5 stars!" rev="vote-against" name="1-49320-3"></a>
- <a href="http://www.mp3.com/signup" title="2 stars!" rev="vote-against" name="1-49320-4"></a>
- <a href="http://www.mp3.com/signup" title="2.5 stars!" rev="vote-against" name="1-49320-5"></a>
- <a href="http://www.mp3.com/signup" title="3 stars!" rev="vote-for" name="1-49320-6"></a>
- <a href="http://www.mp3.com/signup" title="3.5 stars!" rev="vote-for" name="1-49320-7"></a>
- <a href="http://www.mp3.com/signup" title="4 stars!" rev="vote-for" name="1-49320-8"></a>
- <a href="http://www.mp3.com/signup" title="4.5 stars!" rev="vote-for" name="1-49320-9"></a>
- <a href="http://www.mp3.com/signup" title="5 stars!" rev="vote-for" name="1-49320-10"></a>
- <img id="startAddVoteListeners-1-49320" class="anon" src="http://image.com.com/mp3/images/b.gif" style="position:absolute;" alt="Load this to turn on javascript" />
- </div>
- <script type="text/javascript">// let's get this party started!
- if ($('vote-1-49320')) {
- addVoteListeners(1,49320);
- // already voted
- if ($('startAddVoteListeners-1-49320').className != '' && $('startAddVoteListeners-1-49320').className != 'anon') {
- toggleListeners('none', 1, 49320);
- }}
- </script>
- </div>
- </body>
- </html>
代码的显示会偏右,mp3.com的评分就在哪个方位.我没改.
示例代码:CSS
- <style type="text/css">
- .star-rating {
- width: 140px;
- height: 30px;
- position: relative;
- background: url(http://image.com.com/mp3/images/stars/star-rating-bg.gif) bottom;
- z-index: 1;
- }
- .star-rating div {
- width: 0;
- height: 30px;
- position: absolute;
- left: 0;
- top: 0;
- background: url(http://image.com.com/mp3/images/stars/star-rating-bg.gif) top left;
- z-index: 2;
- }
- .star-rating a {
- width: 10%;
- height: 30px;
- float: left;
- position: relative;
- z-index: 3;
- }
- .fr {float: right;}
- .fl {float: left;}
- .fl,.fr {position: relative;}
- </style>
示例代码:javascript
有9个函数,其中8个在mp3.com是放在一起的rating.js,您也可以去mp3.com下载,包含到html中即可.下载地址:
http://www.mp3.com/js/ratings.js
您看到的是全局的事件函数:
- function addEvent(obj, evType, fn, useCapture){
- if (obj.addEventListener){
- obj.addEventListener(evType, fn, useCapture);
- return true;
- }
- else if (obj.attachEvent) {
- var r = obj.attachEvent("on"+evType, fn);
- return r;
- }
- else {
- alert("Handler could not be attached");
- }
- }
现在才真的体会到:看好的代码是一种享受.希望您看到这篇文章可以学到更多的设计思想