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

最新推荐文章于 2022-06-23 11:55:21 发布

98ki

最新推荐文章于 2022-06-23 11:55:21 发布

阅读量1.2k

点赞数

分类专栏：开源夏令营

本文链接：https://blog.csdn.net/zhangpengyu321/article/details/39130401

版权

开源夏令营专栏收录该内容

8 篇文章 0 订阅

订阅专栏


<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 Document
function load()
{
	

	var i;
	for(i=1;i<13;i++){
		$("#content"+i).hide();			
		}
		$("#content"+1).show();	
		
				$('#content1').load('myphone.html');
  //加载iframe
	iframe2.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();
		
	
	}