上一周我说到，我要开始做一个仿桌面系统的CMS。现在，一周过去了，来做个小小的总结吧，顺便把上一周片尾留的小问题解答下。

桌面

　　关于界面，思前想后，还是模仿115的了，说是模仿，其实几乎是照搬。因为我看了下HTML和CSS，没有什么太大的技术含量，制作起来也不会遇到什么困难，干脆舍弃这一步，进入后面的话题。

　　上周我留下了一个问题，就是桌面那一个个快捷方式，为什么不能直接写在页面里，而要通过js来加载。其实，并非一定要通过js加载生成，但是即便写在页面里，也还是通过js来定位，对，就是定位。试想一下，浏览器的窗口有大有小，如果直接写在页面里固定死，那窗口缩小了，岂不是要把有的图标给遮住了。所以针对这个问题，操作办法是：

　　1、每个图标的position样式定义为absolute，也就是绝对定位

　　2、通过js来对每个图标定位

　　3、当改变窗口尺寸的时候，更新每个图标的定位

　　下面就讲解下，由于这个不是教程，没有准备过各个情况下的demo，我就直接用firebug截图演示了，请原谅。

　　首先是第一个，定义每个图标的position样式为absolute，看图吧

　　这是已经OK的效果图，如果我们把position:absolute注释掉，看看会怎么样。

　　我们看到，图标就直接一排竖着排到底了，超出的部分就看不到了。所以，position:absolute就是来解决这一问题的。

　　接下来，我们继续看。我们都知道absolute通常是要配合top、right、left、bottom这4个方向来实现绝对定位的，如果不设置，就会出现这种情况。为了做测试，我手动把li的行内样式给去掉了。

　　我们看到就只有1个了图标了，其实不是，是所有图标都叠加在一起了，所以，定义好position:absolute必须还要定义好每个图标的偏移像素，而这个操作，我是通过js来处理的。

   $(window).bind('load',function(){    //循环输出每个图标    for(var sc in shortcut){     $(ul).append('<li style="left:'+_left+'px;top:'+_top+'px" title="'+shortcut[sc][1]+'" shortcut="'+shortcut[sc][0]+'"><img src="'+shortcut[sc][2]+'"><span>'+shortcut[sc][1]+'</span><em></em></li>');     //每循环一个图标后，给top的偏移量加90px     _top += 90;     //当下一个图标的top偏移量大于窗口高度时，top归零，left偏移量加90px     if(_top+Core.config.shortcutTop+57 > windowHeight){      _top = Core.config.shortcutTop;      _left += 90;     }    }   });  //id,iconName,iconUrl,url,width,height,top,left  var shortcut = [   [0,"栏目管理","img/kind.png","xxx.php",800,500,0,300],   [1,"新闻管理","img/news.png","xxx.php",800,200,100,300],   [2,"通讯录","img/tel.png","xxx.php",800,500,0,300],   [3,"栏目管理","img/news.png","xxx.php",800,500,0,300],   [4,"栏目管理","img/news.png","xxx.php",800,500,0,300],   [5,"栏目管理","img/news.png","xxx.php",800,500,0,300],   [6,"栏目管理","img/news.png","xxx.php",800,500,0,300],   [7,"栏目管理","img/news.png","xxx.php",800,500,0,300]  ];

　　上面第一段js注释写的应该很明了了吧，原理就是，通过js来循环添加li对象，也就是图标，同时把图标的偏移量设置好，当某个图标的位置在显示窗体之外时，自动换到第二列，也就是把top归零，left加上一定的偏移数值。

　　最后一步，当窗体改变尺寸的时候，更新。这里的更新有2种方法，一种是重新再加载一遍，这个就不用我多说了，就是把第二步再执行一遍，当然先要把原先的清空。另一种方法就是通过js修改每个图标的偏移量。我采用的是第二种方法，可以参考下代码。

   $(window).bind('resize',function(){    //由于图标不会太多，所以resize里的方法是对样式直接修改，当然也可以重建li    _top = Core.config.shortcutTop;    _left = Core.config.shortcutLeft;    windowHeight = $(Core.config.desk).height();    //循环ul，操作每一个li    $(ul).find("li").each(function(){     $(this).css({"left":_left,"top":_top});     _top += 90;     if(_top+Core.config.shortcutTop+57 > windowHeight){      _top = Core.config.shortcutTop;      _left += 90;     }    });   });

　　这样，我们对桌面上图标的加载的功能就制作完毕了。后续的测试中，发现一个问题。就是resize方法会执行2次，百度查了一下了，也没有一个比较好的办法，大多数办法还是通过延迟来防止出现执行2次的问题。如果你有好的解决办法，希望能留言告诉我。