VS 2005中如何实现ASP.NET 1.x中的Tabstrip和Mutipage

最新推荐文章于 2024-09-19 20:58:21 发布

MicrosoftCenterOfHN

最新推荐文章于 2024-09-19 20:58:21 发布

阅读量2k

点赞数 1

分类专栏：技术类文章标签： asp.net menu dropdown server border filter

技术类专栏收录该内容

3 篇文章 0 订阅

订阅专栏

首先是，在VS 2005中直接使用Tabstrip和Mutipage是不行的。iewc,这个IE Web Controls已经不是绑定到VS 2005中的。要想实现Tabstrip和Mutipage，可以使用ASP.NET 2.0中的Menu和MutiView，View来变通实现，这可能就是替代品吧，它的具体使用如下：

第一个解决方案：

第二个解决方案：

直接用Menu模拟，几个外国朋友提供了下面的方法，老外在论坛里比较正规，没那么费话，会的就好好给你答，不会的也不发垃圾，很简单的E文，不再翻译。

（1）

There is no TabStrip control out from the box, you have to create one by your own. You can for example use the Menu control to create Tabs:

<asp:Menu
                        ID=Menu1
                        Orientation=Horizontal
                        runat=server
                        DataSourceID="dsSiteMap"
                        Width=100%
                        MaximumDynamicDisplayLevels="0"
                        OnDataBound="Menu1_DataBound">

                        <StaticMenuItemStyle
                            CssClass=cssMenuCell
                            ItemSpacing=0px
                        />
                        <StaticHoverStyle
                            CssClass=cssMenuCellHover
                        />
                        <StaticSelectedStyle
                            CssClass=cssMenuCellSelected
                            ItemSpacing=0px
                        />
   </asp:Menu>

（2）

I used the menu control to create a tab strip that looks exactly like a tab strip - with only CSS. Set the A:Selected property in the CSS to display the tab most recently selected a different color. The A:Hover can be used to change the appearance when hovering over the button.

Below is the code to make the menu control look like a tab strip:

<asp:Menu SkinId="TabSkin" DynamicHorizontalOffset="0" runat="server" Orientation="Horizontal" SubStatidMenuIndent="0px">
        <StaticMenuItemStyle CssClass="tabItem" />
        <StaticSelectedStyle CssClass="tabSelected" />
        <StaticHoverStyle CssClass="tabHover" />
        <StaticMenuStyle CssClass="tab" />
    </asp:Menu>

/* Menu control that looks like a tab strip */
.tab, .tabItem
{
font-family:Verdana,Arial,Helvetica;
font-size: 8pt;
font-weight:normal;
text-decoration: none;
}
.tab
{
padding: 15px 1px 0px 0px;
text-align: center;
}
.tab a:link, .tab a:visited, .tab a:hover
{
text-decoration: none;
color:#333333;
}
.tabPage   /* If the area beneath the tab strip needs to have a box defined, use this style in the <td> */
{
border: solid 1px #c0cbb6;
vertical-align:top;
}
.tabItem
{
padding: 3px 3px 3px 3px;
border-top: solid 1px gainsboro;
border-left: solid 1px gainsboro;
border-right: solid 1px darkgray;
border-bottom: solid 1px #F7F6F3;
background-color: #F7F6F3;
}
.tabSelected
{
border-style: outset;
border-bottom: solid 1px #ccd9c0;
background-color: #eae9e1;
}
.tabHover
{
border-style: outset;
border-bottom: solid 1px #ccd9c0;
background-color: #d8e1ce;
}

If you use the filter command in the class, you can create a gradient look - but it only works in IE:
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#eae9e1, EndColorStr=#F7F6F3);

I was so pleased with the flexibility of the tab control, I also used it to create pushbuttons with a hover effect and with a dropdown menu. For example, I created a 'Reports' button with an arrow and a dropdown list of selections.

（3）

I have had the same problem and use the following solution:

1) Create images for the Tabstrip (one for active and one for inactive state of the tab)
2) Create a class i.e. TabStripButton which derives from ImageButton and add some code like this

private

string activeImageUrl;
private bool active;

[

Category("Layout"),
EditorAttribute(typeof(System.Web.UI.Design.UrlEditor), typeof(UITypeEditor))]
public string ActiveImageUrl
{
get { return activeImageUrl; }
set { activeImageUrl = value; }
}

public

bool Active
{
get { return active; }
set { active = value; }
}

protected override void Render(HtmlTextWriter output)
{
   if (active)
      ImageUrl = activeImageUrl;
   base.Render(output);
}

3) Bind an eventhandler to the click event of The TabStripButton. Then you can change the state (active/inactive) of the TabStripButton and switch to the wanted View of the MultiView.

第三个解决方案：（用的繁体，莫非是港澳台同胞）

1、首先要安裝IEWebControl

2、因為VS2005如果你不為新建的網站指定虛擬目錄的話，它為隨機分配一個端口號給你運行，因為TabStrip和

MutilPate要調用C:/Inetpub/wwwroot/webctrl_client/1_0目錄下的Script方法，如果不指定虛擬目錄就找不到這些Script寫的方法

下面是解決方法

為用VS2005指定虛擬目錄

一、在項目管理器中右擊鼠標然后點擊屬性（有图片的，这里不贴了，我自己写）,弹出对话框，在左边的树中选择“启动选项”,在服务器框中如下设置：

选择使用自定义服务器，基URL设置为 http://localhost/网站所在文件夹/

這樣TabStrip和MutilPage就可以調用C:/Inetpub/wwwroot/webctrl_client/1_0目錄下的Script方法了

這樣就跟在VS2003的效果一樣，其它設置跟在VS2003下面一樣。

以下是供參考的HTML代碼

< iewc:TabStrip ID ="TabStrip1" runat ="server" style ="FONT-WEIGHT: bold" Height ="35px" CssClass ="font"

Width ="46%" ForeColor ="SteelBlue" TabSelectedStyle ="border:solid 1px Blue;border-bottom:none;padding-left:5px;padding-right:5px;" TabHoverStyle ="color:red"

TabDefaultStyle ="border:solid 1px Blue;padding-left:5px;padding-right:5px;" TargetID ="MultiPage1" SepDefaultStyle ="border-bottom:solid 1px Blue;" >

< iewc:Tab Text ="存款試算" />

< iewc:TabSeparator />

< iewc:Tab Text ="貸款試算" />

< iewc:TabSeparator />

< iewc:Tab Text ="Tab 3" />

< iewc:TabSeparator />

</ iewc:TabStrip >