Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > ASP.NET and ASP > ASP.NET 3.5 > ASP.NET 3.5 Professionals
Password Reminder
Register
| FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
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 tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
 
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
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.......
  #2 (permalink)  
Old April 22nd, 2009, 04:24 AM
Friend of Wrox
Points: 1,935, Level: 17
Points: 1,935, Level: 17 Points: 1,935, Level: 17 Points: 1,935, Level: 17
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Aug 2004
Location: United Kingdom
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
  #3 (permalink)  
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
  #4 (permalink)  
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....

  #5 (permalink)  
Old April 22nd, 2009, 07:17 AM
Friend of Wrox
Points: 1,935, Level: 17
Points: 1,935, Level: 17 Points: 1,935, Level: 17 Points: 1,935, Level: 17
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Aug 2004
Location: United Kingdom
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)
  #6 (permalink)  
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........
 


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


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



All times are GMT -4. The time now is 09:17 AM.


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