EonerCMS——做一个仿桌面系统的CMS(二)

时间:2022-09-19 15:47:30

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

桌面

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

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

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

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

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

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

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

EonerCMS——做一个仿桌面系统的CMS(二)

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

EonerCMS——做一个仿桌面系统的CMS(二)

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

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

EonerCMS——做一个仿桌面系统的CMS(二)

  我们看到就只有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次的问题。如果你有好的解决办法,希望能留言告诉我。

  其实上一周做的东西并不多,加上工作上有点小忙,周四周五就没抽出时间来研究。不过在上一篇文章中看到某人对我的留言,我非常激动。前辈已经做出了一个和我想法大致类似的东西,而且把他的制作经验都给我说了,我没有理由不继续做下去。

  所以,这周,继续加油吧。