• Статья
Веб-элемент управления TabStrip

В этой статье приводятся общие сведения об элементе управления TabStrip, являющемся одним из веб-элементов управления Windows Internet Explorer. Этот элемент управления упрощает создание меню с вкладками и особенно полезен при разработке элементов пользовательского интерфейса для навигации по содержимому сайта.

Элементы управления TabStrip и MultiPage можно синхронизировать так, чтобы содержимое элемента PageView отображалось при выборе пункта меню Tab. Эта возможность обеспечивает постраничное представление содержимого, не требующее навигации. Дополнительные сведения о совместном использовании этих элементов управления см. в обзоре элемента управления MultiPage.

Большинство интерфейсов, использующих элемент управления TabStrip, могут создаваться декларативно с помощью синтаксиса простой разметки. Элемент управления TabStrip также реализует клиентские и серверные объекты, обеспечивающие динамическое управление содержимым страницы с помощью сценариев в ASP.NET или Microsoft Internet Explorer 5.5 или более поздних версий.

Аналогично другим веб-элементам управления, элемент управления TabStrip использует расширения функциональности динамического HTML (DHTML) в браузерах более поздних версий. Для веб-элементов управления таким браузером является Internet Explorer 5.5 или более поздней версии.

Данный документ содержит следующие разделы.

  • Использование элемента управления TabStrip при разработке 
  • Объекты TabStrip 
    • Клиентское расширение функциональности 
    • Объекты ASP.NET 
  • Возможности 
  • Форматирование и настройка 
    • CSS 
    • Графика 
  • Примеры использования TabStrip 
    • Совместное использование TabStrip и MultiPage 
    • Использование TabStrip без MultiPage 
  • Связанные разделы

Использование элемента управления TabStrip при разработке

Общие требования и рекомендации по разработке приложений в ASP.NET с помощью веб-элементов управления см. в разделе Разработка веб-форм с использованием веб-элементов управления.

В ASP.NETлюбой элемент HTML на веб-странице может быть помечен как серверный элемент управления. Если элемент помечен как серверный элемент управления, ASP.NET производит его обработку на веб-сервере, подготавливая его для правильного отображения в определенном клиенте. В случае с веб-элементами управления веб-страницы, передаваемые в Internet Explorer 5.5, включают расширения функциональности DHTML и используют ряд расширенных возможностей браузера.

Элемент управления TabStrip поддерживает два различных способа разработки. Интерфейсы TabStrip могут быть реализованы в веб-формах ASP.NET с помощью элементов и объектов, предоставляемых серверными элементами управления TabStrip. Кроме того, интерфейсы TabStrip могут реализовываться в HTML-страницах с помощью расширения функциональности TabStrip. И в том, и в другом случае используется одинаковый набора элементов, но вследствие различий в архитектуре компонентов в ASP.NET и Internet Explorer 5.5 клиентская и серверная объектные модели немного различаются.

В общем случае, если клиентский браузер не известен, рекомендуется при разработке веб-форм ASP.NET использовать серверные элементы управления TabStrip. Такой подход позволяет обеспечить правильность отображения содержимого в наиболее распространенных браузерах. Так как элементы управления ASP.NET определяют тип браузера, содержимое, загружаемое в Internet Explorer 5.5, автоматически включает расширение функциональности TabStrip.

При создании содержимого специально для Internet Explorer 5.5 или более поздней версии рекомендуется использовать в веб-страницах клиентские сценарии в сочетании с расширением функциональности TabStrip. Таким образом загрузка будет происходить немного быстрее, так как обработка на стороне сервера не производится. Кроме того, веб-страницы, использующие расширение функциональности TabStrip, более удобны для пользователей, так как не требуют выполнять круговые пути к серверу.

Объекты TabStrip

При реализации элемента управления TabStrip могут использоваться следующие элементы.

Клиентское расширение функциональности ASP.NET Описание
TabStrip TabStrip Элемент-контейнер для других элементов TabStrip.
Tab Tab Определяет вкладку внутри элемента управления TabStrip.
TabSeparator TabSeparator Определяет разделитель между двумя соседними элементами управления Tab.

