08 navigation
DESCRIPTION
TRANSCRIPT
![Page 1: 08 navigation](https://reader031.vdocument.in/reader031/viewer/2022020110/5492a215ac7959292e8b467c/html5/thumbnails/1.jpg)
JQUERY NAVIGATION Using jQuery's mojo to help your visitors get around
![Page 2: 08 navigation](https://reader031.vdocument.in/reader031/viewer/2022020110/5492a215ac7959292e8b467c/html5/thumbnails/2.jpg)
The web is all about going from page to page
![Page 3: 08 navigation](https://reader031.vdocument.in/reader031/viewer/2022020110/5492a215ac7959292e8b467c/html5/thumbnails/3.jpg)
We can make some real magic happen when jQuery alters the links
• Select links • Reassign their location • Stop them from going there • Open links in other windows
![Page 4: 08 navigation](https://reader031.vdocument.in/reader031/viewer/2022020110/5492a215ac7959292e8b467c/html5/thumbnails/4.jpg)
Selecting links • Quick quiz … what do each of these select? $('a') – ___________________!$('#mainNav a') – ___________________!$('a[href^="http://"]') – ________________!$('a[href$=".pdf"]') – ___________________!$('a[href*="tic.com"]') – __________________!• Once selected, you can each() through the resulting links
![Page 5: 08 navigation](https://reader031.vdocument.in/reader031/viewer/2022020110/5492a215ac7959292e8b467c/html5/thumbnails/5.jpg)
You can change a link's destination • Change the href attribute $('#someLink').prop('href',"http://tic.com/props");!
![Page 6: 08 navigation](https://reader031.vdocument.in/reader031/viewer/2022020110/5492a215ac7959292e8b467c/html5/thumbnails/6.jpg)
You can intercept the navigation • return false • event.preventDefault()
$('#id').click(function() {! $('#theDiv').show();! return false;!});
![Page 7: 08 navigation](https://reader031.vdocument.in/reader031/viewer/2022020110/5492a215ac7959292e8b467c/html5/thumbnails/7.jpg)
If you open external links in a new window, you won't lose eyeballs
• Links with a target of _blank will open in a new window
• $('a[href^="http:"]')!• .not('[href*="tic.com"]')!• .attr('target','_blank');!
![Page 8: 08 navigation](https://reader031.vdocument.in/reader031/viewer/2022020110/5492a215ac7959292e8b467c/html5/thumbnails/8.jpg)
How to create a new window or tab open(URL, windowName, properties)!
… or … var windowHandle = open(URL, windowName, properties)!
• Opens URL in a window called "windowName" • If there's no window called "windowName", a new one is
created • But if "windowName" is already existing, the URL is opened in
that window.
![Page 9: 08 navigation](https://reader031.vdocument.in/reader031/viewer/2022020110/5492a215ac7959292e8b467c/html5/thumbnails/9.jpg)
Windows have many properties
• height & width (pixels) • left & top (pixels) • menubar (yes|no) • toolbar (yes|no) • location (yes|no) • status (yes|no) • resizable (yes|no) • scrollbars (yes|no) • titlebar (yes|no)
'height=200,width=400,left=100,top=100,menubar=yes,toolbar=no,location=no,titlebar=no'!
![Page 10: 08 navigation](https://reader031.vdocument.in/reader031/viewer/2022020110/5492a215ac7959292e8b467c/html5/thumbnails/10.jpg)
Hang on to your new window's reference so you can remotely control it • var helpWin = open('help.html', '_blank'); • helpWin.close(); • helpWin.blur(); //Pop under other windows • helpWin.focus(); //Pop on top • helpWin.moveBy(x,y); • helpWin.moveTo(x,y); • helpWin.resizeBy(x,y); • helpWin.resizeTo(x,y); • helpWin.scrollBy(x,y); • helpWin.scrollTo(x,y);
![Page 11: 08 navigation](https://reader031.vdocument.in/reader031/viewer/2022020110/5492a215ac7959292e8b467c/html5/thumbnails/11.jpg)
How do you host a page within a page? iframes!
<iframe id="ticIFrame">!</iframe>!Then in the JavaScript … $("#ticIFrame")! .attr('src','tic.com');!
![Page 12: 08 navigation](https://reader031.vdocument.in/reader031/viewer/2022020110/5492a215ac7959292e8b467c/html5/thumbnails/12.jpg)
Dropdown menus are a great example of improving UI with jQuery 1. Add links to your html
• Putting them in nested <li>s or <div>s make them easy to select
2. Style the top links to display side-by-side and the sub-links to display under the top-level
3. Add jQuery to display submenus when the top level is clicked
• We'll drill into each on the next few pages • Important! This exercise is not for you to memorize or
even completely understand immediately. It is for you to get an idea of the strategy of UX with jQuery
![Page 13: 08 navigation](https://reader031.vdocument.in/reader031/viewer/2022020110/5492a215ac7959292e8b467c/html5/thumbnails/13.jpg)
Menus: Add links to your html <ul id="nav">! <li><a href="#">Parent 01</a></li>! <li><a href="#">Parent 02</a>! <ul>! <li><a href="#">Item 01</a></li>! <li><a href="#">Item 02</a></li>! <li><a href="#">Item 03</a></li>! </ul>! <div class="clear"></div>! </li>! <li><a href="#">Parent 03</a>! <ul>! <li><a href="#">Item 04</a></li>! <li><a href="#">Item 05</a></li>! <li><a href="#">Item 06</a></li>! <li><a href="#">Item 07</a></li>! </ul> ! <div class="clear"></div>! </li>! <li><a href="#">Parent 04</a></li>!</ul>!<div class="clear"></div>!
![Page 14: 08 navigation](https://reader031.vdocument.in/reader031/viewer/2022020110/5492a215ac7959292e8b467c/html5/thumbnails/14.jpg)
Style the elements so they appear properly .clear {clear:both;} !/* top-level menu */!#nav li {! float:left; ! width:100px; ! background:#ccc; ! position:relative;!}!!
/* submenu */!#nav ul {! display:none; !}!!
![Page 15: 08 navigation](https://reader031.vdocument.in/reader031/viewer/2022020110/5492a215ac7959292e8b467c/html5/thumbnails/15.jpg)
Create jQuery to make them appear/disappear $(document).ready(function () { ! $('#nav li').hover(! function () { //show its submenu! $('ul', this).slideDown(100);! }, ! function () { //hide its submenu! $('ul', this).slideUp(100); ! }! ); !});!
![Page 16: 08 navigation](https://reader031.vdocument.in/reader031/viewer/2022020110/5492a215ac7959292e8b467c/html5/thumbnails/16.jpg)
Conclusion • We can reassign links to do our bidding • Stop links from forwarding with 'return false;' • Create pop-up windows and control them with JavaScript • iFrames are great for hosting pages within pages • Typical jQuery UX attack: 1. Add normal HTML elements 2. Style them to appear properly 3. Write jQuery to show/hide/position them