Wrox Programmer Forums
|
ASP.NET 3.5 Professionals If you are an experienced ASP.NET programmer, this is the forum for your 3.5 questions. Please also see the Visual Web Developer 2008 forum.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the ASP.NET 3.5 Professionals section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old April 22nd, 2009, 01:58 AM
Registered User
  
Join Date: Apr 2009
Posts: 4
Thanks: 1
Thanked 0 Times in 0 Posts
Default Code to implement Tab View
Hi
Code to implement Tab View ---
Add the following coed in a row -
Code:
 
<asp:MenuID="mnuItems"Width="168px"runat="server"Orientation="Horizontal"StaticEnableDefaultPopOutImage="False"
OnMenuItemClick="mnuItems_MenuItemClick">
<StaticMenuStyleCssClass="TabStaticMenu"/>
<StaticMenuItemStyleCssClass="TabStaticMenuItem"/>
<StaticSelectedStyleCssClass="TabStaticSelected"/>
<Items>
</Items>
</asp:Menu>
<asp:MultiViewID="mvItems"runat="server"ActiveViewIndex="0">
<!-- Tab1-->
<asp:ViewID="View1"runat="server"><tablewidth="100%"cellpadding="0"cellspacing="3"style="border: 1px solid #0B61AA">
<trrunat="server"id="trSummary">
<td>
<tablewidth="100%"cellpadding="0"cellspacing="0">
<tr>
<tdclass="tab-heading1"style="width:80%">
&nbsp;Tab1 Heading&nbsp;&nbsp;
</td><tdclass="tab-heading1"align="right"style="width:20%;white-space:nowrap">
</td>
</tr>
</table>
</td>
</tr>
<trvalign="top">
<tdclass="TabArea"style="width: 980px">
<divid="div1"style="overflow: auto;width: 980px; height: 368px"align="center"
runat="server">
</div>
</td>
</tr></table>
</asp:View>
 
CSS Styles used are -----
/* CSS for Tab Control starts here */
.TabStaticMenu
{
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
text-align:center;
text-shadow:Black;
color:#ffffff;
padding-right:1px;
}
.TabStaticMenuItem
{
background-color:#E9E9E9;
border-left:1pxsolid#0B61AA;
border-right:1pxsolid#0B61AA;
border-top:1pxsolid#0B61AA; 
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
text-align:center;
text-shadow:Black;
color:#E9E9E9;
padding:5px;
}
.TabStaticMenuItem:link,.TabStaticMenuItem:visited,.TabStaticMenuItem:active
{ 
background-color:#E9E9E9;
border-left:1pxsolid#0B61AA;
border-right:1pxsolid#0B61AA;
border-top:1pxsolid#0B61AA;
border-bottom:0px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
text-align:center;
text-shadow:Black;
color:#0B61AA;
padding:4px;
}
.TabStaticMenuItem:hover
{ 
border-left:1pxsolid#0B61AA;
border-right:1pxsolid#0B61AA;
border-top:4pxsolid#FF9C41;
border-bottom:0px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
text-align:center;
text-shadow:Black;
color:#000000;
padding:4px;
}
.TabStaticSelected
{
background-color:White;
border-left:1pxsolid#0B61AA;
border-right:1pxsolid#0B61AA;
border-top:4pxsolid#FF9C41;
border-bottom:1pxsolid#FFFFFF;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
text-align:center;
text-shadow:Black;
color:#0B61AA;
padding:4px; 
position: relative;
top: 1px;
}
.TabStaticSelected:link,.TabStaticSelected:visited,.TabStaticSelected:active
{ 
background-color:White;
border-left:1pxsolid#0B61AA;
border-right:1pxsolid#0B61AA;
border-top:1pxsolid#0B61AA;
border-bottom:0px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
text-align:center;
text-shadow:Black;
color:#0B61AA;
padding:4px;
}
.TabStaticSelected:hover
{ 
background-color:White;
border-left:1pxsolid#0B61AA;
border-right:1pxsolid#0B61AA;
border-top:1pxsolid#0B61AA;
border-bottom:0px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
 
text-align:center;
text-shadow:Black;
color:#0B61AA;
padding:4px;
}
.TabArea
{ 
border-left: 1pxsolid#0B61AA;
border-bottom: 1pxsolid#0B61AA;
border-right: 1pxsolid#0B61AA;
border-top: 1pxsolid#0B61AA; 
 
}
.tab-heading
{
background-color: slategray;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
height: 20px;
font-weight: bold;
color: White;
}
.tab-heading1
{
background-color: White;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
height: 10px;
font-weight: bold;
color: Black;
}
/* CSS for Tab Control end here */


