设计场景:
Ben最近在负责一个购书网站,在网站的首页上,有一个叫做“最新上架”的板块,板块的内容比较简单,只有书籍名称,作者姓名和上架时间(如图),当初设计的时候并i没有过于丰富的构思...
现在问题来了,这个版块不大,更新频率却很高,每天都有十数条最新的信息上去,浏览网站的会员对于最新图书的了解和需求越来越大,因此需要对这个板块进行改良,以满足会员的需求,会员的主要要求有以下几个方面:显示该最新上架的图书的封面缩略图,该图书的名称和作者名称,以及该书部分内容的介绍和作者的简介...
这下把Ben给愁坏掉了,首页上根本就没有多余的空间,怎么来呈现封面缩略图甚至是内容简介,如果去掉别的板块空间来实现这一板块的扩张,无异于在一家公司以牺牲一个部门来壮大另外一个部门,这是万万不可取的...
于是Ben想到了以弹出层的方式来显示每条信息的详细内容...
设计目标:
在不改变页面结构的情况下,以弹出层(用Dom重构的方式来实现元素的追加append和移除remove)的方式提高页面信息量...
解决方案:
首先,我们设计一个Div,样式如下:
.TipDiv
{
width : 500px ;
height : 120px ;
padding : 8px ;
border-top : solid 5px #a6c9e2 ;
border-bottom : solid 5px #a6c9e2 ;
border-left : solid 1px #a6c9e2 ;
border-right : solid 1px #a6c9e2 ;
background : #ffffff ;
z-index : 10 ; /* z-index很重要,它决定了Div框在页面上的叠加顺序 */
position : absolute ; /* 绝对定位,它决定了该元素可以根据top 和 left 叠在其他元素上 */
}
.TipDiv img
{
width : 110px ;
height : 110px ;
margin-right : 36px ;
margin-left : 10px ;
float : left ;
}
.TipDiv span
{
/* × */
width : 340px ;
height : 110px ;
float : left ;
word-break : break-all ;
border-top : dashed 1px #3a7ac8 ;
margin-top : 8px ;
}
下面是脚本,当鼠标经过的时候才响应弹出框事件:
$(document).ready( function (){
// 标题鼠标经过
$( " ul li a " ).mousemove( function (e){
$( " .TipDiv " ).remove(); // 若页面上有该元素,则移除该元素...0
var x = e.clientX + 10 ; // 获取鼠标的x轴坐标
var y = e.clientY + 10 ; // 获取鼠标的y轴坐标
var num = $( this ).attr( " id " );
var imgs;
var word;
var name;
switch (num)
{
case " 1 " :{ imgs = " images/mimi.bmp " ; name = " 秘密 朗达·拜恩 (Rhonda Byrne)... " ; word = " 这是一个神圣的秘密花园,住着爱丽丝... " ; break ; }
case " 2 " :{ imgs = " images/mama.bmp " ; name = " 一位母亲的记忆 爱心团... " ; word = " 这是一个关于母亲的故事,感染了每个中国人,她是一位暴走族母亲,也是一位为儿子捐献肝的母亲,她更是一位伟大的,典型的中国母亲... " ; break ; }
case " 3 " :{ imgs = " images/nikesong.bmp " ; name = " 尼克爷爷讲故事 (巴特沃斯, 漪然)... " ; word = " ★当今世界最出色的儿童绘本作家、插画家!<br>★获得1992年度英国图书奖(British Book Awards)<br>★全球每15分钟就有一本由他创作的绘本被买走<br>★他的绘本让阅读变得赏心悦目! " ; break ; }
case " 4 " :{ imgs = " images/lqz.bmp " ; name = " 李清照:人生不过一场绚烂花(蔚起)... " ; word = " 《李清照:人生不过一场绚烂花事》精选易安词作50首,从《武陵春(风住尘香花已尽)》始,至《好事近(风定落花深)》结束。通篇以闲话家常、婉约诚挚的笔法评析、阐释,娓娓道来,不生涩,没有说教。 " ; break ; }
}
popDiv(imgs,name,word,x,y);
})
// 标题鼠标离开
$( " ul li a " ).mouseout( function (){
$( " .TipDiv " ).remove();
})
})
// 随鼠标移动的信息框
function popDiv(face,name,info,xx,yy)
{
var str = "" ;
str += " <div class='TipDiv'> " ;
str += " <img alt='face' src=' " + face + " '/> " ;
str += " <strong><em> " + name + " </em></strong><br /> " ;
str += " <span> " + info + " </span> " ;
str += " <div> " ;
$( ' body ' ).append(str); // 在页面上追加该元素,样式如上已经写好
$( " .TipDiv " ).css({ " top " :yy + " px " , " left " :xx + " px " }); // 设置该元素出现的位置(这里是出现在鼠标的右边和下边的偏离10px位置)
}
结果如下(当鼠标指向第三条数据时,弹出该框, 并随鼠标移动):
做到这边,会员有了一个新的要求,就是不要弹出框随着鼠标的移动而移动,那样鼠标一旦离开焦点,就会移除该弹出框,操作起来不是很方便。他们要求弹出框固定,假设就在相应的数据行的右侧吧,而且打开和关闭由会员自己控制,于是Ben就进行改良了...
同样的,先设计一个id为tips的Div元素,样式如下:
脚本如下:
$(document).ready( function (){
// 时间鼠标经过
$( " ul li span " ).mouseover( function (){
$( " #tips " ).remove();
var elem = $( this ).parent();
var mTop = elem.offset().top; // 获取该元素的top坐标
var mLeft = elem.offset().left; // 获取该元素的left坐标
var addLeft = elem.width(); // 获取该元素的宽度
var finalTop = mTop - 30 ; // 获取最终元素出现的Top位置,此时-30个元素是提高这个Div的高度,让箭头指向对应行
var finalleft = mLeft + addLeft + 20 ; // 获取最终元素出现Left的,对应行的左边加上行宽加上20个空元素
var num = $( " li " ).index(elem) + 1 ;
popDiv1(finalTop,finalleft, " 提示框提醒你,这是第 " + num + " 行数据! " );
})
})
// 固定的信息框
function popDiv1(tops,lefts,messages)
{
var str = "" ;
str = " <div id='tips'><img id='tipsArrow' src='images/arrow.png' alt=''/><img id='close' src='images/close.jpg' alt='' οnclick='closeUp()'/><img src='images/light.gif' alt='' id='light'/><p> " + messages + " </p></div> " ;
$( ' body ' ).append(str);
$( " #tips " ).css({ " top " :tops + " px " , " left " :lefts + " px " });
}
function closeUp()
{
$( " #tips " ).remove();
}
最终显示效果如下:
鼠标移动到相应的数据行上面,显示相应的提示框,右边的打叉小图标用以关闭整个弹出层...
设计小结:
这个设计过程的关键是position:absolute(绝对定位,作用是让层在页面上叠加),z-index(用以显示层的叠加次序),top、left(显示弹出页面坐标),(offset().left,offset().top)在页面上找到某个元素的坐标,位置找到了,就可以随意在它的周边定位弹出层了,其他的样式可以根据自己的美工需求随意调节...
源码下载(http://files.cnblogs.com/wzh2010/popDiv.rar)
#tips
{
background-color : white ;
border-left : 1px solid #a6c9e2 ;
border-right : 1px solid #a6c9e2 ;
border-top : 5px solid #a6c9e2 ;
border-bottom : 5px solid #a6c9e2 ;
width : 268px ; height : 60px ;
z-index : 9 ;
position : absolute ;
-moz-border-radius : 5px ; -webkit-border-radius : 5px ;
padding : 8px 18px ;
}
/* 弹出层的指向图标,left:-10 使它出现在整个Div的左侧 */
#tips #tipsArrow { position : absolute ; top : 26px ; left : -10px }
#tips #light
{
width : 36px ;
height : 36px ;
margin : 6px 16px 16px 16px ;
float : left ;
}
#tips span
{
margin-top : 18px ;
}
#tips #close
{
width : 20px ;
height : 16px ;
border : none ;
z-index : 1 ;
left : 280px ;
top : 6px ;
position : absolute ;
cursor : pointer ;
}