There are many jQuery tabs to pick from out there. You will discover even quite a few DotNetNuke Tab Modules accessible. But imagine if you'd like only a basic down and filthy list of tabs that just receive the career kept away from needing to depend upon other jQuery libraries or make bloat?
I’m likely to showcase a really easy tab structure that utilizes jQuery and CSS originally made by SOHTANAKA which i have adapted to my DNN website and into Ventrian House Agent.
Structuring The Tabs
The tab framework may be very simple. Just an unordered record to the tabs, and also a div box to deal with the tab information. The crucial thing to recollect when building your tabs is the fact that just about every tab wants a novel id connected to it.
<div class="tabsBlock">
<ul class="tabs">
<li><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
<li><a href="#tab4">Tab 4</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<p>Enter Content</p>
</div>
<div id="tab2" class="tab_content">
<p>Enter Content</p>
</div>
<div id="tab3" class="tab_content">
<p>Enter Content</p>
</div>
<div id="tab4" class="tab_content">
<p>Enter Content</p>
</div>
</div>
</div>
<!--Want Another Set of Tabs? -->
<div class="tabsBlock">
<ul class="tabs">
<li><a href="#tab5">Tab 1</a></li>
<li><a href="#tab6">Tab 2</a></li>
<li><a href="#tab7">Tab 3</a></li>
<li><a href="#tab8">Tab 4</a></li>
</ul>
<div class="tab_container">
<div id="tab5" class="tab_content">
<p>Enter Content</p>
</div>
<div id="tab6" class="tab_content">
<p>Enter Content</p>
</div>
<div id="tab7" class="tab_content">
<p>Enter Content</p>
</div>
<div id="tab8" class="tab_content">
<p>Enter Content</p>
</div>
</div>
</div>
Add Styling For your Tabs
Styling the tabs as well as the tab content is extremely straightforward to attain and can be simply changed with some creativity and imagination. I’ll be referencing my css styling for the tabs that I use. If you'd like much more examples, possess a look at examples provided by SOHTANAKA and verify the comments in his tutorial for additional designed by other customers.
In case you are an Active Social user, you are going to discover that if you're utilizing these jQuery tabs, you'll be able to simply transfer the appear and feel by means of CSS for the AS tab interface located on profile journals, group journals, and also the message center. For demonstration purposes, I’ve decided to leave in my css code utilised for the Active Social Message Center. When you do not use AS, simply take away all references to “am-ui-tab-n”.
.tabsBlock {margin-bottom:10px;}
ul.tabs,ul.am-ui-tab-strip {
height:29px;
list-style:none;
position:relative;
padding:1px 5px 0;
display:block;
font-size:12px;
/* CSS3 Rounded Corners For Top Left/Top Right of Tabs */
-moz-border-radius-topleft:8px;
-moz-border-radius-topright:8px;
-webkit-border-radius-topleft:8px;
-webkit-border-radius-topright:8px;
-khtml-border-radius-topleft:8px;
-khtml-border-radius-topright:8px;
}
ul.tabs li,ul.am-ui-tab-strip li,ul.am-ui-tab-strip li {
margin:2px 2px 0 0;
padding:4px 8px;
border:solid 1px transparent;
background:url(http://cdn.northeastok.com/common/2-0bg-blue.gif) center center repeat-x;
position:relative;
float:left;
text-decoration:none;
border-bottom-width:0 !important;
outline:none;
cursor:pointer;
}
ul.tabs li.active,ul.am-ui-tab-strip li.am-ui-tab-selected {
border-bottom:solid 1px #fff !important;
border:solid 1px #ccc;
background:#fff;
}
ul.tabs li:hover,ul.tabs li.active:hover,ul.am-ui-tab-strip li:hover,ul.am-ui-tab-strip li.am-ui-tab-selected:hover {
border-bottom:solid 1px #fff !important;
border:solid 1px #555;
background:url(http://cdn.northeastok.com/common/grad-horz-grey.gif) top center repeat-x;
color:#444;
}
ul.tabs li a,ul.am-ui-tab-strip li a {
color:#fff;
font-weight:700;
}
ul.tabs li a:hover,ul.tabs li.active a,ul.am-ui-tab-strip li a:hover,ul.am-ui-tab-strip li.am-ui-tab-selected a {
color:#444;
}
.tab_container {
background:url(http://cdn.northeastok.com/common/grad-horz-rev-grey.gif) bottom center repeat-x;
border:solid 1px #ccc;
margin-bottom:6px;
}
.tab_content {
display:block;
min-height:100px;
padding:10px;
/* CSS3 Rounded Corners For the Box Outline */
-moz-border-radius:6px;
-webkit-border-radius:6px;
-khtml-border-radius:6px;
}
You will notice that I've several photos referenced because the background pictures for my tabs and tab container. All you may have to complete is modify the backgrounds to a colour or reference your individual image files.
The jQuery Tab Script
Now that the HTML and CSS is full, all we have to accomplish is add within the script. Out of habit, when producing scripts, I save them in my DNN directory to "/Resources/Shared/scripts" or if jQuery, I save to "/Resources/Shared/scripts/jquery". We’ll get in touch with this script "jquery.tabs.js" and save it to my shared jquery scripts folder.
Whenever you reference the script, just add in <script type="text/javascript" src="/Resources/Shared/scripts/jquery/jquery.tabs.js"></script>. In case you design and style in HTML5, you can drop "type="text/javascript". Add the reference for the bottom of the skin file, module template, or under DNN page settings > advanced settings within the page header tags. You can also add to the header or footer of module settings.
jQuery(document).ready(function() {
jQuery.fn.tabsBlock = function(){
//Default Action
jQuery(this).find(".tab_content").hide(); //Hide all content
jQuery(this).find("ul.tabs li:first").addClass("active").show(); //Activate first tab
jQuery(this).find(".tab_content:first").show(); //Show first tab content
//On Click Event
jQuery("ul.tabs li").click(function() {
jQuery(this).parent().parent().find("ul.tabs li").removeClass("active"); //Remove any "active" class
jQuery(this).addClass("active"); //Add "active" class to selected tab
jQuery(this).parent().parent().find(".tab_content").hide(); //Hide all tab content
var activeTab = jQuery(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
jQuery(activeTab).show(); //To Fade in the active content, change ".show" to ".fadeIn"
return false;
});
};//end function
jQuery("div[class^='tabsBlock']").tabsBlock(); //Run function on any div with class name of "tabsBlock"
});
Using Tabs In Ventrian Home Agent
The tabs as they currently stand can simply be utilised in Property Agent. What I need to show you is how you can extend the tabs a little bit additional to let for targeting precise customers.
Say you have a get in touch with type, or possibly you've a assessment type within your view template that you simply only want to show for registered users. Why not wrap the tab with tokens to show or hide the tabs? This really is only one instance I’ll show, but it is possible to see where this leads to additional customizations.
<div class="tabsBlock">
<ul class="tabs">
<li><a href="#overview">Overview</a></li>
<li><a href="#reviews">Reviews ([REVIEWCOUNT])</a></li>
<li><a href="#write-review">Write A Review</a></li>
<!-- Show Tab only when a property has no owner -->
[HASNOAGENT]
<li><a href="#claim">Claim It</a></li>
[/HASNOAGENT]
</ul>
<div class="clearfix tab_container">
<div id="overview" class="tab_content">
<p>[CUSTOM:Details]</p>
</div>
<div id="reviews" class="tab_content"> [HASNOREVIEWS]
<p class="alert-frame">No reviews yet. Why not be the first to review "[CUSTOM:TITLE]". Simply "click" on the "Write A Review" tab above to get started.</p>
[/HASNOREVIEWS]
[HASREVIEWS][REVIEWS][/HASREVIEWS] </div>
<div id="write-review" class="tab_content">
<h4 class="p5 bgblue">Create A Review for [CUSTOM:TITLE]</h4>
<!-- Show a message to guests that cant write a review --->
[ISINROLE:Unauthenticated Users]
<p class="info-frame">Sorry, but in order to write a review for [CUSTOM:TITLE], you must be a site member. Becoming a site member is completely free with no obligations. The NortheastOK Community wants to hear what you have to say about [CUSTOM:TITLE]. So feel free to see more about our <a href="/Help/Membership">"membership details"</a>, or get started and <a href="/Help/Sign-Up">"Sign Up"</a> today! If you are already a site member, you just need to <a href="/Login">"log in"</a> to write your own review of [CUSTOM:TITLE]</p>
[/ISINROLE:Unauthenticated Users]
<!-- Show only to registered users -->
[ISINROLE:Registered Users]
<div class="divcenter min80 max80 p5 tblw100"> [REVIEWFORM]</div>
[/ISINROLE:Registered Users] </div>
<!-- Show Tab Content only when a property has no owner -->
[HASNOAGENT]
<div id="claim" class="tab_content">
<p class="alert-frame">Is this your Website? Fill out the form provided below to be contacted by an administrator to claim "[CUSTOM:TITLE]". As the owner of this listing, you will be able to make updates and changes.</p>
[COMMENTFORM]
<!-- Show only comments to Admins -->
[HASCOMMENTS][ISINROLE:Administrators]
<hr />
[COMMENTS][/ISINROLE:Administrators][/HASCOMMENTS]</div>
[/HASNOAGENT] </div>
</div>
So as it is possible to see above, I've a tab called "Claim It". So whenever there's a listing with no an owner, the tab shows to permit a user to comment on the listing and claim that listing. I then possess the comments to show only to Admins. An admin can evaluation the listing and assign the listing towards the user, or make extra inquiry and get in touch with with that user. That is only a single instance of wrapping the tabs with tokens in Property Agent. Yet another notion is usually to also develop a tab that may be only visible to home owners to show stats, comments, and so on, or possibly a tab for brokers. On and on.
Best DotNetNuke Hosting Recommendation
ASPHostPortal.com
ASPHostPortal.com provides its customers with Plesk Panel, one of the most popular and stable control panels for Windows hosting, as free. You could also see the latest .NET framework, a crazy amount of functionality as well as Large disk space, bandwidth, MSSQL databases and more. All those give people the convenience to build up a powerful site in Windows server. ASPHostPortal.com offers DotNetNuke hosting starts from $5/month only. We also guarantees 30 days money back and guarantee 99.9% uptime. If you need a reliable affordable DotNetNuke Hosting, we should be your best choice.