Ссылки на полный набор справочной документации по клиентским и серверным объектам, реализуемым элементом управления TabStrip, см. в справке по элементу управления TabStrip. Справочная документация разделена на страницы, посвященные клиентским и серверным объектам. Клиентские объекты предоставляются расширением функциональности TabStrip. Сведения об объектах ASP.NETприводятся на отдельных страницах.

В следующих двух разделах рассматриваются основные различия между клиентскими и серверными объектами, предоставляемыми элементом управления TabStrip.

Клиентское расширение функциональности

Модель COM в Internet Explorer 5.5 и более поздних версиях позволяет определять пользовательские XML-элементы. Эти пользовательские элементы называются расширениями функциональности элементов. Расширение функциональности элемента может определяться с помощью файла HTC, который содержит сценарий, определяющий поведение пользовательского элемента.

При этом компонент сценария может определять поведение только одного элемента. Однако, как было показано в предыдущем разделе, пользовательский интерфейс элемента управления TabStrip реализуется с помощью элементов трех различных типов. Поэтому, поскольку реализация расширения функциональности TabStrip использует единственный файл HTC, дочерние элементы TabStrip создаются как текстовое содержимое пользовательского элемента TabStrip.

В реализации расширения функциональности TabStrip сценарий, содержащийся в файле HTC, анализирует элементы с текстовым содержимым внутри элемента управления TabStrip и формирует соответствующий пользовательский интерфейс с использованием DHTML. Такой подход позволяет создавать элементы нескольких различных типов и задавать для них сценарии с помощью одного расширения функциональности элемента.

Сценарии для объектов, предоставляемых поведением TabStrip, могут создаваться на языках Microsoft JScript или Microsoft Visual Basic Scripting Edition (VBScript).

Объекты ASP.NET

В отличие от расширений функциональности DHTMLэлементы управления ASP.NET могут реализовывать любое необходимое число пользовательских элементов в одной сборке. В случае с веб-элементами управления все элементы ASP.NET реализуются в сборке Microsoft.Web.UI.WebControls.dll. Имя файла этой сборки совпадает с именем пространства имен, используемого этими элементами управления.

Поэтому архитектура компонентов платформы ASP.NET не требует использования элементов с текстовым содержимым. Для управления объектами TabStrip в веб-форме ASP.NETможно использовать любой язык CLR.

Возможности

Элемент управления TabStrip обеспечивает широкий набор возможностей.

  • Текстовые вкладки
    Используются, если разработчику необходимо сосредоточиться только на текстовом содержимом вкладок. Пользовательский интерфейс предоставляется автоматически. Дополнительные сведения см. в разделе CSS.
  • Графические вкладки
    Используются, если разработчику необходим частичный или полный контроль над пользовательским интерфейсом. Элемент управления поддерживает использование графических элементов внутри вкладок и элементов-разделителей. Дополнительные сведения см. в разделе Графика.
  • Ориентация
    Выравнивание элементов Tab в TabStrip может определяться значением свойства Orientation.

Форматирование и настройка

Даже при простом декларативном создании элемент управления TabStrip отображается с использованием приемлемых стилей по умолчанию. Однако внешний вид элемента управления TabStrip можно настраивать различными способами. Элементы управления внутри TabStrip имеют три основных состояния.

  • По умолчанию
    Состояние по умолчанию используется, если вкладка не выделена и на нее не наведен указатель мыши. Стили CSS для данного состояния определяются с помощью свойства TabDefaultStyle.
  • Выделение
    Если элемент управления Tab выделен, к нему применяется стиль TabSelectedStyle.
  • Наведение указателя
    При наведении указателя мыши на элемент управления применяется стиль TabHoverStyle.

В следующем разделе рассматривается способ настройки внешнего вида элементов управления TabStrip в соответствии с их состоянием с помощью CSS.

CSS

