09 expanding your interface.pptx
-
Upload
rap-payne -
Category
Technology
-
view
94 -
download
0
Transcript of 09 expanding your interface.pptx
![Page 1: 09 expanding your interface.pptx](https://reader033.fdocuments.us/reader033/viewer/2022051709/587575c31a28ab78498b4cc9/html5/thumbnails/1.jpg)
EXPANDING YOUR INTERFACE WITH JQUERY jQueryUI and other advanced UI techniques
![Page 2: 09 expanding your interface.pptx](https://reader033.fdocuments.us/reader033/viewer/2022051709/587575c31a28ab78498b4cc9/html5/thumbnails/2.jpg)
Good user experience == Win!
![Page 3: 09 expanding your interface.pptx](https://reader033.fdocuments.us/reader033/viewer/2022051709/587575c31a28ab78498b4cc9/html5/thumbnails/3.jpg)
![Page 4: 09 expanding your interface.pptx](https://reader033.fdocuments.us/reader033/viewer/2022051709/587575c31a28ab78498b4cc9/html5/thumbnails/4.jpg)
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>
![Page 5: 09 expanding your interface.pptx](https://reader033.fdocuments.us/reader033/viewer/2022051709/587575c31a28ab78498b4cc9/html5/thumbnails/5.jpg)
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();});
![Page 6: 09 expanding your interface.pptx](https://reader033.fdocuments.us/reader033/viewer/2022051709/587575c31a28ab78498b4cc9/html5/thumbnails/6.jpg)
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;}
![Page 7: 09 expanding your interface.pptx](https://reader033.fdocuments.us/reader033/viewer/2022051709/587575c31a28ab78498b4cc9/html5/thumbnails/7.jpg)
Content slider
![Page 8: 09 expanding your interface.pptx](https://reader033.fdocuments.us/reader033/viewer/2022051709/587575c31a28ab78498b4cc9/html5/thumbnails/8.jpg)
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()
![Page 9: 09 expanding your interface.pptx](https://reader033.fdocuments.us/reader033/viewer/2022051709/587575c31a28ab78498b4cc9/html5/thumbnails/9.jpg)
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 });
![Page 10: 09 expanding your interface.pptx](https://reader033.fdocuments.us/reader033/viewer/2022051709/587575c31a28ab78498b4cc9/html5/thumbnails/10.jpg)
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)
![Page 11: 09 expanding your interface.pptx](https://reader033.fdocuments.us/reader033/viewer/2022051709/587575c31a28ab78498b4cc9/html5/thumbnails/11.jpg)
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.
![Page 12: 09 expanding your interface.pptx](https://reader033.fdocuments.us/reader033/viewer/2022051709/587575c31a28ab78498b4cc9/html5/thumbnails/12.jpg)
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()