上一周我說到，我要開始做一個仿桌面系統的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偏移量加90pxif(_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次的問題。如果你有好的解決辦法，希望能留言告訴我。

　　其實上一周做的東西并不多，加上工作上有點小忙，周四周五就沒抽出時間來研究。不過在上一篇文章中看到某人對我的留言，我非常激動。前輩已經做出了一個和我想法大致類似的東西，而且把他的制作經驗都給我說了，我沒有理由不繼續做下去。

　　所以，這周，繼續加油吧。

轉載于:https://www.cnblogs.com/hooray/archive/2011/09/05/2166903.html

總結

以上是生活随笔為你收集整理的EonerCMS——做一个仿桌面系统的CMS（二）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。