Presentational jQuery

Presentational jQuery Balancing jQuery and CSSPresentational jQuery Doug Neiner

Presentational jQuery Doug Neiner

Presentational jQuery Balancing jQuery and CSSPresentational jQuery Doug Neiner

Presentational jQuery • jQuery CSS Primer • .css() vs. Style Sheets vs. <style> blocks • Rules of the Road Balancing jQuery and CSS • Moving AroundPresentational jQuery Doug Neiner

jQuery CSS Primer • jQuery adjusts the .style property on the DOM element to make CSS changes div.style.backgroundColor = "#aaa";Presentational jQuery Doug Neiner

jQuery CSS Primer var div = document.getElementById( "#test" ); // JS div.style.backgroundColor = "#aaa"; // jQuery $(div).css( "backgroundColor", "#aaa" ); $(div).css( "background-color", "#aaa" ); // JS div.style.color = "#000"; div.style.textDecoration = "underline"; // jQuery $(div).css({ color: "#000", textDecoration: "underline" });Presentational jQuery Doug Neiner

jQuery CSS Primer • jQuery adjusts the .style property on the DOM element div.style.backgroundColor = "#aaa"; • It is the equivalent of setting an inline style <div style="background-color: #aaa"> … </div> • This overrides pretty much any rule speciﬁed elsewherePresentational jQuery Doug Neiner

Getting CSS Values // Get the value for #test $( "#test" ).css( "border-top-width" ); // Get the value for the ﬁrst item in the result set $( "div" ).css( "border-top-width" ); // Get all the values in the result set var values = $( "div" ).map( function () { return $(this).css( "border-top-width" ); }).get();Presentational jQuery Doug Neiner

Dynamic Setters // Get the value for #test $( "div" ).css( "border-top-width", function ( i, old ) { return ( i + 1 ) * 2; // New Value });Presentational jQuery Doug Neiner

.css() vs. Style Sheets vs. <style> Choosing the Best Tool for the TaskPresentational jQuery Doug Neiner

Style Sheet • Pros • Very fast • Can be easily overridden • Provides a customized foundation • Clear separation of logic and style • Cons • You must know the element states before hand • You must be able to select the elements • Is not (generally) reactivePresentational jQuery Doug Neiner

.css() Method • Pros • Very convenient • Highly dynamic and reactive • Can act on an arbitrary selection of elements • Cons • Not easily overridden • No separation of logic and stylePresentational jQuery Doug Neiner

Style Sheet <style> jQuery • To set initial • BulkChanges • Totransition state to elements between states • To handle • Defaults that predictable can be • Tohandle states overridden unpredictable states • Bulk changes to elements • One and two- off changes to elementsPresentational jQuery Doug Neiner

A note to plugin developers • If you need a lot of styles, do it in a stylesheet • No asset path issues • Easily customized • Nice separation of logic and style • Ifyou have to do it only in JS, prepend it to the <head> in a <style> block.Presentational jQuery Doug Neiner

Rules of the Road Avoiding Common MistakesPresentational jQuery Doug Neiner

Beware of Iteration Dont call .css() multiple times unless neededPresentational jQuery Doug Neiner

Incorrect Approach var $div = $("div"); $div.css(backgroundColor, red); if ( some_test === true ) { $div.css(color, black); } ... if ( some_other_test === true ) { $div.css(display, block) .css(position, relative); }Presentational jQuery Doug Neiner

Correct Approach var css = { backgroundColor: "red" }; if ( some_test === true ) { css.color = "black"; } ... if ( some_other_test === true ) { css.display = "block"; css.position = "relative"; } $("div").css( css );Presentational jQuery Doug Neiner

Incorrect Approach var colors = $(".color"); $(".ﬁlter-by-color").click( function () { colors.toggle(); });Presentational jQuery Doug Neiner

Correct Approach var color_parent = $("#list"); $(".ﬁlter-by-color").click( function () { color_parent.toggleClass( "show-colors" ); }); .color { display: none } #list.show-colors .color { display: block }Presentational jQuery Doug Neiner

Class Methods • addClass( classNames ) • removeClass( classNames ) • toggleClass( classNames, is_true ) • hasClass( className ) • is( ".className1.className2")Presentational jQuery Doug Neiner

Write code like you run errands Dont keep revisiting the same store on the same dayPresentational jQuery Doug Neiner

Setting Initial State To js or no-jsPresentational jQuery Doug Neiner

Incorrect Approach $( document ).ready( function () { $( "#dialog, #menu, #footer" ).hide(); $( "#progress-bar" ).show(); });Presentational jQuery Doug Neiner

Correct Approach <html class="no-js"> … <script> document.documentElement.className = document.documentElement.className.replace("no-js", "js"); </script> #dialog, #menu, #footer { display: block } .no-js #progress-bar, .js #dialog, .js #menu, .js #footer { display: none } Modernizer does this for youPresentational jQuery Doug Neiner

Moving Around jQuery Animation . I will ex ercise e coding s a liv rial on on wa e Thi s secti b e mate g, and ng som queuin blishi thod, on pu n me w orking nimatio s A sing. jQuery eaPresentational jQuery Doug Neiner

twitter @dougneiner email doug@dougneiner.com web http://dougneiner.comPresentational jQuery Doug Neiner

http://lanyrd.com	13
http://twitter.com	2
https://lanyrd.com	1

Presentational jQuery

by Doug Neiner on Apr 19, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 16

Statistics

Presentational jQuery — Presentation Transcript