08 navigation

  • 164 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
164
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
3
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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! <iframe id="ticIFrame">! </iframe>! 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 <li>s or <div>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<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>!
  • 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