Using JQuery with Lasso

This article introduces JQuery and shows how a simple newsticker plugin can be used with Lasso. In addition, it shows how Lasso can be used to automatically add the required JQuery elements to the head of the document.

Introduction

JQuery is a JavaScript library which makes many of the tasks required for creating dynamic HTML, Web 2.0 pages, or performing AJAX updates easier. If you are a JavaScript programmer then the tools in JQuery can significantly reduce the amount of code you need to write to perform complex tasks.

There are also many plug-ins available for JQuery which provide UI elements or special effects. These plug-ins require very little JavaScript code in order to do some pretty amazing things. The Simple Example below shows how a Newsticker plug-in can be used to show an animated newsticker on your page using only a single line of JavaScript code!

This tip provides a quick introduction to JQuery by way of the Newsticker plug-in example. It also shows how the plug-in can be wrapped in a Lasso custom tag so that you can add a newsticker to your page with just a single Lasso tag call. All the details of calling JQuery and writing JavaScript are handled for you.

• JQuery Page - http://jquery.com/
• Newsticker plug-in - http://www.texotela.co.uk/code/jquery/newsticker/

Download

The examples which are described in this tip are included in the JQuery_Introduction.zip file which you can download on this page. Unzip the archive and place the "jquery" folder in your Web server root. Call the "default.lasso" page inside to see the examples live.

JQuery_Introduction.zip 

Simple Example

Using JQuery on your site, or a JQuery plug-in requires a few elements. You must include the JQuery JavaScript file and plug-in JavaScript file using HTML

  <script type="text/javascript" src="/jquery/jquery-1.4.2.pack.js"></script>

  <script type="text/javascript" src="/jquery/jquery.newsticker.pack.js"></script>

Most JQuery plug-ins modify an element on your page so that it looks different, animates, etc. The Newsticker plug-in we are using takes an HTML list and formats it as an animated newsticker with a dashed border. On our page we define the HTML list, but when we call the JQuery plug-in it transforms into the newsticker. The ID of the list element is important. We will use it in the JavaScript and CSS to refer to this element.

  <ul id="jquery_newsticker">
    <li>JQuery Page -  http://jquery.com/</li>
    <li>Newsticker plug-in -  http://www.texotela.co.uk/code/jquery/newsticker/</li>
    <li>LassoSoft -  http://www.lassosoft.com/</li>
  </ul>

A single line of JQuery is required to transform this HTML list into the newsticker. That line is shown below. The $(...) is a JQuery selector, it selects one or more elements of your page. You can use CSS selectors within it as well as other forms. In this line we are selecting all elements with the ID "jquery_newsticker". The newsticker() function is defined by the plug-in and does all the work of making the list into a newsticker. The newsticker() function takes one optional parameter which specifies how long in milliseconds each news item should be shown.

  $("#jquery_newsticker").newsticker();

One of the quirks of JavaScript is that any functions which modify an element on the page must be called after the element has already been parsed by the Web browser. You can't modify an element the browser doesn't know about yet! JQuery provides a standard method of calling JavaScript only when the page is ready called read(). The following three lines thus transform our HTML list into a newsticker, only after the page is completely parsed. This <script> element goes into the head of the docuemnt.

  <script type="text/javascript">
    $(document).ready(function() {
      $("#jquery_newsticker").newsticker();
    });
  </script>

Finally, we need some CSS in order to format the list properly before it is transformed into the newsticker. The CSS can also control the basic appearance of the newsticker including its font, size, etc. The CSS we are using is based on that provided by the plug-in authors. For many plug-ins the CSS is essential. Note that the CSS selector #jquery_newsticker is exactly the same as the selector we used in the JQuery code. This

  <style type="text/css">
    #jquery_newsticker {
      list-style-type: none;
      border: 1px dashed #000000;
      background: #ffffff;
      padding: 3px;
      margin: 0px;
      width: 432px;
    }
  </style>

Now, when we load the page our HTML list is initially formatted using the CSS we defined. Once the page is ready JQuery calls our plug-in initialization function newsticker() on our list. The plug-in does all the work of transforming the HTML list into a newsticker. The finished result is shown here.

• JQuery Page - http://jquery.com/
• Newsticker plug-in - http://www.texotela.co.uk/code/jquery/newsticker/

Article originally published on LassoTech.com

Author: Fletcher Sandbeck
Created: 19 Feb 2008
Last Modified: 26 Feb 2011