問題
使用frame切割畫面並以JavaScript動態控制載入頁面
解決方法
以Javascript控制frame載入的頁面架構如下
主框架頁為index.html,裡面分為上下2個框架,上面為選單按鈕,下面為選單的內容頁
選單按鈕頁為menu.html,當選單被點選以後,到index.html裡載入內容頁
以下是程式碼
主框架在index.html
<html> <head> <title>資料查詢</title> <meta http-equiv="PRAGMA" content="NO-CACHE"> <meta http-equiv="Content-Type" content="text/html; charset=big5"> <meta content="zh-tw" name="Content-language"> </head> <frameset rows="22,*" border="1" framespacing="0"> <frame name="menu" src="menu.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0"> <frameset rows="*,0,0" id="frm_qry_web"> <frame name="frm_qry_1" src="查詢_明細.htm" marginwidth="0" marginheight="0" scrolling="yes" frameborder="0"> <frame name="frm_qry_2" src="查詢_異動明細.htm" marginwidth="0" marginheight="0" scrolling="yes" frameborder="0"> <frame name="frm_qry_3" src="查詢_維修明細.htm" marginwidth="0" marginheight="0" scrolling="yes" frameborder="0"> </frameset> </frameset> </html>選單按鈕在menu.html
<html> <head> <title>查詢</title> <script language="JavaScript"> function Switch_Page(p) { // 切換至點選的頁籤 Reset_Tabs(p); // 頁籤內容網址連結設定 if (document.all('Pages')[(p-1)].value!='') { if (document.all('Pagescount')[(p-1)].value==0) { if (p!=1) { document.all('Pagescount')[(p-1)].value=eval(document.all('Pagescount')[(p-1)].value + 1) ; eval('parent.Cus_'+p).location=document.all('Pages')[(p-1)].value; } } } } // 切換點選的頁籤 // Step1. 點選的頁籤以反白的方式顯示 // Step2. 將所屬的 Frame, 以 100% 顯示 function Reset_Tabs(p) { var Page_Cnt=document.all('Pages').length; var Pager=""; p-=1; for(i=0;i<Page_Cnt;i++) { if (i==p) { eval('tab_'+(i+1)).className="Tab_on"; //設定字型 eval('tab_'+(i+1)+'_back').background=''; //設定背景 Pager+=",100%"; //設定 Frame 的顯示比例 } else { eval('tab_'+(i+1)).className="Tab_off"; eval('tab_'+(i+1)+'_back').background='../Images/Menu_tab_1.gif'; Pager+=",*"; } } parent.frm_qry_web.rows=Pager.substring(1,Pager.length) ; } </script> </head> <body > <form id="form1" > <input type="hidden" name="boxurl" value=''> <input type="hidden" name="Pages" > <input type="hidden" name="Pages" > <input type="hidden" name="Pages" > <input type="hidden" value="0" name="Pagescount"> <input type="hidden" value="0" name="Pagescount"> <input type="hidden" value="0" name="Pagescount">
<table width="100%" border="1" cellpadding="0" cellspacing="0"> <tr> <td width="10%" ID=tab_1_back align="center"><div id="tab_1" onclick="Switch_Page(1)" class="Tab_on" nowrap>訂單明細</div></td> <td width="10%" ID=tab_2_back align="center"><div id="tab_2" onclick="Switch_Page(2)" class="Tab_off" nowrap>後送明細</div></td> <td width="10%" ID=tab_3_back align="center"><div id="tab_3" onclick="Switch_Page(3)" class="Tab_off" nowrap>維修明細</div></td> <td width="100%" > </tr> </table> </form> <script language="javascript"> Switch_Page(1); </script> </body> </html>
沒有留言:
張貼留言