07 common j query tasks.pptx

COMMON JQUERY TASKS

One of the most common things we do with jQuery is manipulate images

To swap images, you change the src attribute • Example: $('#someImg').mouseover(function () { $('#someImg').prop('src', 'newImg.png');});

You can preload your images to avoid a visual delay by populating a fake object's src property

var tempImg = new Image();tempImg.src = 'images/car1.png';• Simply setting its source will ask for the image and cache

it

Use the hover event for an image rollover effect • Example: var btn = $('#goButton');btn.hover(function () { btn.prop('src', 'images/goBtnOn.png'); }, function () { bnt.prop('src', 'images/goBtnOff.png'); }});• Remember that any element's event handler can affect

any other element; it doesn't have to be the same one

The web is all about going from page to page

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

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

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

You can intercept the navigation with ... preventDefault();

$('#id').click(function(e) { $('#theDiv').show(); e.preventDefault();});

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');

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.

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);

JQUERY PLUG-INS

How to use plugins 1.  Download the JavaScript and CSS files into your site 2.  Add <link> and <script> tags 3.  Edit your HTML structure 4.  Call the plug-in function

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

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>

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; }

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); } ); });

tl;dr •  There are many ways jQuery can make your pages

visually pleasing and easier to use • Mouseovers, preloading images improve performance • We can reassign links to do our bidding • Stop links from forwarding with 'return false;' • Create pop-up windows and control them with JavaScript •  Typical jQuery UX attack: 1.  Add normal HTML elements 2.  Style them to appear properly 3.  Write jQuery to show/hide/position them

07 common j query tasks.pptx

Technology

Transcript of 07 common j query tasks.pptx