优麒麟手机助手桌面技术细节

来源：互联网发布：武汉大学罗知编辑：程序博客网时间：2024/04/30 03:36

<body onLoad="load()"><div id="main"><div id="top"><div id="top_l"><ul><li><a href="#" onClick="changecontent(1)"><img src="images/myphone.png" /><br/><span>我的手机</span></a></li><li><a href="#" onClick="changecontent(2)"><img src="images/app.png"/><br/><span>应用</span></a></li><li><a href="#" onClick="changecontent(3)"><img src="images/file.png"/><br/><span>文件</span></a></li><li><a href="#" onClick="changecontent(4)"><img src="images/music.png"/><br/><span>音乐</span></a></li><li><a href="#" onClick="changecontent(5)"><img src="images/wallpaper.png"/><br/><span>壁纸</span></a></li><li><a href="#" onClick="changecontent(6)"><img src="images/album.png"/><br/><span>相册</span></a></li><li><a href="#" onClick="changecontent(7)"><img src="images/help.png"/><br/><span>清理</span></a></li></ul></div><div id="top_r"><img src="images/logo.png"/></div></div><div id="bottom"><div id="content1"></div><div id="content2"><iframe class="con" id="iframe2" style="width:900px; height:450px;" scrolling="yes" frameborder="0"></iframe></div><div id="content3"><iframe class="con" id="iframe3" src="filemanager/index.xhtml" style="width:900px; height:450px;" scrolling="yes" frameborder="0"></iframe></div><div id="content4"><iframe class="con" id="iframe4" style="width:900px; height:450px;" scrolling="yes" frameborder="0"></iframe></div><div id="content5"><iframe class="con" id="iframe5" style="width:900px; height:450px;" scrolling="yes" frameborder="0"></iframe></div><div id="content6"><iframe class="con" id="iframe6" style="width:900px; height:450px;" scrolling="yes" frameborder="0"></iframe></div><div id="content7"><iframe class="con" id="iframe7" style="width:900px; height:450px;" scrolling="yes" frameborder="0"></iframe></div><!--not tab menu --><div id="content8"><iframe class="con" id="iframe8" style="width:900px;height:450px;" scrolling="yes" frameborder="0"></iframe></div><div id="content9"><iframe class="con" id="iframe9"  style="width:900px; height:450px;" scrolling="yes" frameborder="0"></iframe></div><div id="content10"><iframe class="con" id="iframe10"  style="width:900px; height:450px;" scrolling="yes" frameborder="0"></iframe></div><div id="content11"><iframe class="con" id="iframe11"  style="width:900px; height:450px;" scrolling="yes" frameborder="0"></iframe></div><div id="content12"><iframe class="con" id="iframe12"  style="width:900px; height:450px;" scrolling="yes" frameborder="0"></iframe></div></div>

之前直接加载Div,用 jQuery的load加载html，出现很多问题，研究了几天，发现它先加载了body后加载的css和js，造成布局混乱。

后来换用iFrame，

首页还是用load，因为在首页如果是iframe调用父组件方法比较困难。

初使直接加载所有的iFrame初始的时候比较慢，但加载后切换比较快。

</pre><p></p><p></p><pre name="code" class="html">// JavaScript Documentfunction load(){var i;for(i=1;i<13;i++){$("#content"+i).hide();}$("#content"+1).show();$('#content1').load('myphone.html');  //加载iframeiframe2.src="installed_apps.xhtml";iframe4.src="/app/mp3player/mp3player.xhtml";iframe5.src="changewallpaper.xhtml";iframe6.src="slideshow/index.xhtml";iframe7.src="processlist.xhtml";iframe8.src="call_log.xhtml";iframe9.src="dial.xhtml";iframe10.src="sms/sms_threads.xhtml";iframe11.src="start.xhtml";iframe12.src="voice_recorder/voice_recorder.xhtml";}function changecontent(num){var i;for(i=1;i<13;i++){$("#content"+i).hide();}$("#content"+num).fadeIn();}

0 0