EXPANDING YOUR INTERFACE WITH JQUERY jQueryUI and other advanced UI techniques

Good user experience == Win!

Create your HTML •  Three tabs in a div <div id="tabs"> <div data-panel="#Batman">Batman</div> <div data-panel="#Robin">Robin/Nightwing</div> <div data-panel="#Huntress">Huntress</div></div>•  Three content panels in a div <div id="content"> <div id="Batman">Created by Bob Kane,...</div> <div id="Robin">Dick Grayson was a ...</div> <div id="Huntress">Daughter of Gotha...</div></div>

Create your jQuery •  First, hide all the content •  Last, click the first tab •  When the user clicks a tab, bring up its corresponding content $(document).ready(function () { $('#content > div').hide(); $('#tabs > div').click(function () { $('#content > div').hide(); var whichPanel = $(this).attr("data-panel"); $(whichPanel).fadeIn('normal'); }); $('#tabs > div:first').click();});

Create your CSS • Float the tabs so they're side-by-side #tabs > div { float: left;}div { padding: 5px; margin: 5px; border: 1px solid black;}

Content slider

How to determine the size of elements

•  The CSS size •  height() and width() •  ex: var x = $('selector').width();

• width/height + padding •  innerWidth() and innerHeight()

• width/height + padding + border •  outerWidth() and outerHeight()

How to determine the location of elements

•  $(selector).offset() •  Pixels from the top-left corner of the document

•  $(selector).position() •  Pixels from the top-left corner of its DOM parent

• Both return one of these: •  { left : 100, top : 150 }

• You can also set the positions: •  $(selector).position({ left : 10, top : 50 });

How to determine the scrolling position • All in pixels •  To get var y = $(document).scrollTop()var x = $(document).scrollLeft()

•  To set $(document).scrollTop(y)$(document).scrollLeft(x)

Tooltips can make the UX very satisfying

• Write tooltip in a hidden div. Wrap text in a span • Write jQuery: $('.tooltip').hover(showTip,hideTip); •  showTip() shows the div and follows the mouse or uses

the span's location.

Conclusion •  Tabbed documents and tooltips can be added easily • You can add a content slider with easySlider • You can find and set the size with width() and height() • You can find and set the position() and offset() • Scroll position is easy to get and set with scrollTop() and

scrollLeft()