Using UI Widgets in Your Content

It it now possible as of mojoPortal content management system version 2.3.0.4.to use some javascript UI widgets in your content. You can paste them in directly using markup as shown further down this pages, but you can also add them easily from the toolbar in the editor. If you'll notice there is a new icon in the FCKeditor toolbar for "Content Templates", its right next to the "Source" view button.

 fckeditor toolbar screen shot

When you click it, it opens a dialog box for you to choose a template and we have these tabs and accordion items in there, all you have to do is click one to add it to your content..

screen shot of fckeditor content template dialog window

Note that the jQuery widgets are themeable, you can specify the theme to use by setting a property on the StyleSheetCombiner control in your layout.master file of your skin.

<portal:StyleSheetCombiner id="StyleSheetCombiner" runat="server" JQueryUIThemeName="start" />

In the above exampleI'm using the theme named start. As of the time of this writing there are 18 jQuery UI themes:

base, black-tie, blitzer, cupertino, dot-luv, excite-bike, hot-sneaks, humanity, mint-choc, redmond, smoothness, south-street, start, swanky-purse, trontastic, ui-darkness, ui-lightness, vader

You can use any one of those. Note that although the control is named StyleSheetCombiner, it only combines the css files listed in the style.config file of your skin, it does not combine externally loaded css files like those for YUI or jQuery, those are loaded separately, by default from the google CDN (Content Delivery Network), unless you configure them to be loaded from local folders as described in this article.

 

Example Use of jQuery Accordion

Section 1

Section 1 content.

Section 2

Section 2 content

Section 3

Section 3 content

Section 4

Section 4 content

<div class="mojo-accordion">
<h3><a href="#">Section 1</a></h3>
<div>
<p>Section 1 content.</p>
</div>
<h3><a href="#">Section 2</a></h3>
<div>
<p>Section 2 content</p>
</div>
<h3><a href="#">Section 3</a></h3>
<div>
<p>Section 3 content</p>
</div>
<h3><a href="#">Section 4</a></h3>
<div>
<p>Section 4 content</p>
</div>
</div>

Example Use of jQuery Tabs

 

Tab 1 content

Tab 2 content

Tab 3 content

Using markup like this:

<div class="mojo-tabs">
<ul>
<li><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
</ul>
<div id="tab1">
<p>Tab 1 content</p>
</div>
<div id="tab2">
<p>Tab 2 content</p>
</div>
<div id="tab3">
<p>Tab 3 content</p>
</div>
</div>

Watch a Training Video About Using Content Templates