Свойства форматирования CSS обеспечивают удобный способ настройки внешнего вида элемента управления TabStrip. Для настройки внешнего вида необходимо просто определить свойства для элементов TabStrip. При этом для обновления отрисовки страниц не требуется написание сценариев. В следующих примерах демонстрируется использование различных свойств для настройки внешнего вида элемента управления TabStrip.

В данном элементе управления TabStrip каждый элемент Tab отображается как сплошной блок.

<ie:TabStrip id="ts1" runat="server"

   TabDefaultStyle="background-color:#000000;font-family:verdana;

   font-weight:bold;font-size:8pt;color:#ffffff;width:79;height:21;

   text-align:center"

   TabHoverStyle="background-color:#777777"

   TabSelectedStyle="background-color:#ffffff;color:#000000">

<ie:Tab Text="Home"/>

<ie:Tab Text="About us"/>

<ie:Tab Text="Products"/>

<ie:Tab Text="Support"/>

<ie:Tab Text="Contact us"/>

</ie:TabStrip>

В данном элементе управления TabStrip к каждому элементу Tab применяется плоский контурный стиль.

<ie:TabStrip id="ts1" runat="server"

   TabDefaultStyle="color:#aaaaaa;background-color:#EEEEEE;

   border-color:#AAAAAA;border-width:1px;border-style:Solid;

   font-weight:bold;font-family:Verdana;font-size:11px;height:21;

   width:79;text-align:center;"

   TabHoverStyle="color:blue"

   TabSelectedStyle="color:#000000;background-color:#FFFFFF;

   border-bottom:none"

   SepDefaultStyle="background-color:#FFFFFF;border-color:#AAAAAA;

   border-width:1px;border-style:solid;border-top:none;border-left:none;

   border-right:none">

<ie:Tab Text="Home"/>

<ie:Tab Text="About us"/>

<ie:Tab Text="Products"/>

<ie:Tab Text="Support"/>

<ie:Tab Text="Contact us"/>

</ie:TabStrip>

Обратите внимание, что во втором примере также используется свойство SepDefaultStyle, обеспечивающее контурное отображение всех элементов управления Tab.

Как видно в предыдущем примере, одновременно можно определить несколько стилей. Кроме того, имеется возможность динамического изменения стилей, как показано в следующем примере.

<script language="C#" runat="server">

void Page_Load(Object sender, EventArgs e)

{

     myTab.BorderColor=Color.Black;

     myTab.DefaultStyle.Add("background","white");

}

</script>

<body>

    <form id="debug" runat="server" autopostback="true">

        <ie:TabStrip id="myTab" runat="server">

            <ie:Tab Text="Home"/>

            <ie:Tab Text="About us"/>

            <ie:Tab Text="Products"/>

            <ie:Tab Text="Contact us"/>

        </ie:TabStrip>

    </form>

</body>

Графика

Вместо CSS для настройки внешнего вида элемента управления TabStrip можно использовать графические элементы. В следующем примере для настройки пользовательского интерфейса TabStrip используются свойства изображения. Такой способ обеспечивает более гибкие возможности по сравнению со стилями CSS.

<ie:TabStrip id="ts1" runat="server"

    SepDefaultImageUrl="pipe.gif"

    SepSelectedImageUrl="pipe_clear.gif">

    <ie:TabSeparator DefaultImageUrl="cap_left.gif" SelectedImageUrl="cap_left_sel.gif"/>

    <ie:Tab selectedimageurl="home_hot.gif" defaultimageurl="home_cold.gif"/>

    <ie:TabSeparator/>

    <ie:Tab selectedimageurl="books_hot.gif" defaultimageurl="books_cold.gif"/>

    <ie:TabSeparator/>

    <ie:Tab selectedimageurl="magazines_hot.gif" defaultimageurl="magazines_cold.gif"/>

    <ie:TabSeparator/>

    <ie:Tab selectedimageurl="online_hot.gif" defaultimageurl="online_cold.gif"/>

    <ie:TabSeparator DefaultImageUrl="cap_right.gif" SelectedImageUrl="cap_sel.gif"/>

</ie:TabStrip>

Примеры использования TabStrip

