Download - jQuery Firestarter

Transcript
Page 1: jQuery Firestarter

jQuery Firestarter

Chris Bannonhttp://twitter.com/b4nn0n

[email protected]

Page 2: jQuery Firestarter

• Product Manager @ComponentOne– ASP.NET AJAX Controls– ASP.NET iPhone/Mobile Controls

• Mobile Web Advocate– iPhone Dev Con Speaker

• jQuery Advocate– jQuery Conference Speaker

About Me

Hi!

Page 3: jQuery Firestarter

• HTML/XHTML– Semantic markup– Valid markup– Microformats

• JavaScript– jQuery– Document Object Model (DOM)– Event Model

• CSS

Back to basics… !Important

Page 4: jQuery Firestarter

• ASP.NET AJAX– Mimics server-side code– Object Model Driven– C# like syntax– Namespace driven

• AJAX Control Toolkit– No JavaScript experience needed– Built-in server-side callbacks

Client-side in ASP.NET 2.0-3.5

Page 5: jQuery Firestarter
Page 6: jQuery Firestarter

• jQuery– CSS Selectors– Lightweight model– Common utilities/functions– Abstracts browser-specific JavaScript

• jQuery Templating/DataBinding– Formerly AJAX 4 Templating/DataBinding– Uses HTML Templates with Binding syntax– Supports DataBinding in JavaScript

Client-side in ASP.NET 4.0

Page 7: jQuery Firestarter

Studio for ASP.NET AJAX

{ + }

ComponentOne

Page 8: jQuery Firestarter

$(“code”).show();

Page 9: jQuery Firestarter

A Great One-liner Sample

function showToast(msg) { if ($("#toaster").length == 0) { $("<div id='toaster'></div>").appendTo("body"); } $("<div class='toast'><span></span></div>") .find("span") .html(msg) .end() .appendTo("#toaster") .show("slide", { direction: "down", easing: "easeOutQuad" }) .delay(4000) .hide("slide", { direction: "down", easing: "easeOutQuad" }); }

Popping Up the Toast

Page 10: jQuery Firestarter

QUESTIONS?Any

Page 11: jQuery Firestarter

• jQueryhttp://jquery.com/

• jQuery UIhttp://jqueryui.com/

• Studio for ASP.NET AJAXhttp://www.componentone.com/SuperProducts/StudioASPNET/

• Chinook (iTunes) Sample Databasehttp://chinookdatabase.codeplex.com/

• MS AJAX Announcementhttp://stephenwalther.com/blog/archive/2010/03/16/microsoft-jquery-and-templating.aspx

• Code from this session http://helpcentral.componentone.com/CS/blogs/webdev/archive/2010/03/23/popular-ui-volume-2-itunes.aspx

Resources

Page 12: jQuery Firestarter

CHRIS BANNONhttp://twitter.com/b4nn0n

[email protected]

$(this).end();


Top Related