网页选项卡控件

分享于 

15分钟阅读

Web开发

  繁體

更新:能够记住所选标签 ! 请参见下面的C# 代码 !

更新:jQuery使用- 现在允许为标签转换设置( 来自 C# ) 动画。

更新:使用HTML5和CSS3带来体面的边框和圆角- 它现在看起来更好了:。

介绍

最近我开发一个网站,从许多来源提取大量信息,并将它的整理到网站上的一个帐户。 但是,每当( s ) 喜欢的时候,所有的信息都必须由用户编辑。 此外,网站的一个关键目标是易于使用和信息清晰。 因这里,我有一个困难,如何允许用户轻松而清晰地编辑他们的所有信息,而没有一个长页。 显而易见的解决方案是使用选项卡控件,但是在网络上已经没有可用的东西了。 我在本文中创建了自己的自定义web控件,希望它的他人能够很容易地设置和使用。

背景

如果你知道基本 CSS。HTML。JavaScript,至少对如何在 C# 中创建动态内容很有帮助,那可能很有用。 我建议以下链接是好的起点:

使用代码

屏幕快照

选项卡控件的初始视图- 基本选项卡

选项卡控件的个人选项卡

单击测试按钮后,基本选项卡上的文本框设置为"is"。 :)''

我们将介绍如何使用服务器端代码来构建页面,以展示代码的工作原理。 代码如下所示:

//Create a tab controlTabControl TheTabCtrl = new TabControl("InfoTabCtrl");//Block: Create and add a new tab page - BasicPageTabPage BasicPage = new TabPage("BasicInfoTabPage", "Basic");
BasicPage.Controls.Add(ABox);
TheTabCtrl.Tabs.Add(BasicPage);//End Block//Block: Create and add a new tab page - PersonalPageTabPage PersonalPage = new TabPage("PersonalInfoTabPage", "Personal");
Button AButton = new Button();
AButton.Text = "Test";
AButton.Click += new EventHandler(AButton_Click);
PersonalPage.Controls.Add(AButton);
TheTabCtrl.Tabs.Add(PersonalPage);//End Block//Add the tab control to the page output.form1.Controls.Add(TheTabCtrl.GetControl);

第一行代码创建一个名为 TheTabCtrl的新标签控件。 构造函数采用一个参数,Id。 这应该是选项卡控件的唯一 is,因为它在 JavaScript ( 在本文的后面) 中用来跟踪选定的选项卡。 然后可以使用 TheTabCtrl 添加选项卡页并生成选项卡控件输出。

接下来,代码创建一个新的TabPage。 选项卡页面的构造函数接受两个参数,第一个参数是选项卡页的惟一标识,这在 JavaScript ( 在本文的后面) 中用来更改当前显示的选项卡。 第二个参数是选项卡的NAME。 这就是标签标题显示用户时的情况。 在这种情况下,我选择了'基本'作为标题,因为它是我所需要的网站类别之一。

将控件添加到选项卡非常简单,如下一行所示。 所需的只是调用 ATabPage.Controls.Add。 可以添加从 System.Web.UI.Control 类派生的任何对象,这包括所有的WebControlsHtmlControlsControls Collection 只是一个 Control 对象的List,稍后会添加到标签中。
代码的下一个 block 只添加另一个选项卡页面,使用按钮来演示选项卡控件的工作方式。

最后一行代码将选项卡控件添加到页中。 我决定不从 System.Web.UI.Control 类派生 TabControl 类,因为它将重写更多的方法,比我需要的更多。 相反,我创建了一个属性,GetControl 返回一个可以添加到页面任何部分的WebControl。 在选项卡页中,如果在任何选项卡页中使用控件,则必须在 Page_Load 方法中添加 TabControl。这样,控件的事件将被添加到方法中。GetCotnrol 属性代码类似如下:

public WebControl GetControl
{
 get {
 WebControl TabCtrlWrapper = new WebControl(HtmlTextWriterTag.Div);
 TabCtrlWrapper.CssClass = ClassName;
 TabCtrlWrapper.ID = Id;
 TabCtrlWrapper.Controls.Add(TabSelectionControl);
 foreach (TabPage APage in Tabs)
 {
 TabCtrlWrapper.Controls.Add(APage.GetControl);
 }
 Literal BreakLit = new Literal();
 BreakLit.Text = "<div style="width:100%; float:none; 
 line-height:0px;"> <script type="text/javascript">" + 
 CreateChangeTabCall(Tabs[SelectedTab].Id) + "</script></div>";
 TabCtrlWrapper.Controls.Add(BreakLit);
 return TabCtrlWrapper;
 }
}

