1. CHAPTER 10:EXPANDING YOURINTERFACEjQueryUI and other advanced UI techniques

2. Good userexperience == Win! 3. Create your HTML Three tabs in a div

Big Bang Theory

Star Trek

Community

Three content panels in a div

Bazinga! ...

Classic geek show ...

Abed rules! ...

4. 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();});}); 5. Create your CSS Float the tabs so theyre side-by-side#tabs > div {float: left;}div {padding: 5px;margin: 5px;border: 1px solid black;} 6. Content slider 7. How to determine the sizeof 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() 8. 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 }); 9. How to determine the scrolling position $(document).scrollTop() $(document).scrollLeft() 10. 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 spans location. 11. 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() 12. Lab Tabbed panels tutorial pp. 307 311 AnythingSlider tutorial 314 - 315 Tooltips tutorial pp. 329 - 338