資料來源 :
demo小舖
框架設定
註：
1. 這其實不難, 重點是頁簽中的文字要改為超連結, 以及要在.VB頁設定設定HyperLink的target和NavigatorUrl
2. 經過測試，頁簽內的文字改為中文的話要用IE開才會正常顯示喔
步驟:
第一步:製作頁簽
1. 下載CSS Tab Designer 2 (新版的CSS標籤編輯器,由此下載)
2. 安裝起來後點開它
3. 當你選定好了你要的頁籤後，按下Generate HTML會在你選擇的目錄底下跑出至少三個檔案，將圖檔複製到你的網頁目錄下，然後將HTML檔
案開啟
4. 複製<style type="text/css">到</style>中間的語法貼到aspx網頁中</head>標籤上方
--======================================================================
<style type="text/css">
<!--
body {
margin:0;
padding:0;
font: bold 11px/1.5em Verdana;
}
h2 {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
color: #000;
margin: 0px;
padding: 0px 0px 0px 15px;
}
img {
border: none;
}
/*- Menu Tabs 10--------------------------- */
#tabs10 {
float:left;
width:100%;
font-size:93%;
border-bottom:1px solid #2763A5;
line-height:normal;
}
#tabs10 ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabs10 li {
display:inline;
margin:0;
padding:0;
}
#tabs10 a {
float:left;
background:url("tableft10.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs10 a span {
float:left;
display:block;
background:url("tabright10.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs10 a span {float:none;}
/* End IE5-Mac hack */
#tabs9 a:hover span {
color:#FFF;
}
#tabs10 a:hover {
background-position:0% -42px;
}
#tabs10 a:hover span {
background-position:100% -42px;
}
#tabs10 #current a {
background-position:0% -42px;
}
#tabs10 #current a span {
background-position:100% -42px;
}
-->
</style>
--======================================================================
5. 將<h2>Tab Menu 1</h2>底下的<div>...</div>這整段copy下來
6. 貼上vs(要貼在<form></form>中)
--======================================================================
<div id="tabs10">
<ul>
<!-- CSS Tabs -->
<!-------------重點是target="nohere" 這句, 將要連結的網頁顯示在指定的iframe中, nohere是下方iframe的名稱-->
<li><a href="http://google.com.tw" target="nohere"><span>GOOGLE</span></a></li>
<li><a href="http://www.pchome.com.tw" target="nohere"><span>PChome</span></a></li>
<li><asp:HyperLink ID="HyperLink1" runat="server"><span>請假單</span></asp:HyperLink></li>
<li><asp:HyperLink ID="HyperLink2" runat="server"><span>出差申請單</span></asp:HyperLink></li>
<li><a href="../Login.aspx"><span>News</span></a></li>
<li><a href="../Login.aspx"><span>About</span></a></li>
</ul>
</div>
--======================================================================
7. 頁簽內的文字要寫在<span><span>中
第二步:將頁簽崁入表單頁中
客戶的需求是在表單頁下方有一頁簽, 可以展示出屬與該表單頁的各樣Detail資訊
(ex.表單頁為訂單主檔, detail為訂單明細, 出貨記錄...等)
1. 執行第一步的步驟4, 將頁簽的css崁入, 貼在表單的html上方
2. 執行第一步的步驟5~7, 貼在表單的html下方
3. 在最下面貼上ifram(框架)語法
<iframe src="" name="nohere" width="100%" height="700" scrolling="yes" frameborder="0" id="here"></iframe>
(重點在於name="nohere", 表示頁簽連結頁要顯在此frame中)
4. 設定HyperLink的target和NavigatorUrl
在此頁.vb中, 設定HyperLink的target和NavigatorUrl
Me.HyperLink1.Target = "nohere"
Me.HyperLink2.Target = "nohere"
Me.HyperLink2.NavigateUrl = "../test/test.aspx"
文章定位：
