The jQuery tabs is a nice plugin. But depending on how creative your site is and how aesthetic it’s function needs to be, a lot of times you’re not going to use it as is because it simply looks like a “developer designed the tabs”. So, to pretty up the tabs, you can simply set the images and then when you click just change out the image to show an active image using jQuery selectors.
Here’s how I did it:
<script type="text/javascript">
$(function() {
function handleTabSelect(event, tab) {
if (tab.index == 0) {
// tab 1 selected
$('img#imgTab1').attr({ src: "/Content/Images/Product/tab1Selected.png" });
$('img#imgTab2').attr({ src: "/Content/Images/Product/tab2Unselected.png" });
}
else if (tab.index == 1) {
// tab 2 selected
$('img#imgTab2').attr({ src: "/Content/Images/Product/tab2Selected.png" });
$('img#imgTab1').attr({ src: "/Content/Images/Product/tab1Unselected.png" });
}
}
// Set Tab Constructor values & initialize tabs
$('#tabs').tabs({ selected: '0',
fx: { opacity: 'toggle', duration: 'slow' }, select: handleTabSelect });
});
</script>
The html:
<div id="tabs">
<ul class="tabImages">
<li runat="server"><a href="#Tab1Content"><span><img id="imgTab1" width="262" height="67"
src="/Content/Images/product/tab1_Selected.png" /></span></a></li>
<li runat="server"><a href="#Tab2Content"><span><img id="imgTab2" width="262" height="67"
src="/Content/Images/Product/tab2_Unselected.png" /></span></a></li>
</ul>
<div id="TabsMain">
<div id="Tab1Content">
<asp:ContentPlaceHolder ID="cphTab1Content" runat="server" />
</div>
<div id="Tab2Content">
<asp:ContentPlaceHolder ID="cphTab2Content" runat="server" />
</div>
</div>
</div>
So the handleTabSelect event handler is fired whenever you click on a tab. Based on what tab was clicked (index), it will switch out the images. Pretty simple but the tricky part is figuring out how to do that in jQuery if you’re not as familiar with the syntax and are new to jQuery. In jQuery as everyone knows, you can manipulate (do something with…add, changes, remove) any part of the DOM in your page (html elements, css elements, and more) but again, it’s knowing the jQuery syntax first before knowing how to manipulate the DOM with jQuery so study up!. And this is how you would manipulate the images here in this context with jQuery tabs.
And obviously the tab1_Selected.png and tab2_Unselected.png speak for themselves..you’re just going to change the image to show a selected vs. not in jQuery once a certain tab has focus.
I highly recommend (I have these) these 3 books if you’re going to start jQuery:
The Learning jQuery book (3rd one above) is a tad bit outdated but not by much. jQuery is in v1.3 but the other is still overall a good book and well worth it to learn jQuery no matter what version. I recommend having all 3 of these books. The internet is nice but you will get up to speed at least with jQuery in my opinion with these books first and internet as a supplement.
And as you can see, there’s no excuse not to use tableless design in today’s presentation layer. There’s no point It’s so much cleaner and easier to maintain. Tables add so much damn clutter to the page. Learn CSS tableless design. Not easy at first but learn it. It shows you care about not only standards but clean maintainable code in the presentation layer. And ASP.NET MVC also works well when you have a nice clean page using tableless design in your views. I cannot imagine positioning all this with tables anymore in my career and I will not if I can’t help it.
I’m not going to post the CSS, because all boils down to is creating the class ids for tabs (required by the jQuery tabs plug-in to work), tabImages, TabsMain, Tab1Content, and Tab2Content. It’s pretty self explanatory and if not just comment and I’ll explain in this post.
