Skip to main content

Jquery Quick Tabs for DotNetNuke HTML Module

If you want to quickly add tabs solution to your HTML Module than follow the below methods to accomplish it.

I have used the Microsoft Ajax CDN file reference as the following link allows me to choose different color scheme with just changing the UI css file reference.
http://www.asp.net/ajaxlibrary/CDNjQueryUI1812.ashx

In the page settings, under the page meta tag section add the following items. Make sure that the page meta tag takes the entire text and does not trims any part, if the trim or concatenation does happen, than add the remaining (entire tag) portion to the HTML module settings header section.

**********START************
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.12/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.12/jquery-ui.js"></script>  
<script>
    $(document).ready(function () {
        $("#tabs").tabs();
    });
</script>
**********END************ 

The below div tags will go under the body tag.

**********START************
<div id="tabs">
<ul>
<li><a href="#tabs-1"><span>Home</span></a></li>
<li><a href="#tabs-2"><span>Search</span></a></li>
<li style="display:none;"><a href="#tabs-3"><span>Details</span></a></li>
</ul>
<div id="tabs-1">
            Home level test...
</div>
<div id="tabs-2">
            Search options
</div>
<div id="tabs-3" style="display:none;">
            You can manipulate this option!
</div>
    </div>
**********END************* 

This will basically enable your page to have tab options. As the HTML module will have the user level permissions, this basically makes it a working solution, without spending money or installing tabs solutions which are too complex or bloated.

As the javascript and CSS are placed under the page meta tag settings, the content contributer or editors will not have to deal with the scripts and css, and if the contributer or the editor did messes up the text, it will not be some complex module vb or c# script but rather the html in the HTML module that you will need to fix to resolve any issues.

Hope it helps to anyone who is looking for a fast solution for dynamic tabs for the dnn solution.

Comments

Popular posts from this blog

Completed UiPath - RPA Developer Advance Training

After a month of training, with late nights and weekends I have completed the UiPath RPA Developer Advance Training.

The Level 1 Foundation Training pretty much covered all the basics of Desktop studio and workflows, only draw back was I started with the default foundation course which was for 2016, and all document reference links where pointing to 2016 version. I didn't understand it during the foundation training and kept switching to 2018 version document/page.

Only after completing the Foundation course that I realized, I was suppose to have started with the 2018 version of Level 1 Foundation Training, but as it was optional I didn't have to retake the 2018 version, the 2016 was good enough for moving to level 2.

The Level 2 Orchestrator 2018.3 Training as good. It gave good understanding of Queue's, Jobs, and schedules and I was able to complete the level two much faster then the level 1.

The Level 3 UiPath Advanced Training was bit tough as it involved the assignme…

Working hours in six months to a year

I usually try to look for how many hours I have worked on a given project and what hours that I  spend on learning or network management tasks.

Below I have added some hours calculation, after finding the breakdown by months from Berkeley website.


Credit: http://controller.berkeley.edu/payroll/payroll-system-pps/pps-training-materials/number-working-hours-month

2017Working hours six months (Jan 1st - Jun 30th): 
130 days x 8 hours =  1040 hours


Working hours six months (Jul 1st - Dec 31th): 
130 days x 8 hours =  1040 hours

Working hours for the year:
1040 hours + 1040 hours = 2080 hours
MonthWorking Days in the monthMonthly Working Hrs1/2 of working hrsMidpoint of working days in the monthDates of HolidaysJanuary22176888 a.m. 1/172,16February20160808 a.m. 2/1520March2318492Noon 3/1631April20160808 a.m. 4/17May2318492Noon 5/1629June22176888 a.m. 6/16July2116884Noon 7/174August2318492Noon 8/16September2116884Noon 9/154October22176888 a.m. 10/17November22176888 a.m. 11/1610,23,24December21168…