Date post: | 15-Apr-2017 |
Category: |
Technology |
Upload: | rap-payne |
View: | 92 times |
Download: | 0 times |
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()