Indianapolis Web Content Management

Our website has moved but we've left our old posts up here. Please visit http://www.marketpath.com/

First | Prev | Page 1 / 2 | Next | Last

The amazing capabilities of jQuery UI (Part 1)

Posted 9:10 AM by

The abillities of jQuery's UI 1.8.x series is amazing. Some of the built-in features of the UI are tabs, dialogs, datepickers, accordion, sortable items, and draggable items to name a few.

Tabs

On our project management site, Nexus, we use the tabs feature of jQuery's UI for our project details screen (see below).

Marketpath Nexus' Project Details Page

Creating the tabs is a very simple jQuery function call (see below). In addition to this basic function call to tabs, there are other settings using JSON that can be set to fully customize the tabs. Also you can use ThemeRoller or your own custom styles to make the tabs look more integrated into the website's design and layout.

$('#tabs').tabs();

In the HTML code, the tabs are set up as seen below.

<div id="tabs">
     <ul>
          <li><a href="#tabs-1">Tab 1</a></li>
          <li><a href="#tabs-2">Tab 2</a></li>
          <li><a href="#tabs-3">Tab 3</a></li>
     </ul>
     <div id="tabs-1">
          Content in Tab 1
     </div>
     <div id="tabs-2">
          Content in Tab 2
     </div>
     <div id="tabs-3">
          Content in Tab 3
     </div>
</div>

As you can see, jQuery does all the styling and it saves a lot of time. For more examples using tabs, visit the jQuery UI Tabs demo page.

Dialog

In addition to using tabs in Nexus, we also use dialogs provided by the jQuery UI (see below).

Marketpath Nexus' Project Details Dialog

The dialogs are created the same way in jQuery as are tabs (see below). There are also options which are passed in to help customize the dialog's look and feel.

$('#dialog').dialog();

In the HTML code, the tabs are set up as seen below.

<div id="dialog" title="Basic dialog">
     <p>This is the default dialog which is useful for displaying information.</p>
</div>

The dialog can be any size and can be positioned to appear in a specific location on the page at the time of the dialog's crteation. In addition, dialogs, by default, have an 'OK' button but jQuery dialogs can have customized buttons. Also, you can bind functions to events such as adding a function that saves data in a dialog when the user closes the dialog.

Conclusion

Instead of reinventing the wheel with Javascript objects, check out jQuery's UI and see what has already been done. It will save you a lot of time in development.

link
| comments (1)

Personal Introduction and 'How jQuery is the best library ever'

Posted 2:00 PM by

Hi. My name is Larry Tylenda, and I am one of the developers working at Marketpath. I officially began working full-time at Marketpath on January 3, 2011, but have interned for Marketpath since December 2008. I graduated form the University of Indianapolis in December 2010. I majored in Computer Science and Mathematics and I love programming and learning about math and technology.

In this post, I will be talking about jQuery and its amazing capabilities.

jQuery Logo

jQuery is a JavaScript library used to join common lengthy JavaScript techniques into a simple syntax. An example of this would be to grab all of the items in a list and change the background of all the items to blue. With regular JavaScript this would be:

var arrItems = document.getElementsByTag('li');
for(var i = 0; i < arrItems.length; i++)
{
    arrItems[i].style.backgroundColor = "#0000FF";
}

but with jQuery the code would be:

$('li').css('backgroundColor','#0000FF');

As you can see, jQuery makes things simpler and is faster to use. Also, its selector options are far greater than just plain JavaScript. say there were two lists on the page. then the first block of code would need a conditional statement to check if it is a child of one list or another. With jQuery, all you would have to do is change 'li' in the second block of code to '#<%%LIST-ID%%> li'. So instead of adding a whole conditional statement and lengthening the amount of code in your document, you can use jQuery's extensive selecors to find the element or elements that you wish to edit or select.

Next week I will be talking about jQuery's amazing UI. Until then, I encourage you to check out jQuery's website at jquery.com.

link
| comments (0)
First | Prev | Page 1 / 2 | Next | Last
RSS Feed