65.9K
CodeProject 正在变化。 阅读更多。
Home

简便的客户端 TabStrip

HoangKC
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.72/5 (27投票s)

2006年12月8日

CPOL

4分钟阅读

viewsIcon

57959

downloadIcon

514

一个丰富的客户端 TabStrip。

Sample Image - CoolTab.jpg

引言

TabMenu是几乎所有Web开发人员都必须处理的组件。在创建具有Visual Studio和组件工具的网站时，我很容易为设计创建一个精美且方便的TabMenu。那么，如何使用JavaScript创建具有类似功能的TabMenu，就像我们在ASP.NET中使用组件一样呢？然而，这是一个不同的故事。

本文旨在为用户提供一种最佳方法，以拥有一个功能最多、代码最少的TabMenu，特别是允许用户定义TabMenu将提供的功能。

Using the Code

所有用户只需将此代码行插入到他们想要TabMenu出现的位置

<div id="coolTab1" MultiPageID="Pages" SiteMap="tabData.xml" ImageUrl="images/"
ClientSideOnLoadCompleted="onLoadComplete" ClientSideOnClick="onClick"></div>

以及如下的脚本代码

window.onload = function() { arrTab = preInitCoolTab("coolTab1"); }

现在，我们将讨论TabMenu的参数

  • id：TabMenu的唯一标识符，此id将用于函数preInitCoolTab。

    请注意，如果需要，您也可以拥有多个标签。假设您有两个如上定义的div标签，它们的id分别为coolTab1和coolTab2，您只需将标签的id添加到函数preInitCoolTab中。

  • arrTab是包含所有返回的CoolTab对象的数组。
    arrTab = preInitCoolTab("coolTab1", "coolTab2");
// arrTab has 2 CoolTab objects. You can access them: arrTab[0] and arrTab[1]
  • MultiPageID：如果您想使用Tab来控制multiPage中包含的对象，每个标签项将指向一个页面，您只需将multiPage的id作为CoolTab的初始化参数。我使用每个div标签作为分隔符来分隔multiPage中的“页面”。
  • ImageUrl：用于CoolTab中的图像文件夹的链接
  • ClientSideOnLoadCompleted：以非同步方式工作的事件，当从XML文件读取数据的过程完成且CoolTab被渲染后，它将被触发。用户可以定义加载完成后要执行的函数。
  • ClientSideOnClick：当点击TabItem时出现的事件。同样，用户可以设计函数来控制当点击TabItem时将发生的操作。
  • SiteMap：在这里，我使用XML文件来创建CoolTab的TabItem。SiteMap显示XML文件的链接。XML文件中的信息将如下使用
    <Tabs>
    <TabItem ID="aspx" Text="ASPX File" LeftIcon="i_aspx.gif"
Selected="true" Enabled="true" Target="frame1" NavigatorUrl="google.com"/>
    <TabItem ID="xml" Text="XML File" LeftIcon="i_xml.gif"/>
    <TabItem ID="css" Text="CSS File" LeftIcon="i_css.gif"/>
    <TabItem ID="cs" Text="CS File" LeftIcon="i_cs.gif" />
    <TabItem ID="vb" Text="VB File" LeftIcon="i_vb.gif"/>
</Tabs>

让我们看一下第一个TabItem（对象）。最重要的属性已提供

  1. Selected = true/false：显示哪个默认TabItem最初被选中
  2. Enabled = true/false：显示此TabItem的状态
  3. NavigatorUrl：如果存在此属性，TabItem将有一个链接，并附带链接将在其中加载的目标。
  4. Target：显示链接的目标。此外，您可以定义附加属性，并且可以使用以下方式访问在XML文件中定义的属性。例如
    <TabItem ID="id" Text="text" LeftIcon="icon.gif" YourAttribute="Value"/>

    假设这是CoolTab（对象）的第一个TabItem

    Var oCoolTab = arrTab[0];
alert(oCoolTab.items[0].Keys["YourAttribute"]);

类成员

CoolTab 类

属性

  • DataSource：URL或XML文档的虚拟路径
  • items：TabItem的集合
  • MultiPage：保存被调用的多页面的ID
  • ImageBaseUrl：图像文件夹的虚拟路径
  • defaultCss：应用于当前TabItem的CSS的className
  • hoverCss：应用于当前TabItem的CSS的className
  • selectedCss：应用于当前TabItem的CSS的className
  • disabledCss：应用于当前TabItem的CSS的className

方法

  • DataBind：将数据源绑定到被调用的控件及其所有受控子项
  • AddItem：将新的TabItem添加到CoolTab中

    除了使用XML文件中的数据创建TabItem外，用户还可以使用CoolTab（对象）的AddItem函数在运行时创建其他项。

    Var oCoolTab = arrTab[0];
Var oTabItem = new TabItem();
//initialize(id, caption, selected, enabled, url, target, leftIcon, parent)
oTabItem.initialize("newTabItemID", "Caption", false, true,
"http://microsoft.com", "frame1", "nothing.gif", oCoolTab);
oCoolTab.AddItem(oTabItem);
  • FindTabItemById：通过其ID查找TabItem

事件

  • TabItemClickEvent：在点击CoolTab中的项时触发
  • LoadCompleteEvent：在CoolTab完成加载数据时触发

TabItem 类

属性

  • selected：此项是否被选中
  • enabled：此项是否启用
  • parent：对包含TabItem的CoolTab的引用
  • index：此项在CoolTab列表中的索引
  • target：目标
  • lnk：此项的navigatorUrl
  • label：显示文本

方法

  • SetEnabled：将项设置为启用或禁用模式

    以下示例将说明如何将CoolTab的第一个TabItem设置为禁用状态。

    Var oCoolTab = arrTab[0];
oCoolTab.items[0].SetEnabled(false);
  • ResetCss：将项的类名重置为默认值
  • Actived：TabItem处于激活模式
  • DeActived：TabItem处于非激活模式

事件

  • TabClickEvent：在点击TabItem时触发

历史

这是我的第一篇文章。如果您觉得有用，请投我一票。

附注：感谢Tuan NA先生提供的XML.js，以便在Mozilla浏览器中处理XML文件。
并感谢Nhung女士，我非常爱你。

© . All rights reserved.