Hope the above code helps u.......
 
Old April 22nd, 2009, 04:24 AM
Friend of Wrox
  
Join Date: Aug 2004
Posts: 550
Thanks: 0
Thanked 1 Time in 1 Post
Default
Hi

Thanks for this code snippet, unfortunately its not working even after applying all the styles, is there anything I am missing, have you tried this locally as a test project. Also, can you let me know how are the menu items bound, are they direcly declared in the HTML as
<asp:MenuItemText="Standard"></asp:MenuItem>
<asp:MenuItemText="Non Standard"></asp:MenuItem>

Or are they being bound from the codebehind?

Thanks
__________________
Regards
Mike
 
Old April 22nd, 2009, 05:15 AM
Registered User
  
Join Date: Apr 2009
Posts: 4
Thanks: 1
Thanked 0 Times in 0 Posts
Default
u need to search for the codebehind code for binding menu control since i have implemented it from HTML only....
and as far as tab view code is concen, i need to look into the code, so will let u know once done
 
Old April 22nd, 2009, 05:45 AM
Registered User
  
Join Date: Apr 2009
Posts: 4
Thanks: 1
Thanked 0 Times in 0 Posts
Default
Hi
fortunately the code is working on my end........
update code --
HTML Page --
<html>
<headrunat="server">
<title>Tab View</title>
<linkhref="Styles/TabViewStylesheet.css"rel="stylesheet"type="text/css"/>
</head>
<body>
<formid="form1"runat="server">
<tablewidth="100%"style="height:100%"cellpadding="0"cellspacing="0"border="0">
<tr>
<tdvalign="top"align="center">
<tablecellspacing="0"cellpadding="0"border="0">
<tr>
<td>
</td>
<td>
<asp:MenuID="mnuItems"Width="168px"runat="server"Orientation="Horizontal"StaticEnableDefaultPopOutImage="False">
<StaticMenuStyleCssClass="TabStaticMenu"/>
<StaticMenuItemStyleCssClass="TabStaticMenuItem"/>
<StaticSelectedStyleCssClass="TabStaticSelected"/>
<Items>
<asp:MenuItemText="Menu1"Value="0"></asp:MenuItem>
<asp:MenuItemText="Menu2"Value="1"></asp:MenuItem>
<asp:MenuItemText="Menu3"Value="2"></asp:MenuItem>
<asp:MenuItemText="Menu4"Value="3"></asp:MenuItem>
<asp:MenuItemText="Menu5"Value="4"></asp:MenuItem>
<asp:MenuItemText="Menu6"Value="5"></asp:MenuItem>
</Items>
</asp:Menu>
<asp:MultiViewID="mvItems"runat="server"ActiveViewIndex="0">
<!-- Tab1-->
<asp:ViewID="View1"runat="server"><tablewidth="100%"cellpadding="0"cellspacing="3"style="border: 1px solid #0B61AA">
<trrunat="server"id="trSummary">
<td>
<tablewidth="100%"cellpadding="0"cellspacing="0">
<tr>
<tdclass="tab-heading1"style="width:80%">
&nbsp;Test &nbsp;&nbsp;
</td><tdclass="tab-heading1"align="right"style="width:20%;white-space:nowrap">
<imgid="imgHelpMain"alt="Help"style="size:20px;cursor:hand"src="../Images/help_white.jpg"
runat="server"/>
</td>
</tr>
</table>
</td>
</tr>
<trvalign="top">
<tdclass="TabArea"style="width: 980px">
<divid="div1"style="overflow: auto;width: 980px; height: 368px"align="center"
runat="server"></div>
</td>
</tr></table>
</asp:View>
</asp:MultiView>
</td>
</tr></table>
</td>
</tr>
</table>
</form>
</body>
</html>

CSS Style --

