Create Simplest Accordion Menu using jQuery

 

Step 1: Create HTML for your Menu

Step 2: Apply some style to your Menu using CSS – (optional using Round Corner CSS w/o images)

Step 3: Give life to your Menu using jQuery – using .click, .slideUp, .slideToggle

Via Accordion Menu: Create Simplest Accordion Menu using jQuery | ViralPatel.net

How to use Firebug to learn jQuery

 

A 9:59m video:

If the HQ version of the YouTube video still isn’t legible enough for you, Craig also made a full resolution WMV available as well.

Bookmarklet uses in the video

1. Inject jQuery into any web page: jQuerify
2. Point & Click CSS Selector:  SelectorGadget

Via Updated: See how I used Firebug to learn jQuery | Encosia

Microsoft Ajax CDN and the jQuery Validation Library

• http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.js
• http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js
• http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2-vsdoc.js
• http://ajax.microsoft.com/ajax/jquery.validate/1.5.5/jquery.validate.js
• http://ajax.microsoft.com/ajax/jquery.validate/1.5.5/jquery.validate.min.js
• http://ajax.microsoft.com/ajax/jquery.validate/1.5.5/jquery.validate-vsdoc.js

Scott Guthrie announced the launch of the Microsoft Ajax CDN on his blog last night. If you have not read his post, I recommend that you read it now to get a general overview of the CDN and how you can take advantage of the CDN to improve the performance of your ASP.NET Web Forms and ASP.NET MVC applications:

http://weblogs.asp.net/scottgu/archive/2009/09/15/announcing-the-microsoft-ajax-cdn.aspx

“The Microsoft Ajax CDN enables you to significantly improve the performance of ASP.NET Web Forms and ASP.NET MVC applications that use ASP.NET AJAX or jQuery.  The service is available for free, does not require any registration, and can be used for both commercial and non-commercial purposes.

ASP.NET 4.0 will make it especially easy for ASP.NET Web Forms developers to take advantage of the CDN. By setting one property of the ScriptManager control – EnableCdn=true, you will be able to redirect all requests for the built-in ASP.NET JavaScript files to the CDN and improve the performance of your Web Forms applications.”

In his announcement, Scott describes how both the ASP.NET Ajax and the jQuery libraries are included in the CDN. There is one more set of JavaScript files that are added to the CDN today that Scott did not announce: the jQuery Validation library.

If you are not familiar with the jQuery Validation library then you should know that this is one of the most popular form validation libraries used by jQuery developers. Microsoft is shipping the jQuery validation library with both ASP.NET Web Forms and ASP.NET MVC in Visual Studio 2010.  Furthermore, jQuery Validation library will be integrated with ASP.NET MVC.

Via Microsoft Ajax CDN and the jQuery Validation Library

75 Amazing CSS Navigations and jQuery Examples

 

Via 75 Amazing CSS Navigations and Jquery Examples | Design Dazzling

Ajax survey 2009: jQuery and MS Ajax are almost tied among .NET developers

 

 

Via Ajax survey 2009: jQuery and MS Ajax are almost tied among .NET developers

jQuery Ajax tutorials, jQuery UI examples and more!

 

via jQuery Ajax tutorials, jQuery UI examples and more! – The Ultimate jQuery List

Jcrop – Deep Liquid

 

Jcrop » the jQuery Image Cropping Plugin

Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.

• Jcrop Demos and Examples
• Jcrop Manual

Jcrop – Deep Liquid

The Best jQuery Modal Dialog Plugins

 

Via http://www.blogrammierer.de/jquery-die-22-besten-modal-fenster-plugins/

How to handle JSON dates returned by ASP.NET AJAX

 

The problem of how to handle dates in JSON is one of the more troublesome issues that may arise when directly calling ASP.NET AJAX web services and page methods.

Unlike every other data type in the language, JavaScript offers no declarative method for expressing a Date. Consequently, embedding them within JSON requires a bit of fancy footwork. More… How I handle JSON dates returned by ASP.NET AJAX | Encosia

A quick introduction of using jTemplate against AJAX JSON data

 

jQuery has a few template plugins, the most widely accepted is jTemplate. jTemplate is a JQuery template engine that works with AJAX and JSON data. We can use jTemplate in the following steps:

First, download the JQuery JavaScript file and reference it in your web page:

1. <scrip src="scripts/jQuery-jtemplates.min.js" type="text/javascript"></script>

<scrip src="scripts/jQuery-jtemplates.min.js" type="text/javascript"></script>

Second, define your template:

1. <script type="text/html" id="TemplateResultsTable">  
2. {#template MAIN}  
3. <table  cellpadding="10" cellspacing="0">  
4.   <tr>  
5.     <th>Artist</th>  
6.     <th>Company</th>  
7.     <th>Title</th>  
8.     <th>Price</th>  
9.   </tr>  
10.   {#foreach $T.d as CD}  
11.     {#include ROW root=$T.CD}  
12.   {#/for}  
13. </table>  
14. {#/template MAIN}  
15. {#template ROW}  
16. <tr class="{#cycle values=['','evenRow']}">  
17.   <td>{$T.Artist}</td>  
18.   <td>{$T.Company}</td>  
19.   <td>{$T.Title}</td>  
20.   <td>{$T.Price}</td>  
21. </tr>  
22. {#/template ROW}  
23. </script> 

Please note that we define the template in a script block, which can be accessed by its id; also, $T is a reference to the data item passed to the template.

Third, call your web service in your script, designate the template and instantiate it with data.

1. $(document).ready(function() {  
2.           $.ajax({  
3.               type: "POST",  
4.               url: "CDCatalog.asmx/GetCDCatalog",  
5.               data: "{}",  
6.               contentType: "application/json; charset=utf-8",  
7.               dataType: "json",  
8.               success: function(msg) {  
9. //instantiate a template with data
10.                   ApplyTemplate(msg);   
11.               }  
12.           });  
13.       });  
14. function ApplyTemplate(msg) {  
15.       $(‘#Container’).setTemplate($("#TemplateResultsTable").html());  
16.       $(‘#Container’).processTemplate(msg);  
17. }

For more info please visit Xun Ding’s excellent article Using jQuery with ASP .NET