В этом разделе приведены некоторые полезные примеры использования элемента управления TabStrip как вместе с элементом управления MultiPage, так и без него.

Совместное использование TabStrip и MultiPage

Элемент управления TabStrip часто используется в сочетании с элементом управления MultiPage. В следующем примере для создания элементов пользовательского интерфейса, представляющих параметры навигации, используется элемент управления TabStrip, а для создания содержимого каждой вкладки — элементы MultiPage.

В следующем фрагменте кода демонстрируются основные элементы разметки, используемые для создания данного пользовательского интерфейса. Большинство атрибутов стиля и макета удалены для наглядности.

<%@ Import Namespace="Microsoft.Web.UI.WebControls" %>

<%@ Register TagPrefix="mytab"

Namespace="Microsoft.Web.UI.WebControls"

Assembly="Microsoft.Web.UI.WebControls, Version=1.0.2.226, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>

<head>

</head>

<body>

<form runat="server">

<table>

<tr>

<td>

<mytab:TabStrip id="tsVert" runat="server" TargetID="mpVert" Orientation="Vertical">

    <mytab:Tab Text="Inbox"/>

    <mytab:TabSeparator/>

    <mytab:Tab Text="Compose"/>

    <mytab:TabSeparator />

    <mytab:Tab Text="Addresses"/>

    <mytab:TabSeparator DefaultStyle="height:100%"/>

</mytab:TabStrip>

</td>

<td valign=top><mytab:MultiPage id="mpVert" runat="server">

    <mytab:PageView>

        <table>

        <tr>

                 <td> </td>

                 <td>From</td>

                 <td>Subject</td>

                 <td>Date</td>

         </tr>

.

. (место для вставки остальных строк таблицы)

.

        </table>

    </mytab:PageView>

    <mytab:PageView>

        <table>

        <tr>

                 <td>To:</td>

                 <td><asp:textbox runat="server"/></td>

        </tr>

.

. (место для вставки остальных строк таблицы)

.

        </table>

        <asp:TextBox runat="server" rows=5 columns=30 textmode=multiline/>

    </mytab:PageView>

    <mytab:PageView>

        <table>

        <tr>

                 <td> </td>

                 <td>Name</td>

                 <td>E-mail</td>

         </tr>

        <tr>

                 <td><asp:checkbox runat="server" /></td>

                 <td>me</td><td>me@treyresearch.com</td>

         </tr>

.

. (место для вставки остальных строк таблицы)

.

        </table>

    </mytab:PageView>

</mytab:MultiPage>

</td>

</tr>

</table>

</form>

</body>

Так же как и в случае с другими веб-элементами управления, пользовательский интерфейс TabStrip можно легко настроить путем задания значений атрибутов. На следующем рисунке представлен немного измененный пользовательский интерфейс. Это изменение было достигнуто путем присвоения атрибуту Orientation элемента TabStrip значения vertical.

Использование TabStrip без MultiPage

В следующих примерах демонстрируется использование элемента управления TabStrip отдельно от MultiPage. В этом примере для управления переходами на другие веб-страницы используется свойство SelectedIndex.

<%@ Import

 Namespace="Microsoft.Web.UI.WebControls" %>

<%@ Register TagPrefix="mytab"

Namespace="Microsoft.Web.UI.WebControls"

Assembly="Microsoft.Web.UI.WebControls, Version=1.0.2.226, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>

<script runat="server">

 protected void myTabStrip_OnSelectedIndexChange(object sender, EventArgs e)

 {

  switch (myTabStrip.SelectedIndex)

  {

  case 0:

   Page.Navigate("/myweb/about.htm");

   break;

  case 1:

   Page.Navigate("/myweb/intranet/resources/default.aspx");

   break;

  }

 }

</script>

<myns:TabStrip runat="server"

 ID="myTabStrip"

 Orientation="Horizontal"

 AutoPostback="true">

<myns:Tab Text="About Us" ID="tabAbout"/>

<myns:TabSeparator/>

<myns:Tab Text="Resources" ID="tabResources"/>

</myns:TabStrip>

Связанные разделы