Download - jQuery, CSS3 and ColdFusion

Transcript
Page 1: jQuery, CSS3 and ColdFusion

Presented at NCDevCon 2011 by:

Denard Springle

jQuery, CSS3 & ColdFusion

Page 2: jQuery, CSS3 and ColdFusion

Who Am I?Freelance Software Systems Engineer

Rich internet and mobile applicationsHardware, network and storage engineeringCMMI process management & assessment

Over 20 years IT experienceOver 10 years ColdFusion experienceHost of the Northern Virginia CFUG

[email protected]://www.nvcfug.org/

Page 3: jQuery, CSS3 and ColdFusion

UI Design – Then and Now(or ‘Why I used to loathe user interface design and what changed my mind!’)

Traditional Web DesignPet 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.

CSS3, HTML5 & jQueryVirtually 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.

Page 4: jQuery, CSS3 and ColdFusion

What is the jQuery library?

Javascript RAD frameworkHandles cross-browser dependencies*Uses familiar CSS language selectorsPacked with handy utility functions (like Ajax)Loads of available plugin’s or roll your ownWorks with other Javascript frameworks (including ColdFusion’s built-in functions)Works with native Javascript functionsWorks 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.

Page 5: jQuery, CSS3 and ColdFusion

Implementing the jQuery library

Download from http://docs.jquery.com/Downloading_jQueryDownload 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’>

Page 6: jQuery, CSS3 and ColdFusion

Implementing the jQuery library

jQuery(document).ready(function() { … code here …});

$(funtion() { … code here …});

$ == alias for ‘jQuery’

Page 7: jQuery, CSS3 and ColdFusion

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

Page 8: jQuery, CSS3 and ColdFusion

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.

Page 9: jQuery, CSS3 and ColdFusion

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

Page 10: jQuery, CSS3 and ColdFusion

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

Page 11: jQuery, CSS3 and ColdFusion

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

Page 12: jQuery, CSS3 and ColdFusion

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.

Page 13: jQuery, CSS3 and ColdFusion

Working with Element Properties<img src=“myImage.gif” id=“myImage” alt=“” title=“Voila!” /><img src=“” 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’));

Page 14: jQuery, CSS3 and ColdFusion

Changing Style with jQueryhasClass(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

Page 15: jQuery, CSS3 and ColdFusion

Changing Style with jQuerycss(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

Page 16: jQuery, CSS3 and ColdFusion

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

Page 17: jQuery, CSS3 and ColdFusion

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

Page 18: jQuery, CSS3 and ColdFusion

jQuery Events

<button id=‘myButton’ />

$(‘#myButton’).bind(‘mouseover mouseout’, function() {

$(this).toggleClass(‘highlight’); });

$(‘.data-entry’).bind(‘focus’, function() {

$(this).css({backgroundColor: ‘#000’, color: ‘#fff’}); });

Page 19: jQuery, CSS3 and ColdFusion

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

Page 20: jQuery, CSS3 and ColdFusion

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

Page 21: jQuery, CSS3 and ColdFusion

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

Page 22: jQuery, CSS3 and ColdFusion

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

Page 23: jQuery, CSS3 and ColdFusion

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 functionhtml – passes unprocessed HTML to the callback. <script> is evaluated.json – interpreted as JSON string, passed as object to the callbackjsonp – same as json, but allows remote scriptingscript – processed as javascript and passed to the callbacktext – plain text passed to the callback

Page 24: jQuery, CSS3 and ColdFusion

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

Page 25: jQuery, CSS3 and ColdFusion

Single API in jQuery – CF Side

Page 26: jQuery, CSS3 and ColdFusion

Single API in jQuery – CF Side<!--- params --><cfparam name="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>

Page 27: jQuery, CSS3 and ColdFusion

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

Page 28: jQuery, CSS3 and ColdFusion

jQuery Plugins – jQuery UIjQuery 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

Page 29: jQuery, CSS3 and ColdFusion

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)

Page 30: jQuery, CSS3 and ColdFusion

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’>

Page 31: jQuery, CSS3 and ColdFusion

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

Page 32: jQuery, CSS3 and ColdFusion

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

Page 33: jQuery, CSS3 and ColdFusion

jQuery UI – Effects & Animations

BlindBounceClipDropExplodeFadeFoldHighlight

PuffPulsateScaleShakeSizeSlideTransfer

Page 34: jQuery, CSS3 and ColdFusion

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>

Page 35: jQuery, CSS3 and ColdFusion

CSS3 – Changes since CSS2

Media QueriesRounded, multi-color and image bordersGradient, multiple image, resizable backgroundsText shadows, text overflow and word wrapDrop shadow, resizable, outline offset boxesColor opacity (RGBA) and HSL color values2D & 3D Transformations (skew, rotate, etc.)*Transitions (dynamic style)*, Web Fonts*Flexible grid/column layout** = Work in Progress

demo

Page 36: jQuery, CSS3 and ColdFusion

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

Page 37: jQuery, CSS3 and ColdFusion

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

Page 38: jQuery, CSS3 and ColdFusion

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

Page 39: jQuery, CSS3 and ColdFusion

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

[email protected]