<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();
}