Download - jQuery Firestarter
![Page 2: jQuery Firestarter](https://reader033.vdocuments.net/reader033/viewer/2022061223/54c6bde34a7959d25a8b45d4/html5/thumbnails/2.jpg)
• 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](https://reader033.vdocuments.net/reader033/viewer/2022061223/54c6bde34a7959d25a8b45d4/html5/thumbnails/3.jpg)
• HTML/XHTML– Semantic markup– Valid markup– Microformats
• JavaScript– jQuery– Document Object Model (DOM)– Event Model
• CSS
Back to basics… !Important
![Page 4: jQuery Firestarter](https://reader033.vdocuments.net/reader033/viewer/2022061223/54c6bde34a7959d25a8b45d4/html5/thumbnails/4.jpg)
• 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](https://reader033.vdocuments.net/reader033/viewer/2022061223/54c6bde34a7959d25a8b45d4/html5/thumbnails/5.jpg)
![Page 6: jQuery Firestarter](https://reader033.vdocuments.net/reader033/viewer/2022061223/54c6bde34a7959d25a8b45d4/html5/thumbnails/6.jpg)
• 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](https://reader033.vdocuments.net/reader033/viewer/2022061223/54c6bde34a7959d25a8b45d4/html5/thumbnails/7.jpg)
Studio for ASP.NET AJAX
{ + }
ComponentOne
![Page 8: jQuery Firestarter](https://reader033.vdocuments.net/reader033/viewer/2022061223/54c6bde34a7959d25a8b45d4/html5/thumbnails/8.jpg)
$(“code”).show();
![Page 9: jQuery Firestarter](https://reader033.vdocuments.net/reader033/viewer/2022061223/54c6bde34a7959d25a8b45d4/html5/thumbnails/9.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022061223/54c6bde34a7959d25a8b45d4/html5/thumbnails/10.jpg)
QUESTIONS?Any
![Page 11: jQuery Firestarter](https://reader033.vdocuments.net/reader033/viewer/2022061223/54c6bde34a7959d25a8b45d4/html5/thumbnails/11.jpg)
• 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