As with all things jQuery, there is very little required. Just set up a form, add a quick call to jQuery and you’re done. By default, when the datepicker is bound to an edit input, all that is required is to click on the edit (or tab into it) and the calendar control will appear.

<form>
  <fieldset>
    <label>Select a date: <input type="text" id="the_date" name="the_date" /></label>
  </fieldset>
</form>
 
<script type="text/javascript">
  jQuery('#the_date').datepicker();
</script>

Here it is in action (click on the input field):

Personally, I like a little more visual indication on date fields. Providing a calendar icon to the right of the input field has become a de facto standard on the web, so I’ll show how simple it is to add that to a jQuery UI datepicker.

<form>
  <fieldset>
    <label>Select a date: <input type="text" id="the_date" name="the_date" /></label>
  </fieldset>
</form>
 
<script type="text/javascript">
  jQuery('#the_date').datepicker({showOn: 'both', buttonImage: '/wp-content/themes/thesis/custom/images/ical.png', buttonImageOnly: true});
</script>

As you can see, I added a small set of options to the datepicker() method. The showOn option indicates to show the calendar when the button is clicked and when the control has focus. The buttonImage option is the URL to the image and the buttonImageOnly option indicates to display the image alone, not as part of an actual button control. Visit the jQuery UI site for more datepicker control options.

Here it is with the calendar button (download the button image here):

The jQuery UI datepicker provides a great deal of flexibility and control with a minimum required effort. Check it out for yourself!

To set up a basic tabbed layout, start with an enclosing container followed immediately by an unordered list containing the tabs and then the containers for the actual tab content. For example:

<div id="example_tabs">
  <ul>
    <li><a href="#example_tab_1">Tab 1</a></li>
    <li><a href="#example_tab_2">Tab 1</a></li>
    <li><a href="#example_tab_3">Tab 1</a></li>
  </ul>
  <div id="example_tab_1">
    <p>Content for tab 1</p>
  </div>
  <div id="example_tab_2">
    <p>Content for tab 2</p>
  </div>
  <div id="example_tab_3">
    <p>Content for tab 3</p>
  </div>
</div>
<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery('#example_tabs').tabs();
  });
</script>

And here’s the result:

Obvious styling issues notwithstanding, I can’t imagine an easier way to build a tabbed interface for a web page. As always, read the manual for more information and enjoy!

jQuery and jQuery UI provide an overlay-based approach to solving this problem that is both visually appealing and functionally complete. And, as with all things jQuery, it is very simple to implement.

Click here to see the popup (unless you’re reading this in a news reader, then you’ll need to view the post on site).

This sample is very simple to code in HTML and jQuery. Basically I provide a hidden DIV element containing the message to display and then initiate the dialog on page load. The link for the popup is also shown:

<div id="dialog" title="Example dialog">
	<p>Some text that you want to display to the user.</p>
</div>
<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery("#dialog").dialog({
      bgiframe: true, autoOpen: false, height: 100, modal: true
    });
  });
</script>
<a href="#" onclick="jQuery('#dialog').dialog('open'); return false">Click here to see the popup</a>

There are many more options describe on the jQuery UI dialog pages. One of the reasons that I prefer the jQuery UI dialog to any of the other overlay dialog/tooltip solutions is that the jQuery UI version is so easy to implement and has very good defaults. By default the dialog is draggable, sizeable and includes the appropriate control element for closing the dialog. Surprisingly many other solutions don’t have these features by default.

*Footnote: Yes, IE does have a modal popup window option, I know. It’s extremely non-standard and only supported in IE, so it’s not a reasonable solution in most cases.

In yesterday’s post, Geeking out, I forgot to mention the most important concept for both web designers and web developers to learn: CSS. Designers probably already understand the advantages, but developers implementing any complex functionality for a web site really need to know CSS today because of the client-side Javascript libraries that depend on CSS.

More than likely if you’re a web developer you’ve written at least some client-side Javascript. It’s only going to become more likely. It should be obvious that client-side code provides a great deal of richness and responsiveness to any web application. So if you’re a web developer that’s primarily been working on back-end code and you want to stay relevant, learn Javascript, CSS and jQuery. Let me give you one brief example.

Let’s say that you want to create a handy sortable list of elements so your end-users can reorder items on their view of a page. The design team wants the list to be displayed with alternating row colors so they are easy to read. Something like this:

• This is item 1
• This is item 2
• This is item 3
• This is item 4

Assuming the list is dynamically generated from a database and you’re a PHP programmer, you’re probably thinking of doing something like this:

$i = 0;
echo '<ul>';
foreach ($items as $item) {
  echo '<li ' . (($i++ % 2 == 0) ? 'class="alt-row"' : '') . '>' . $item . '</li>';
}
echo '</ul>';

That’s great, but it’s only part of the solution. Since the list is sortable on the client side, the list will have to be re-striped every time an item is moved, otherwise it will look wrong. The sorting and the striping both need to occur on the client side, so simplify the PHP to just create the list with no alternating classes, then use jQuery to do the client-side heavy lifting.

The jQuery (and jQuery UI for sortable) solution looks like this:

function learn_css_restripe() {
  jQuery('ul.example-sortable li').removeClass('alt-row');
  jQuery('ul.example-sortable li:even').addClass('alt-row');
}
 
jQuery(document).ready(function() {
  learn_css_restripe(); // call the restripe function on page ready to set the initial stripes
 
  // make the list sortable
  jQuery('ul.example-sortable').sortable();
  // whenever the list order changes, restripe
  jQuery('ul.example-sortable').bind('sortchange', function(event, ui) {learn_css_restripe();});
});

Understanding CSS and the DOM of the document is what makes using jQuery so powerful. Notice that the restripe function, learn_css_restripe doesn’t do any looping or have any direct references to an DOM element ids. Instead the function simply removes the alternating row class from every element of any unordered list with the example-sortable class. Then some jQuery selector magic, :even, is used to add the alternating row class back to just the even elements of the lists.

Since this technique is so generic, it is possible to have more than one list on the same page without changing any of the code at all. Here’s another list with more elements as an example:

• This is item A
• This is item B
• This is item C
• This is item D
• This is item E
• This is item F
• This is item G

As you can see, CSS is not just for designers. Great web developers will work with great designers to simplify both the layout and the code at the same time using CSS.