08 navigation


of 16

  • date post

  • Category


  • view

  • download


Embed Size (px)



Transcript of 08 navigation

  • 1. JQUERY NAVIGATIONUsing jQuerys mojo to help your visitors getaround
  • 2. The web is all about going from page topage
  • 3. We can make somereal magic happenwhen jQuery altersthe links Select links Reassign their location Stop them from going there Open links in other windows
  • 4. 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
  • 5. You can change a links destination Change the href attribute$(#someLink).prop(href,"http://tic.com/props");!
  • 6. You canintercept thenavigation return false event.preventDefault() $(#id).click(function() {! $(#theDiv).show();! return false;! });
  • 7. If you open external links in a new window, you wont lose eyeballs Links with a target of _blank will open in a new window $(a[href^="http:"])! .not([href*="tic.com"])! .attr(target,_blank);!
  • 8. 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 theres no window called "windowName", a new one is created But if "windowName" is already existing, the URL is opened in that window.
  • 9. 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!
  • 10. Hang on to your new windows referenceso 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);
  • 11. How do you host a page within a page?iframes! ! ! Then in the JavaScript $("#ticIFrame")! .attr(src,tic.com);!
  • 12. Dropdown menus are a great example ofimproving UI with jQuery1. Add links to your html Putting them in nested
  • s or
    s make them easy to select2. Style the top links to display side-by-side and the sub- links to display under the top-level3. Add jQuery to display submenus when the top level is clicked Well 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
  • 13. Menus: Add links to your html
    • !
    • Parent 01!
    • Parent 02!
      • !
      • Item 01!
      • Item 02!
      • Item 03!
    • Parent 03!
      • !
      • Item 04!
      • Item 05!
      • Item 06!
      • Item 07!
      ! !!
    • Parent 04!
  • 14. Style the elements so they appearproperly.clear {clear:both;} ! /* submenu */!/* top-level menu */! #nav ul {!#nav li {! display:none; !float:left; ! }!width:100px; ! !background:#ccc; !position:relative;!}!!
  • 15. 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); !}!);!});!
  • 16. 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 elements2. Style them to appear properly3. Write jQuery to show/hide/position them