08 navigation

16
JQUERY NAVIGATION Using jQuery's mojo to help your visitors get around

description

 

Transcript of 08 navigation

Page 1: 08 navigation

JQUERY NAVIGATION Using jQuery's mojo to help your visitors get around

Page 2: 08 navigation

The web is all about going from page to page

Page 3: 08 navigation

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

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

You can change a link's destination • Change the href attribute $('#someLink').prop('href',"http://tic.com/props");!

Page 6: 08 navigation

You can intercept the navigation •  return false •  event.preventDefault()

$('#id').click(function() {! $('#theDiv').show();! return false;!});

Page 7: 08 navigation

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

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

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

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

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

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

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

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

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

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