首页 > 代码库 > 10.7 制作小视图模式

10.7 制作小视图模式

下面在中模式的基础上,制作小视图模式的效果,效果如图1所示。小视图模式的日历实例文件位于网页学习网CSS教程资源中的“第1O章\03\calendar-small.htm”。

图1 小视图模式下显示日历

图1 小视图模式下显示日历

为了便于读者理解在中模式的基础上修了哪些CSS设置,这里将完全保持现有的CSS和HTML不变,然后增加若干条CSS样式,实现小模式的效果。HTML部分仅在caption部分的3种模式切换的链接做了修改,与日历本身的所有代码不做任何修改。

一、整体设置

① 首先将整个表格的宽度设置为245像素,将宽度变窄,代码如下。lodidance.com

折叠CSS 代码复制内容到剪贴板
  1. .month {   
  2.     width:245px;   
  3. }  

② 把需要隐藏的内容都隐藏起来。代码如下,即把每列的列头单元格中的“星期”两字隐藏,以及把每天的活动安排信息列表隐藏。“星期”两个字在一开始的时候,都已经放置在span中了,现在将这些span隐藏起来即可。

折叠CSS 代码复制内容到剪贴板
  1. .month th span ,   
  2. .month ul {   
  3.      display:none;   
  4. }

至此小视图模式的外观已经做好了。但是仪做成这样还体现不出足够的“技术含量”,我们还希望鼠标指针经过某个单元格的时候,能够把活动安排的信息内容以弹出框的形式显示出来。

二、为IE 8和Firefox制作鼠标指针经过时弹出的信息框

Firefox和IE 8都支持td的“:hover”伪类,也就是可以设鬣“td:hover”的样式,那么显示弹出信息框这个任务就可以完全依靠CSS来完成了。

注意:如果要使IE 8能够支持“td:hover”,必须正确设置DOCTYPE,设置成xhtml l.0 transitional即可。如果没有设置DOCTYPE,在IE 8中的表现会和IE 6中一样。

① 首先实现鼠标指针经过有活动安排的单元格时,使单元格变色。这个要求比较容易实现,具体代码如下。

折叠CSS 代码复制内容到剪贴板
  1. .month td.active:hover{   
  2.  background:aqua;   
  3. }

② 设置显示活动安排。摹奉思路是把隐藏的ul再显示出来,但是需要对样式做一些调整。假设先仅仅显示该列表。而不做任何其他调整,代码为:

折叠CSS 代码复制内容到剪贴板
  1. .month td.active:hover ul{   
  2.   display:block;   
  3. }

这时效果由于显示了活动信息所在的ul,因此导致表格单元格的高度发生了变化,这不是希望的效果。

③ 这提示我们,为了显示活动安排信息后,不影响日历表格本身的单元格,必须使ul脱离标准流,因此必须使用绝对定位。这里将设置改为:

折叠CSS 代码复制内容到剪贴板
  1. .month td.active:hover ul{   
  2.   display:block;   
  3.   position:absolute;   
  4. }

这时的效果可以看到已经相当接近目标了。

④ 设置背景色和边框。背景色使用和日历上的active单元格相同的背景色即可,边框用什么颜色好呢?由于这个边框会和底下的表格重叠,因此用任何颜色都有可能显得比较杂乱,这里用白色是一个比较好的选择,它可以使弹出的信息和背景上的表格有一定的隔离效果。代码如下:

折叠CSS 代码复制内容到剪贴板
  1. .month td.active:hover ul{   
  2.   border:3px #FFF  solid;   
  3.   background:#bde;   
  4.   display:block;   
  5.   position:absolute;   
  6. }

⑤ 设置margin和padding,使这个矩形内的排版更美观一些。和前面相似,增加下面两行设置。

折叠CSS 代码复制内容到剪贴板
  1. margin:10px 0 0;   
  2. padding:7px 2px 0 5px;

这两行代码的设置含义是,通过padding使信息文字摆放到中间位置,通过margin把这个矩形框整体向下移动一些,否则距离鼠标指针距离位置有些太近了。

