最近在写人力资源数据库,想使用TabStrip,即属性页。在网上搜索了一下,找到了这个http://blogs.vertigosoftware.com/alanl/archive/2006/08/14/Atlas_TabStrip.aspx
(上面有代码和效果演示)
http://blogs.vertigosoftware.com/files/alan/atlastabstrip2.zip 代码下载
做出来效果不错,因为是英文,并且有一点bug,我边翻译边指出问题。
注:他使用的是atlas版本比较早,现在下载下来的atlas可能代码稍稍不同,不影响使用和说名(如:他的代码<atlas:ScriptManager ID="ScriptManager1" ,现在新版本atlas是<asp:scriptmanager/></scriptmanager />
第一步:创建ScriptManager,直接拖过控件来,或者写代码
<atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true">
<Scripts>
<atlas:ScriptReference Path="scripts.js" />//脚本的路径
</Scripts>
</atlas:ScriptManager>
第二步:创建UpdatePanel,直接拖过控件来,或者写代码
<atlas:UpdatePanel ID="TabsUpdatePanel" runat="server" Mode="Conditional">
</atlas:UpdatePanel>
第三步:编辑内容模版
<ContentTemplate>
<div id="Tabs" runat="server">
<asp:LinkButton ID="FirstTab" CommandArgument="0" runat="server" Text="First Tab"
OnClick="Tab_Click" OnClientClick="selectTab(this)" />
<asp:LinkButton ID="SecondTab" CommandArgument="1" runat="server" Text="Second Tab"
OnClick="Tab_Click" OnClientClick="selectTab(this)" />
<asp:LinkButton ID="ThirdTab" CommandArgument="2" runat="server" Text="Third Tab"
OnClick="Tab_Click" OnClientClick="selectTab(this)" />
<asp:LinkButton ID="FourthTab" CommandArgument="3" runat="server" Text="Fourth Tab"
OnClick="Tab_Click" OnClientClick="selectTab(this)" />
</div>
</ContentTemplate>
Tab_Click是后台处理点击的函数。selectTab(this)" 是第一步中脚本中的函数,功能是改变tab表签的样式
第四步:创建UpdatePanel,直接拖过控件来,或者写代码
<atlas:UpdatePanel ID="TabsUpdatePane2" runat="server" Mode="Conditional">
</atlas:UpdatePanel>
第五步:使用MultiView,代码如下
<ContentTemplate>
<div class="tabpane">
<atlas:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<div id="updateprogress">
loading...
<img src="loader.gif" />
</div>
</ProgressTemplate>
</atlas:UpdateProgress>
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
<asp:View ID="View1" runat="server">
若干文字!!
</asp:View>
<asp:View ID="View2" runat="server">
若干文字!!
</asp:View>
<asp:View ID="View3" runat="server">
若干文字!!
</asp:View>
<asp:View ID="View4" runat="server">
<h3>View 4</h3>
</asp:View>
</asp:MultiView>
</div>
</ContentTemplate>
第六步:写后台代码
protected void Page_Load(object sender, EventArgs e)
{
//create server load time for update progress.
//TODO: Remove! This is for testing purposes only.
if (ScriptManager1.IsInPartialRenderingMode)
{
System.Threading.Thread.Sleep(400);//可以看到progress效果,就是个时间延迟
}
}
protected void Tab_Click(object sender, EventArgs e)
{
LinkButton linkbutton = (LinkButton)sender;//传入被点击的linkbutton
MultiView1.ActiveViewIndex = int.Parse(linkbutton.CommandArgument);//切换视图
SetSelectedStyle(linkbutton);//改变视图样式
}
private void SetSelectedStyle(LinkButton selected)//改变视图样式
{
//clear the selected style for all the tabs
foreach (Control control in Tabs.Controls)
{
if (control is LinkButton)
((LinkButton)control).Attributes.Remove("class");
}
selected.Attributes.Add("class", "selected");
}
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = ((Button)sender).ID + " clicked. You've typed " + TextBox1.Text;
}
ok!,属性页制作好了!下面说说缺点。
在使用master(母版)页面中会出现错误!我分析一下原因,避免各位劳费心神
first!。。第一步:javascript错误
function pageLoad(){
selectTab($('FirstTab'));
}
function selectTab(sender){
var tabsElement = $('Tabs');
var childElement;
//clear styles for exisiting tabs
for (var i = 0; i < tabsElement.childNodes.length; i++){
childElement = tabsElement.childNodes[i];
if (childElement.id) {childElement.className = "";}
}
sender.className = "selected";
}
这是js代码,作用是当页面加载时默认讲第一个firsttab样式改成被选择的样式;当linkbutton被
点击时改变被点击linkbutton的样式。不过我们知道,如果使用母版页,所有内容中的控件名称
会进行前缀的变化,当然我们可是使用this.control.ClientID得到真实的ID名称,不过java功底太
浅,始终不能让selectTab正常工作!
来
我们来look look
protected void Tab_Click(object sender, EventArgs e)
{
LinkButton linkbutton = (LinkButton)sender;//传入被点击的linkbutton
MultiView1.ActiveViewIndex = int.Parse(linkbutton.CommandArgument);//切换视图
SetSelectedStyle(linkbutton);//改变视图样式
}
刚才说过这个是linkbuton响应点击的事件,很奇怪原作者在这里也写函数SetSelectedStyle功能和js中
一样,在母版中也不会出现问题。我们当然使用这个,而把js代码删掉。
这样tab页面在master中不会出现js错误了!,不过你肯定会发现,css中定义页面样式根本不起作用,
好假,好丑陋的tabSheet。
既然css不起作用,我们看看样式表怎么定义的,
/* Tabs */
div#Tabs a {
display:inline;
float:left;
position:relative;
width:100px;
margin:0;
margin-right: 10px;
padding:3px 3px 3px 5px;
background-color:#ece9d8;
border-right:solid 1px #000;
border-top:solid 1px #000;
border-left:solid 1px #000;
text-decoration:none;
font-weight:700;
color: #000;
}
div#Tabs a:hover {
text-decoration:none;
background-color:#fdfae9;
}
div#Tabs a.selected, div#Tabs a:active {
background-color:#FFF;
border-bottom: solid 1px #fff;
border-left: solid 1px #000;
z-index: 200;
}
.tabpane {
border:solid 1px #000;
clear:both;
overflow:auto;
position:relative;
width:588px;
height:300px;
top:-1px;
padding:10px 20px 10px 10px;
}
很明显,使用ID定义样式表在母版中行不通,为什么?没看我上面分析么。
解决办法把div#去掉,改称.Tab自己定义。ok!aspx中代码也需要修改!
<ContentTemplate>
<div id="Tabs" runat="server" class="tabs">
<asp:LinkButton ID="FirstTab" CommandArgument="0" runat="server" Text="First Tab"
OnClick="Tab_Click" />
<asp:LinkButton ID="SecondTab" CommandArgument="1" runat="server" Text="Second Tab"
OnClick="Tab_Click" />
<asp:LinkButton ID="ThirdTab" CommandArgument="2" runat="server" Text="Third Tab"
OnClick="Tab_Click" />
<asp:LinkButton ID="FourthTab" CommandArgument="3" runat="server" Text="Fourth Tab"
OnClick="Tab_Click" />
</div>
</ContentTemplate>
code中也要做修改
protected void Page_Load(object sender, EventArgs e)
{
SetSelectedStyle(Firsttab);
//create server load time for update progress.
//TODO: Remove! This is for testing purposes only.
if (ScriptManager1.IsInPartialRenderingMode)
{
System.Threading.Thread.Sleep(400);
}
}
至此谢幕!