jQuery, CSS3 and ColdFusion
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

jQuery, CSS3 and ColdFusion

  • 3,459 views
Uploaded on

This is a presentation I gave at the NCDevCon 2011 developer conference in Raleigh, NC Sept 17th, 2011.

This is a presentation I gave at the NCDevCon 2011 developer conference in Raleigh, NC Sept 17th, 2011.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,459
On Slideshare
3,456
From Embeds
3
Number of Embeds
2

Actions

Shares
Downloads
78
Comments
0
Likes
2

Embeds 3

http://www.linkedin.com 2
http://localhost 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. jQuery, CSS3 & ColdFusion
    Presented at NCDevCon 2011by:
    DenardSpringle
  • 2. Who Am I?
    Freelance Software Systems Engineer
    Rich internet and mobile applications
    Hardware, network and storage engineering
    CMMI process management & assessment
    Over 20 years IT experience
    Over 10 years ColdFusion experience
    Host of the Northern Virginia CFUG
    denard.springle@gmail.com
    http://www.nvcfug.org/
  • 3. UI Design – Then and Now(or ‘Why I used to loathe user interface design and what changed my mind!’)
    Traditional Web Design
    CSS3, HTML5 & jQuery
    Pet Peeve #1 – Multiple return trips to graphics applications (aka longer development cycles).
    Pet Peeve #2 – Multiple images make for slower loading sites.
    Pet Peeve #3 – Requires multiple designs and complicated Javascript for multi-screen development.
    Pet Peeve #4 – Interactive elements require multiple images.
    Virtually eliminates the need for graphics applications beyond composition.
    Virtually eliminates the need for images.
    Uses style sheets and media queries to support multi-screen development. jQuery has a Mobile edition.
    Allows interactive elements to be created and styled with or without images with ease.
  • 4. What is the jQuery library?
    Javascript RAD framework
    Handles cross-browser dependencies*
    Uses familiar CSS language selectors
    Packed with handy utility functions (like Ajax)
    Loads of available plugin’s or roll your own
    Works with other Javascript frameworks (including ColdFusion’s built-in functions)
    Works with native Javascript functions
    Works with (most) emerging standards (CSS3, HTML5)
    * Some plugin’s have cross-browser issues because they employ Javascript functions that are browser specific, or rely on deprecated jQuery 1.3 functions.
  • 5. Implementing the jQuery library
    Download from http://docs.jquery.com/Downloading_jQuery
    Download with jQuery UI themeroller
    <script src=‘jquery-1.x.x[.min].js’ type=‘text/javascript’>
    Google CDN @ <script src=‘http(s)://ajax.googleapis.com/ajax/libs/jquery/1.x.x/jquery.min.js’ type=‘text/javascript’>
    MSDN CDN @ <script src=‘http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.x.x.min.js’ type=‘text/javascript’>
    jQuery CDN @ <script src=‘http://code.jquery.com/jquery-1.x.x.min.js’ type=‘text/javascript’>
  • 6. Implementing the jQuery library
    jQuery(document).ready(function() { … code here …});
    $(funtion() { … code here …});
    $ == alias for ‘jQuery’
  • 7. jQuery Selectors – The Basics
    <div id=“myDiv” class=“myClass”></div>
    $(‘#myDiv’) – selects the element identified by the ‘myDiv’ id
    $(‘.myClass’) – selects any element assigned the ‘myClass’ class
    $(‘div’) –selects all <div> elements in the page
  • 8. jQuery Selectors – CSS Syntax
    <div id=“myDiv” class=“myClass”> <p>Hello <span id=“world” class=“red”>World</span>!</p></div>
    $(‘p’) – selects all paragraph elements in the page
    $(‘#myDiv p’) – selects all paragraph elements within the element with the ‘myDiv’ id
    $(‘.myClass p’) – selects all paragraph elements within the elements assigned the ‘myClass’ class.
    $(‘p#world’) – selects the element within any paragraph element with the ‘world’ id.
  • 9. jQuery Selectors – CSS Operators
    <div id=“myDiv” class=“myClass”> <p>Hello <span id=“world” class=“red”>World</span>!</p></div>
    $(‘#myDiv p span.red’) – selects all <span> elements assigned the ‘red’ class within a paragraph element that is within the element with the ‘myDiv’ id.
    $(‘#myDiv > p’) – selects all paragraph elements that are direct children of the element with the ‘myDiv’ id.
    $(‘#myDiv + p’) – selects the paragraph element that is immediately preceded by the element with the ‘myDiv’ id
  • 10. jQuery Selectors - CSS Filters
    <div id=“myDiv” class=“myClass”> <p>Hello <span id=“world” class=“red”>World</span>!</p> <p>Welcome to our website. We hope you like it!</p></div>
    $(‘#myDiv p:first’) – selects the first paragraph element that is within the element with the ‘myDiv’ id.
    $(‘#myDiv p:last’) – selects the last paragraph element that is within the element with the ‘myDiv’ id.
    $(‘p:even’) – selects all even paragraph elements in the page
  • 11. jQuery Chaining
    <a href=“http://jquery.com”>jQuery</a>
    $(“a[href^=‘http://’]”).attr(‘target’,’_blank’);
    $(“a[href^=’http://’]”).addClass(‘external’);
    $(“a[href^=‘http://’]”).css(‘fontWeight’,’bold’);
    $(“a[href^=‘http://’]”).attr(‘target’,’_blank’).addClass(‘external’).css(‘fontWeight’,’bold’);
  • 12. Working with Element Properties
    attr(name) – obtains the value assigned to the specified attribute for the first element in the matched set.
    attr(name,value) – sets the named attribute to the passed value for all elements in the matched set.
    attr(attributes) – uses a JSON object to set corresponding attributes onto all elements of the matched set.
  • 13. Working with Element Properties
    <imgsrc=“myImage.gif” id=“myImage” alt=“” title=“Voila!” /><imgsrc=“” id=“newImage” alt=“” title=“” />
    alert($(‘#myImage’).attr(‘title’));
    $(‘#newImage’).attr(‘src’,$(‘#myImage’).attr(‘src’));
    $(‘#myImage’).attr(‘alt’,’alternate image text’);
    $(‘#myImage’).attr({title: ’Bang!’, alt: ‘alternate image text’});
    $(‘#newImage’).attr(‘alt’,$(‘#myImage’).attr(‘title’));
  • 14. Changing Style with jQuery
    hasClass(name) – returns true if any element of the matched set possesses the passed class name.
    addClass(names) – specifies the name, or names, of classes to add to the matched set.
    removeClass(names) – specifies the name, or names, of classes to remove from the matched set.
    toggleClass(names) – specifies the name, or names, of classes that should be removed if they are present, or added if they are not present in the matched set
  • 15. Changing Style with jQuery
    css(name) – reads the value of the CSS property for the first element in the matched set
    css(name,value) – sets the value of the named css property for each element in the matched set
    css(properties) – sets the values using a JSON object for each element in the matched set
    width(), width(value) – reads the width of the first element or sets the width of all elements in the matched set
    height(), height(value) – reads the height of the first element or sets the height of all elements in the matched set
  • 16. Setting Element Content w/ jQuery
    html() – obtains the HTML content of the first element in the matched set
    html(content) – sets the passed HTML fragment as the content of all elements in the matched set
    text() – concatenates and returns all text content of the matched set
    text(content) – sets the text content of all elements in the matched set
  • 17. jQuery Events
    bind() – bind an event handler to all elements in a matched set
    unbind() – removes an event handler from all elements in a matched set
    All javascript events (mouseover, mouseout, mousedown, focus, blur, select, submit, etc.)
  • 18. jQuery Events
    <button id=‘myButton’ />
    $(‘#myButton’).bind(‘mouseovermouseout’, function() { $(this).toggleClass(‘highlight’); });
    $(‘.data-entry’).bind(‘focus’, function() { $(this).css({backgroundColor: ‘#000’, color: ‘#fff’}); });
  • 19. jQuery Events – Specific Event Binding
    <button id=‘myButton’ />
    click() – bind a click event handler to an element
    $(‘#myButton’).click(function() {window.location.href = ‘clickedPage.cfm’;});
    dblclick() – bind a double-click handler to an element
    $(‘#myButton’).dblclick(function() { $(this).width(300).height(100);});
  • 20. jQuery Events – Binding non-existent elements
    live() – bind an event handler to a matched set that does not (yet) exist in the dom
    $(‘#myButton’).live(‘mousedown’,function() {window.location.href = ‘clickedPage.cfm’;});
    die() – unbinds an event handler bound with live
    Use sparingly. Resource hog. Has to re-read the dom for every change in the dom
  • 21. jQuery AJAX Function
    $.ajax({options})
    Provides complete control over the entire AJAX process including specifying data sources, data type, event handlers, context, filters, etc. etc.
    All other Ajax functions are a subset of the $.ajax() function.
    Requires JSON and callback handler
  • 22. jQuery AJAX Methods
    load() – loads HTML content into the wrapped set. Callback function is optional
    $.get() – makes HTTP GET requests and requires a callback function
    $.getJSON – makes HTTP GET requests with a defined return data type of JSON, requires a callback function
  • 23. jQuery AJAX Methods
    $.post() – makes HTTP POSTs and requires a callback function
    $.ajax(), $.get() and $.post() response types:
    xml – passes XML dom to the callback function
    html – passes unprocessed HTML to the callback. <script> is evaluated.
    json– interpreted as JSON string, passed as object to the callback
    jsonp – same as json, but allows remote scripting
    script – processed as javascript and passed to the callback
    text – plain text passed to the callback
  • 24. Single API in jQuery – jQuery Side
    $.ajaxSetup({options});
    Accepts the same options as $.ajax()
    Set default options for all future $.ajax() calls (does not apply to $.get(), $.getJSON(), or $.post() as of v1.6.3). Defaults can still be overridden in subsequent individual $.ajax() calls.
    Specifying a default (single) url for all future requests using the $.ajaxSetup() method allows for single-api applications
    demo
  • 25. Single API in jQuery – CF Side
  • 26. Single API in jQuery – CF Side
    <!--- params--><cfparamname="URL.app" default="hello_world" /><!--- switch on the supplied URL.app value ---><cfswitch expression="#URL.app#"> <!--- Hello World App ---><cfcase value="hello_world"> <div class="content-text">Hello World! This content is derived from an AJAX request to the ColdFusion back-end!</div></cfcase><!--- Photo Viewer App ---><cfcase value="photo_viewer"> <div class="content-text">The photo viewer is still a work in progress....<br /> <br />Please check back later.</div></cfcase><!--- ERROR ---><cfdefaultcase> <div class="content-text">ERROR!</div></cfdefaultcase></cfswitch>
  • 27. jQuery Plugins
    Plugins are encapsulated functions within the jQuery scope that participate in chaining.
    Thousands of available plugins, both official and unofficial, and about as many blogs on how to write jQuery functionality and plugins
    http://plugins.jquery.com/ or Google search
    About 13,400,000 results for ‘jQuery plugins’ on Google
  • 28. jQuery Plugins – jQuery UI
    jQuery UI is now a sub-project of jQuery, but was originally a loose collection of plugins. Now it’s an integrated collection of plugins with a unified purpose and goal.
    Makes creating interactive UI painless, quick to develop and quick to execute.
    Widgets include: Tabs, Accordions, Buttons and Buttonsets, Sliders, Progress Bars, Autocompleters, Datepickers and Dialog Boxes… so far
    Tooltip, Menu, Menubar, Popup and Spinner are forthcoming
  • 29. jQuery UI - Themeroller
    http://jqueryui.com/themeroller/
    Allows you to quickly and easily generate .css and download jQuery and jQuery UI to theme the components generated by jQuery UI
    Provides an easy way to scope css for specific regions of the site
    Utilizes CSS3 for some of its effects (rounded corners) and transparent PNGs (not supported in IE6)
  • 30. Implementing the jQuery UI plugin
    <script src=‘jquery-ui-1.x.x[.min].js’ type=‘text/javascript’>
    Google CDN @ <script src=‘http://ajax.googleapis.com/ajax/libs/jqueryui/1.x.x/jquery-ui.min.js’ type=‘text/javascript’>
  • 31. jQuery UI – Drag and Drop +
    Draggable() and Droppable() – allows you to assign matched sets that can be dragged and matched sets which can be dropped onto
    Sortable() – allows you to assign a matched set that can be user sorted (with drag & drop)
    Resizable() – allows you to assign a matched set that can be resized by dragging one or more corners
    Selectable() – allows you to assign a matched set that can be selected by clicking on the element
  • 32. jQuery UI – Effects & Animations
    Effect() – applies one of the jQuery UI animated effects to a matched set
    Animate() – animates numerical css properties of a matched set
    Hide() – hides a matched set using one of the jQuery UI animated effects
    Show() – shows a matched set using one of the jQuery UI animated effects
  • 33. jQuery UI – Effects & Animations
    Blind
    Bounce
    Clip
    Drop
    Explode
    Fade
    Fold
    Highlight
    Puff
    Pulsate
    Scale
    Shake
    Size
    Slide
    Transfer
  • 34. HTML5 & CSS3 – Working Together
    <body> <header> <nav></nav> </header> <section> <article> <header></header> <figure></figure> <footer></footer> </article> <dialog></dialog> </section> <aside></aside> <footer></footer></body>
  • 35. CSS3 – Changes since CSS2
    Media Queries
    Rounded, multi-color and image borders
    Gradient, multiple image, resizable backgrounds
    Text shadows, text overflow and word wrap
    Drop shadow, resizable, outline offset boxes
    Color opacity (RGBA) and HSL color values
    2D & 3D Transformations (skew, rotate, etc.)*
    Transitions (dynamic style)*, Web Fonts*
    Flexible grid/column layout*
    * = Work in Progress
    demo
  • 36. IE CSS3 & HTML5 Support
    IE ~ 8 – Zero support for CSS3, HTML5, dom event model 2
    IE 9 – Limited support for CSS3, HTML5 and dom event model 2
    IE 10 – ‘Final’ browser to be released by M$. Claims will support full CSS3, HTML5 and dom event model 2 *at time of release*
    HTML5 tags can be used in IE < 9 with the help of a Javascript shiv
  • 37. Progressive Enhancements
    Design for IE first
    Add enhanced styles for modern browsers (Chrome, Firefox, etc.) second
    Provide alternate styles for non-supported CSS3 features in IE (e.g. solid background color in contrast to gradient background)
    Functionality should be the same for all browsers
  • 38. Augment jQuery UI with CSS3
    Redefine opacity, gradient backgrounds, text and box drop-shadows, transformations and more of your existing jQuery UI .css (via override)
    Create hybrid elements using a combination of jQuery elements and your own CSS styling (e.g. icons & buttons from jQuery w/ your own drop shadow boxes and text)
    demo
  • 39. Additional Resources
    Book: jQuery in Action (link to Amazon)
    Book: CSS3 Visual Quickstart Guide (link to Amazon)
    NVCFUG Demo Site (link to demo site)
    jQuery (link) and jQuery UI (link) websites
    denard.springle@gmail.com