注意:为了把这个矩形框整体向下移动一定距离,使用的是margin属性,而不是通常对绝对定位元素使用的top属性。这是因为,如果使用top属性,就必须使鼠标指针经过的单元格成为这个矩形框(本质是一个ul列表)的定位基准,而td的display属性默认值是一种特殊的类型,不是普通的block,一旦将td的display转换成block,整个表格的结构就会被破坏,因此这不是可行的方法。如果不使用top属性,绝对定位的元素仍然在它原来的位置上,这时通过设定margin就可以方便地移动它。这也是一个很有用的技巧,在本教程第4章,专题讲解定位属性的时靛,提到过这个性质。

至此,在Fire fox和IE 8中已经完全实现了小视图模式的目标。

三、为IE 6制作鼠标指针经过时弹出的信息框

上面一小节介绍的方法对于IE和Firefox是有效的,而对于超过80%的访问者使用的IE 6该怎么办呢?答案只能有一个,那就是JavaScript。

首先用类别来代替伪类,将上面两段代码分别增加一个选择器,如下所示。

折叠CSS 代码复制内容到剪贴板
  1. .month td.active:hover,   
  2. .month td.hover {   
  3.  background:aqua;   
  4. }   
  5. .month td.active:hover ul ,   
  6. .month td.hover ul{   
  7.   margin:10px 0 0;   
  8.   border:3px #FFF  solid;   
  9.   padding:7px 2px 0 5px;   
  10.   background:#bde;   
  11.   display:block;   
  12.   position:absolute;   
  13. }

为了先检验一下这两个类别是否起作用,可以窿HTML中任意找一个有活动安排的单元格,例如7日这天的单元格,代码如下。

折叠XML/HTML 代码复制内容到剪贴板
  1. <td class="active">7   
  2. <ul>  
  3.     <li>检查案例实施进度</li>  
  4. </ul>  
  5. </td>

将它修改为:

折叠XML/HTML 代码复制内容到剪贴板
  1. <td class="active" onMouseOver="className=‘active hover‘;" onMouseOut="className=‘active‘;">7   
  2. <ul>  
  3.     <li>检查案例实施进度</li>  
  4. </ul>  
  5. </td>

这时这个单元格在鼠标指针经过时,动态地把类别由class="active"改为class="active hover"。同理,当鼠标指针离开的时候,再把类别动态地改回class="active"。当鼠标指针经过“7日”这个单元格时,就出现了弹出的矩形框,而在其他单元格上都没有,这就证明了上面的方法是可行的。

如果读者不会使用JavaScript,就可以为每一个有活动安排的单元格,逐一添加这两句相同的代码。如果读者有一定的JavaScript和DOM编程的基础,则可以写一小段JavaScript代码来完成手工的工作。方法是在整个表格的HTML结束以后,即在</table>之后,添加如下一段代码。

折叠JavaScript 代码复制内容到剪贴板
  1. <script language="javascript">   
  2. var days = document.getElementsByTagName(‘td‘);   
  3. for (var i=0;i<days.length;i++)   
  4.   if(days[i].className == ‘active‘)   
  5.   {days[i].onmouseover = function(){        //鼠标在行上面的时候   
  6.         this.className = ‘active hover‘;   
  7.     }   
  8.     days[i].onmouseout = function(){        //鼠标离开时   
  9.         this.className = ‘active‘;   
  10.     }   
  11. }   
  12. </script>

下面简单讲解一下这段代码的原理。首先通过“document.getElementsByTagName(‘td‘);”取得整个文档的DOM树中的所有td节点,并以数组的形式存储在“days”变量中,然后通过一个循环语句,依次检查每一个td节点。如果某个节点的类别被设置为active,就为该节点的onmouseover事件句柄设置一个函数。在函数中把该函数的类别增加一个hover类别,然后把该节点的onmouseout事件句柄设置为恢复类别的函数。lodidance.com

这段代码将在表格装载完成以后执行一次,就相当于手工为每个active单元格添加代码。这样,在IE 6中,也可以实现鼠标指针经过时弹出提示信息的功能了。

此时在浏览器中可以看到,矩形框的绝对定位在IE中和在Firefox中还是有细微区别的。如果要求严格相同的话,可以用前面介绍过的条件注释的功能,针对IE稍微调整一下margin和padding的值,就可以取得完全相同的效果了。

至此,已经实现了中视图模式和小视图模式,并且都保证了可以在IE 6、IE 7/8和Firefox浏览器中正确显示。

点击下载第8~17章CSS教程资源 返回《CSS教程布局之道》教程列表

编辑:网页学习网
本文地址:http://www.lodidance.com/css/jc/747.html