Analytics

2010年5月28日 星期五

[Javascript]使用frame切割畫面並以JavaScript動態控制載入頁面(Use iframe cutting screen and JavaScript dynamic control loading page)


問題
使用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>
張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)

熱門文章