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…

KB 294807 - IIS Server - PHP FastCGI 500 Error 0xfffffffe

Resolved issue today of IIS Server - PHP FastCGI 500 Error 0xfffffffe by deleting "Windows Temp" folder files.

We used Cygwin to customize some permissions of "Windows Temp" folder and after few hours the website stopped working.

The search online was giving all kinds of different solution except what I was looking for.

I was hoping the stackoverflow will have answers but even this post didn't cover the issue I was running into.
https://stackoverflow.com/questions/15302080/fastcgi-500-failure

Restarting the IIS didn't work, but deleting temp files cleared the issue, but now the problem is how long before the site will go down again?

Hope the issue is resolved for ever, if not; I will update this post later.

Grow with Google Scholarship / Udacity

Grow with Google Scholarship / Udacity

Today on Jan 11, 2018, I have received the Grow with Google Scholarship.

I am really excited because, previously I had joined Udacity to complete a Nano Degree, but due to price and family priorities, I had to abandon that goal.

Today, I feel like I am getting a second chance to give it another shot to completing my Nano Degree.