代码首先创建一个 WebControl,final 控件,将返回它,并设置它的IdCssClass。 在构造函数中给出 IdCssClass 默认设置为 ClassName,默认情况下设置为'TabControl'。 这里链接指向提供了标签控件样式的CSS文件。 然后,代码添加 TabSelectionControl ( 查看更多详细信息)。 这里控件允许用户选择不同的选项卡。 然后,枚举所有选项卡页,并将它们的控件( 稍后查看) 添加到 final 控件。 最初,这些页面都有 display:none; 来从用户处隐藏它们。 循环后的代码 block 添加一个 div,以空格强制 TabControl 高度,包括选项卡页和 TabSelectionControl。 如果不包含浮动子元素,但浮动子元素的高度很复杂,那么CSS和float的一个怪癖就是它的父元素,而非浮动子元素,这是非常简单的。 line-height 被设置为 0,以隐藏 div的内容,并使它的似乎不存在。 JavaScript代码在标签控件加载时运行,因此设置了最初选中的选项卡。 这可以通过设置 SelectedTab 属性来更改服务器端,这只是控件 List 中选项卡的标签的索引。

选项卡选择控件

创建构成选项卡选择节的网页控件。 这里代码枚举所有选项卡,为显示选项卡的NAME的每个选项卡添加一个单独的'按钮区域'。 每个'按钮区域'都有一个 onclick 事件,它运行更改标签的JavaScript代码。

WebControl TheCtrl = new WebControl(HtmlTextWriterTag.Div);
TheCtrl.CssClass = "TabPageSelectionControl";//Enumerate all tabs, adding a 'button area' for each one.foreach (TabPage ATab in Tabs)
{
 //Create the web control that will be the 'button area' WebControl TabCtrl = new WebControl(HtmlTextWriterTag.Div);
 TabCtrl.CssClass = "TabPageSelectionTitle";
 //Add the onclick attribute using the (custom) //CreateChangeTabCall method with the relevant TabId. TabCtrl.Attributes.Add("onclick", CreateChangeTabCall(ATab.Id));
 TabCtrl.Attributes.Add("style", "background-color:;");
 TabCtrl.ID = ATab.Id + "TitleCtrl";
 //Add a literal to display the name of the tab. Literal NameLit = new Literal();
 NameLit.Text = ATab.Name;
 TabCtrl.Controls.Add(NameLit);
 //Add the button area to the selection control. TheCtrl.Controls.Add(TabCtrl);
}return TheCtrl;
TabPage控件控件

将标签页的标题添加到选项卡页控件中,然后在 Controls 集合中添加由用户指定的所有控件。

WebControl TabPageWrapper = new WebControl(HtmlTextWriterTag.Div);
TabPageWrapper.CssClass = ClassName;
TabPageWrapper.ID = Id;
TabPageWrapper.Attributes.Add("style", "display:none;");
TabPageWrapper.Controls.Add(TitleCtrl);foreach (Control ACtrl in Controls)
{
 TabPageWrapper.Controls.Add(ACtrl);
}return TabPageWrapper;
要选择的最后一个用户选项卡的代码:
if (IsPostBack)
{
 //Gets the selected tab's Id from the posted formstringvalue = Request.Form[TheTabCtrl.Id + "_SelectedTab"];
 //Checks to make sure it's not an empty/null Id i.e. there actually wasn't one selected.if(!string.IsNullOrEmpty(value))
 {
 try {
 //Tries to selected the tab with that Id.//Try-catch used in case that tab no longer exists. TheTabCtrl.SelectedTab = TheTabCtrl.Tabs.IndexOf(TheTabCtrl.Tabs.Where(x => x.Id == value).First()); 
 }
 catch {
 }
 }
} 

使用JavaScript的新位,你现在可以从表单后面的选项卡控件中获取最后选定的选项卡。 有关如何:),请参见 上面 代码。

客户端脚本

我已经展示了所有服务器端的工作原理,但是客户端是如何工作的。 我将从JavaScript开始,然后解释如何更改样式。 JavaScript代码非常简单,看起来像这样:

