Using jQuery Plugins

In this article we will learn how to install a jQuery plugin in MojoPortal using a custom user control to create a simple slideshow like that found on www.ramride.colostate.edu. To achieve this effect we will use the follow:

Background

MojoPortal ships with the jQuery library (take a look under its hood, ~/ClientScript/jqmojo), and all its features are available at your finger-tips. However, the challenge is that you cannot simply drop your custom jQuery code or plugin directly on the Layout.Master and expect it to work. This is a because your custom code will load before MojoPortal loads its core jQuery. As a result your code will not execute. The trick is not to place your code directly in the Layout.Master, but to include it in a custom user control.

Creating a Custom User Control

Let’s start by creating a custom user control for the jQuery cycle plugin. Open VisualStudio or your favorite text editor

<%@ Control Language="C#" ClassName="jQueryUserControl" #>
<script type="text" src="[PATH_TO_JQUERY]/jquery.cycle.all.js?v2.71"></script>
<script type="text" src="[PATH_TO_JQUERY]/jquery.easing.1.1.1.js"></script>
<script type="text" src="[PATH_TO_JQUERY]/jQueryCustomScript.js"></script>

The included javascript scripts load the Cycle plugin, Easing plugin and your custom jQuery code. Save your new custom user control to ~/Controls/jQueryUserControl.ascx. Next, lets with our custom jQuery Code.

Custom jQuery

Copy the following into a new file. Save the file as  ~/ClientScript/jQueryCustomScript.js


$.cycle.defaults.speed = 900;  
$.cycle.defaults.timeout = 6000;   
$(function) {
 	$('#banner pre code').each(function() {
	eval($(this).text());
	});
 });  

The above code is rather nifty. Using the DOM, jQuery will execute the javascript from your markup, in other words what ever is in “#banner pre code”

Markup

Now create a new HTML content module in MojoPortal. We will not place the module on a page, but will include it in the Layout.Master using a MojoPortal ModuleWrapper. Here’s the markup.


<div class="banner"> <div id="bannerImages"> <img src="image1.gif" /> <img src="image2.gif" /> <img src="image3.gif" /> <img src="image4.gif" /> </div>
<pre> <code> $('#bannerImages').cycle({
fx:'scrollLeft',
next:'#bannerImages',
timeout: 20000,
easing: 'backinout' });
</code> </pre> </div>
By placing the jQuery code in the mark up we can change the variables of our slideshow without ever having to edit an external javascript file; just edit the module. Save the new HTML Content module and note the module ID. Now its time to modify the Layout.Master.

Layout.Master

First we register the new user control.

 <%@ Register Src="~/Controls/jQueryUserControl.ascx" TagName="jQueryUserControl" TagPrefix="jQueryControl" %> 

Then just inside the <form /> tag add the control

<jquerycontrol:jqueryusercontrol runat="server" id="jQueryControl1">Place the ModuleWrapper in the desired location.

<div id="bannerPlaceHolder">
<portal:ModuleWrapper id="ModuleWrapper1" runat="server" ConfigureModuleID="###" />
</div>

Add the CSS

Lastly, add the CSS to tie it all together. You may wish to add your own positioning and floats.

 #bannerPlaceHolder { margin-top: 5px; overflow:hidden;  height: 205px; width: 455px; }
 #bannerPlaceHolder div.panelwrapper {border: none;} 

 

jQuery Sortable Tables

  1. Build your table using the table tool in ckedit (the editor built in) – it’s the button that looks like a table and says ‘Insert/Edit Table’ when you mouse over it.
  2. Here is how I built an example table:

    http://odev.casa.colostate.edu/Data/Sites/1/images/edit-table-pic.png

a

b

line 1

2

line 2

1


It is important to use a header row!

  1. Next, enter source mode – you need to make a couple changes in the code…
    • Add class=”tablesorter” to the table.

      <table cellspacing=”1″ cellpadding=”1″ border=”1″ class=”tablesorter”>
      <thead>
      <tr>
      <th scope=”col”>a</th>
      <th scope=”col”>b</th>
      </tr>
      </thead>
      <tbody>
      <tr>
      <td>line 1</td>
      <td>2</td>
      </tr>
      <tr>
      <td>line 2</td>
      <td>
      <p>1</p>
      </td>
      </tr>
      </tbody>
      </table>

    • Copy and paste the following code into the source (here’s jquery.tablesorter.min.js):

      <script type=”text/javascript” src=”/Data/Sites/1/skins/OTPv1/jquery.tablesorter.min.js”></script> <script type=”text/javascript”>
      $(document).ready(function() {
      // call the tablesorter plugin
      $(“.tablesorter”).tablesorter({
      // sort on the third column, order ascending
      sortList: [[0,0],[1,0]]
      });
      });
      </script>

  2. That’s it!  Here is an example of a working sortable table

a

b

line 1

2

line 2

1