body
{
margin-bottom:0;
margin-left:0;
margin-right:0;
margin-top:0;
}
/* CSS for Tab Control starts here */
.TabStaticMenu
{
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
text-align:center;
text-shadow:Black;
color:#ffffff;
padding-right:1px;
}
.TabStaticMenuItem
{
background-color:#E9E9E9;
border-left:1pxsolid#0B61AA;
border-right:1pxsolid#0B61AA;
border-top:1pxsolid#0B61AA;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
text-align:center;
text-shadow:Black;
color:#E9E9E9;
padding:5px;
}
.TabStaticMenuItem:link,.TabStaticMenuItem:visited,.TabStaticMenuItem:active
{
background-color:#E9E9E9;
border-left:1pxsolid#0B61AA;
border-right:1pxsolid#0B61AA;
border-top:1pxsolid#0B61AA;
border-bottom:0px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
text-align:center;
text-shadow:Black;
color:#0B61AA;
padding:4px;
}
.TabStaticMenuItem:hover
{
border-left:1pxsolid#0B61AA;
border-right:1pxsolid#0B61AA;
border-top:4pxsolid#FF9C41;
border-bottom:0px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
text-align:center;
text-shadow:Black;
color:#000000;
padding:4px;
}
.TabStaticSelected
{
background-color:White;
border-left:1pxsolid#0B61AA;
border-right:1pxsolid#0B61AA;
border-top:4pxsolid#FF9C41;
border-bottom:1pxsolid#FFFFFF;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
text-align:center;
text-shadow:Black;
color:#0B61AA;
padding:4px;
position: relative;
top: 1px;
}
.TabStaticSelected:link,.TabStaticSelected:visited,.TabStaticSelected:active
{
background-color:White;
border-left:1pxsolid#0B61AA;
border-right:1pxsolid#0B61AA;
border-top:1pxsolid#0B61AA;
border-bottom:0px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
text-align:center;
text-shadow:Black;
color:#0B61AA;
padding:4px;
}
.TabStaticSelected:hover
{
background-color:White;
border-left:1pxsolid#0B61AA;
border-right:1pxsolid#0B61AA;
border-top:1pxsolid#0B61AA;
border-bottom:0px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;

text-align:center;
text-shadow:Black;
color:#0B61AA;
padding:4px;
}
.TabArea
{
border-left: 1pxsolid#0B61AA;
border-bottom: 1pxsolid#0B61AA;
border-right: 1pxsolid#0B61AA;
border-top: 1pxsolid#0B61AA;

}
.tab-heading
{
background-color: slategray;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
height: 20px;
font-weight: bold;
color: White;
}
.tab-heading1
{
background-color: White;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
height: 10px;
font-weight: bold;
color: Black;
}
/* CSS for Tab Control end here */

pl. let me know if it still doesn't work at ur end....
 
Old April 22nd, 2009, 07:17 AM
Friend of Wrox
  
Join Date: Aug 2004
Posts: 550
Thanks: 0
Thanked 1 Time in 1 Post
Default
WOW, fortunately the code now works at my end, the problem was if you look at the styles pasted by you, there are no spaces in between, e.g. as below

border-right:1pxsolid#0B61AA;

There are no spaces between 1px sold #0B61AA, but now I got this issue, and now it works. Thanks Cheers
__________________
Regards
Mike
The Following User Says Thank You to mike_remember For This Useful Post:
divyamathur (April 23rd, 2009)
 
Old April 23rd, 2009, 01:10 AM
Registered User
  
Join Date: Apr 2009
Posts: 4
Thanks: 1
Thanked 0 Times in 0 Posts
Default
Pleasure to help u sir........





Similar Threads
Thread Thread Starter Forum Replies Last Post
Design view or source view tab doesnt appear Muddasar BOOK: Beginning ASP.NET 3.5 : in C# and VB BOOK ISBN: 978-0-470-18759-3 2 March 25th, 2009 04:16 AM
Design view or source view tab doesnt appear Muddasar BOOK: Beginning ASP.NET 3.5 : in C# and VB BOOK ISBN: 978-0-470-18759-3 0 March 24th, 2009 08:18 PM
How to implement WSE 3.0 with code only nitinp .NET Web Services 0 October 24th, 2007 01:53 AM
View Code ag19702004 Visual Studio 2005 0 September 7th, 2006 02:47 PM
Urgent: Implement Cascade Delete through Code rcmetta BOOK: Professional Crystal Reports for VS.NET 0 June 7th, 2004 12:49 AM




Contact Us - Wrox - Privacy Statement - Top

Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.