var CurrentTabs = [];//The colour of the tab selector when selectedvar SelectedBgColour = "#C7E9FF";//The colour of the tab selector when not selectedvar NotSelectedBgColour = "#99C8E8";//Changes a tab control to a different tab using wanted jQuery effects//TabControlName - The name of the tab control you are changing//Id - The (full) Id of the tab to change to//EffectIn (Opt) - The effect to use for bringing in the new tab. Default : fade//EffectOut (Opt) - The effect to use for taking out the current tab. Default : fade//Speed (Opt) - How long the transition should take (in milliseconds) : Default : 300function ChangeTab(TabControlName, Id, EffectIn, EffectOut, Speed)
{
 //If not already showing the current tabif (CurrentTabs[TabControlName]!= Id)
 {
 //Set-up the default values if necessary//JS allows testing for null/undefined by just evaluating the object as a booleanif (!EffectIn)
 EffectIn = "fade";
 if (!EffectOut)
 EffectOut = "fade";
 if (!Speed)
 Speed = 300;
 if (CurrentTabs[TabControlName]!= null)
 {
 $("#" + CurrentTabs[TabControlName])
. hide(EffectOut, { direction: "vertical" }, Speed, null);
 $("#" + CurrentTabs[TabControlName] + "TitleCtrl")
. animate({ backgroundColor: NotSelectedBgColour }, Speed);
 } 
 //Resizes the tabs wrapper to fit the new tab $("#" + Id)
. parent()
. css("height", $("#" + Id)
 //Shows the current tab then gets its outer height including margins. show(EffectIn, {}, Speed, null)
. outerHeight(true));
 //Changes the new tab's title control bgColour to selected $("#" + Id + "TitleCtrl").animate({ backgroundColor: SelectedBgColour }, Speed);
 //Stores the new tab as being the current tab (for page submission) CurrentTabs[TabControlName] = Id;
 //Stores the new tab in the form data for postback $("#" + TabControlName + "_SelectedTab").val(Id);
 }
}
$(document).ready(function ()
{
 //Set all the title control backgrounds to the not selected colour//Saves having to write it in two places i.e. the CSS and the JavaScript $(".TabPageSelectionTitle").css("background-color", NotSelectedBgColour);
}); 

CurrentTabs 跟踪在哪个选项卡控件上选择哪个选项卡。 使用 array,以便在不冲突的同一页上可以使用多个tab控件。

SelectedBgColour 是选定选项卡的标签标题的颜色代码或者 NAME,选中时应该具有标签。

ChangeTab 方法获取当前选定的选项卡( 如果有的话),隐藏它,然后显示所需的选定选项卡。 它也会更改相关样式( 请参见上方),然后存储新的选中标签。 代码是自解释的。

样式设置

除了选中的标签 background 颜色的标题之外,所有样式都是在一个简短的CSS文件中完成的。 就像 below ( 在CSS的注释中解释) 所示,很容易改变 TabControl的外观。 我已经选择了极它的简单的颜色,比较严重,以显示选项卡控件的部分是什么。 那么,CSS:

.TabControlTabsWrapper{
 position:relative;width:100%;height:100%;overflow:hidden;/*Set this to change the tab background colour - this is a very light blue - off-white
 almost*/background-color:#FAFDFF;border:solid #000000;border-width:medium;border-bottom-left-radius:10px;border-bottom-right-radius:10px;-moz-border-bottom-left-radius:10px;/* Firefox 3.6 and earlier */-moz-border-bottom-right-radius:10px;/* Firefox 3.6 and earlier */} 
.TabPageSelectionTitle{
 float:left;padding:2px;padding-left:4px;padding-right:4px;border-right:2px solid #000000;border:solid #000000;border-width:medium;border-bottom:0px;border-top-left-radius:10px;border-top-right-radius:10px;-moz-border-top-left-radius:10px;/* Firefox 3.6 and earlier */-moz-border-top-right-radius:10px;/* Firefox 3.6 and earlier */} 

不是所有的CSS,而是有用的比特- 这些设置了边框的边框和角。 我意外地在标签右上角留下了一个方角,我觉得它们两个相对比较好,它也反射了另一边。

历史记录

  • 7/5/2011 - 初始帖子
  • 22/5/2012 - jQuery和 html5/css3更新

WEB  控制  tab  
相关文章