Date post: | 15-Feb-2017 |
Category: |
Technology |
Upload: | rap-payne |
View: | 94 times |
Download: | 0 times |
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.
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'
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