jQuery SUG Group Introduction

1,232 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,232
On SlideShare
0
From Embeds
0
Number of Embeds
173
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

jQuery SUG Group Introduction

  1. 1. Andrew Chalkley<br />UI Developer<br />
  2. 2. The Proper Way<br />CSS<br />Ye Olde Way<br />Tables<br />Obtrusive<br />
  3. 3. CSS evangelists told us that there should be a separation<br /> of layout from markup.<br />JavaScript evangelists tell us today that there should be the separation of behavior from markup.<br />
  4. 4. Bad<br />&lt;a href=“javascript:window.open(‘somepage.html’)”&gt;Some Page&lt;/a&gt;<br />&lt;a href=“#” onclick=“window.open(‘somepage.html’); return false;”&gt;Some Page&lt;/a&gt;<br />Better<br />&lt;a href=“somepage.html” onclick=“window.open(‘somepage.html’); return false;”&gt;...&lt;/a&gt;<br />Best<br />&lt;a href=“somepage.html” class=“new_window”&gt;Some Page&lt;/a&gt;<br />
  5. 5. JavaScript Implementation<br />window.onload = function() {<br />}<br />var anchors = document.getElementsByTagName(‘a’);<br /> for (vari = 0, anchor; i &lt; anchors.length; i++) {<br /> }<br /> if (anchor.className == “new_window”) {<br />anchor.onclick = function() {<br />varhref = this.href;<br />window.open(href);<br /> return false;<br /> }<br /> }<br />
  6. 6. But wait…<br /><ul><li>window.onload executes after page is completely loaded (with images)
  7. 7. it overrides any existing load or click handlers
  8. 8. cannot handle class=“new_windowexternal_link”
  9. 9. it leaks memory in IE6</li></ul>The Answer…<br />
  10. 10. <ul><li> CSS Selectors $(“.new_window”) – shallow learning curve
  11. 11. Cross-browser support
  12. 12. Compatibility mode (DWR, Prototype, etc)
  13. 13. Executes when DOM is ready (before images have loaded)
  14. 14. Write less, do more</li></li></ul><li>$(function() {<br />});<br /> $(“a.new_window”).click(function() {<br /> });<br />window.open( $(this).attr(“href”) );<br /> return false;<br />
  15. 15. window.onload = function() {<br />}<br />var anchors = document.getElementsByTagName(‘a’);<br /> for (vari = 0, anchor; i &lt; anchors.length; i++) {<br /> }<br /> if (anchor.className == “new_window”) {<br />anchor.onclick = function() {<br />varhref = this.href;<br />window.open(href);<br /> return false;<br /> }<br /> }<br />
  16. 16. $(function() {<br />});<br /> $(“a.new_window”).click(function() {<br /> });<br />window.open( $(this).attr(“href”) );<br /> return false;<br />
  17. 17. DEMO<br />

×