Your SlideShare is downloading. ×
0
jQueryFirestarter<br />Chris Bannon<br />http://twitter.com/b4nn0n<br />chrisb@componentone.com<br />
Product Manager @ComponentOne<br />ASP.NET AJAX Controls<br />ASP.NET iPhone/Mobile Controls<br />Mobile Web Advocate<br /...
HTML/XHTML<br />Semantic markup<br />Valid markup<br />Microformats<br />JavaScript<br />jQuery<br />Document Object Model...
ASP.NET AJAX<br />Mimics server-side code<br />Object Model Driven<br />C# like syntax<br />Namespace driven<br />AJAX Con...
jQuery<br />CSS Selectors<br />Lightweight model<br />Common utilities/functions<br />Abstracts browser-specific JavaScrip...
ComponentOne<br />Studio for ASP.NET AJAX<br />}<br />{<br />+<br />
$(“code”).show();<br />
A Great One-liner Sample<br />Popping Up the Toast<br />        function showToast(msg) {            if ($("#toaster").len...
Any<br />Questions?<br />
jQueryhttp://jquery.com/<br />jQuery UIhttp://jqueryui.com/<br />Studio for ASP.NET AJAXhttp://www.componentone.com/SuperP...
$(this).end();<br />Chris Bannon<br />http://twitter.com/b4nn0n<br />chrisb@componentone.com<br />
Upcoming SlideShare
Loading in...5
×

jQuery Firestarter

1,182

Published on

With all of the new options for developing client-centric applications it can be hard to get your feet wet. Let’s jump in head first and build a app in JavaScript. We will be using ASP.NET for data access and web services accompanied by jQuery and for client-side coding. We will also touch base with the cool new AJAX 4.0 features and how easy they make AJAX development. The bottom line is we want to walk away from this session ready to test the waters in client-side development. Everyone is talking about it, Microsoft has embraced it, now we just need to do it!

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,182
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Here is the CSS that will accompany the JS#toaster{    width:200px;    position:fixed;    bottom:0;    right:0;}.toast{    display:none;    position:relative;    clear:both;    padding:20px;    margin:4px;    background:rgba(0,0,0,0.75);    border:1px solid #000;    color:#fff;    font-weight:600;    border-radius: 6px;    -moz-border-radius: 6px;    -webkit-border-radius: 6px;    text-shadow: 2px 2px 5px rgba(255,255,255,1);    box-shadow: 2px 2px 5px rgba(0,0,0,0.5);    -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.5);    -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.5);}
  • Transcript of "jQuery Firestarter"

    1. 1. jQueryFirestarter<br />Chris Bannon<br />http://twitter.com/b4nn0n<br />chrisb@componentone.com<br />
    2. 2. Product Manager @ComponentOne<br />ASP.NET AJAX Controls<br />ASP.NET iPhone/Mobile Controls<br />Mobile Web Advocate<br />iPhone Dev Con Speaker<br />jQuery Advocate<br />jQuery Conference Speaker<br />About Me<br />Hi!<br />
    3. 3. HTML/XHTML<br />Semantic markup<br />Valid markup<br />Microformats<br />JavaScript<br />jQuery<br />Document Object Model (DOM)<br />Event Model<br />CSS<br />Back to basics… !Important<br />
    4. 4. ASP.NET AJAX<br />Mimics server-side code<br />Object Model Driven<br />C# like syntax<br />Namespace driven<br />AJAX Control Toolkit<br />No JavaScript experience needed<br />Built-in server-side callbacks<br />Client-side in ASP.NET 2.0-3.5<br />
    5. 5.
    6. 6. jQuery<br />CSS Selectors<br />Lightweight model<br />Common utilities/functions<br />Abstracts browser-specific JavaScript<br />jQueryTemplating/DataBinding<br />Formerly AJAX 4 Templating/DataBinding<br />Uses HTML Templates with Binding syntax<br />Supports DataBinding in JavaScript<br />Client-side in ASP.NET 4.0<br />
    7. 7. ComponentOne<br />Studio for ASP.NET AJAX<br />}<br />{<br />+<br />
    8. 8. $(“code”).show();<br />
    9. 9. A Great One-liner Sample<br />Popping Up the Toast<br />        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" });        }<br />
    10. 10. Any<br />Questions?<br />
    11. 11. jQueryhttp://jquery.com/<br />jQuery UIhttp://jqueryui.com/<br />Studio for ASP.NET AJAXhttp://www.componentone.com/SuperProducts/StudioASPNET/<br />Chinook (iTunes) Sample Databasehttp://chinookdatabase.codeplex.com/<br />MS AJAX Announcementhttp://stephenwalther.com/blog/archive/2010/03/16/microsoft-jquery-and-templating.aspx<br />Code from this session http://helpcentral.componentone.com/CS/blogs/webdev/archive/2010/03/23/popular-ui-volume-2-itunes.aspx<br />Resources<br />
    12. 12. $(this).end();<br />Chris Bannon<br />http://twitter.com/b4nn0n<br />chrisb@componentone.com<br />
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×