Your SlideShare is downloading. ×
0
jQuery Firestarter
jQuery Firestarter
jQuery Firestarter
jQuery Firestarter
jQuery Firestarter
jQuery Firestarter
jQuery Firestarter
jQuery Firestarter
jQuery Firestarter
jQuery Firestarter
jQuery Firestarter
jQuery Firestarter
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

jQuery Firestarter

1,171

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 …

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,171
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

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

    • 1. jQueryFirestarter<br />Chris Bannon<br />http://twitter.com/b4nn0n<br />chrisb@componentone.com<br />
    • 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. 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. 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.
    • 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. ComponentOne<br />Studio for ASP.NET AJAX<br />}<br />{<br />+<br />
    • 8. $(“code”).show();<br />
    • 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. Any<br />Questions?<br />
    • 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. $(this).end();<br />Chris Bannon<br />http://twitter.com/b4nn0n<br />chrisb@componentone.com<br />

    ×