Rogtopia

jQuery is a great way to add flare to your site easily with a vast array of utilities to animate, perform ajax calls, modify the DOM, retrieve JSON calls, and various other tasks usually tedious with native javascript. Today, we are going to look at jQuery’s UI library and how you can customize it’s widgets to suit the look and feel of your website.

jQuery UI - http://ui.jquery.com/

jQuery UI will provide you with themed user interface widgets such as modals and dialogs, tab systems, date pickers, accordian menus and more.  The beauty of it all, is that you can customize the look of these widgets with an easy to use themer from their website called ThemeRoller.

Simply go through the theme setup and click the download link to use what widgets you would like to include with your jQuery UI javascript frameworking.

A Quicky, Effecient Sample

Visit jQuery UI in a Dialog

<script type="text/javascript">
// the caller
$('.pop-link').poplink();

// the jquery mini-plugin
// finds all anchor elements matching selector and applies a custom click event
// -- takes the href and loads it in a dialog's iframe with showSite().
$.fn.poplink = function() {
  return this.each(function () {
    var _url = $(this).attr('href');
    $(this).bind('click', function(event) {
      event.preventDefault();
      showSite(_url);
    });
  });
}

// the showSite function
var showSite = function (_url) {
  // configure this dialogs defaults
  $('#dialog').dialog({
   'bgiframe':true,
   'modal':true,
   'resizable':false,
   'draggable':false,
   'autoOpen':false,
   'width':980,
   'height':620,
   'title':'Forwarded to ' + _url,
   'buttons' : {
     'close' : function () { $(this).dialog('destroy'); },
     'forward' : function () { history.go(1); },
     'back' : function () { history.go(-1); }
    }
  });

  // empty the dialog and set it's html to the current _url in the iframe
  $('#dialog').empty().html('<iframe src="' + _url + '" marginwidth="0" marginheight="0" style="width:100%;height:100%;" scrolling="auto" frameborders="no"></frame>').dialog('open');
}
</script>

Anyways, Go configure your custom theme and try jQuery UI for yourself.  Fun times to be had by everyone!