ajax jquery loading

ajax loading screen

jquery 101

jquery 101

jquery sliding effects

Light media player

Super light weight jquery player !!!

Upload control - Jquery + ASP.NET

clean and simple upload control for asp.net + jquery, this is not using form posting and using json to post data over to asp.net

this is using form posting which is not very useful, another framework which did form posting 

Many more for form posting
Link 1
Link 2

Jquery control 101

Super control 1

Jquery UI developer portal

accordion

good example for accordion effect (expansion)

Good ui guy

Drag-And-Drop item sorter

Hierarchy sorter more description, very good control

Clean slider

You can get tons of slider in jquery, but most are confusing and hard to make changes.

This one is quite clean and easy to use, and it is able to hide the next and prev button whenever it is not necessary.

This slider is used for generating the content in the slider page.

jquery ui 101

Jquery tooltip

Jquery watermark

Tons of jquery effects

display your content like iPhone

expand and scrolling effect

the key is to append arrow icon after the expand effect

use the same id for href target with section to be shown.

Sortable Jquery Control

sortable control demo

obtain sorting order

accordion menu

sample 1

breadcrumb plugin

good but complex

very light weight

Jquery chart

very good plugin for charting

available to download

360 product browsing

General link

very cool demo

Animated scroll to anchor/id function with jQuery

This feature is useful especially when you need to maintain the page position after browsing from other pages.

A quick win will be using anchor in the url, but the catch is if you are using controls like telerik grid ajax postback, the anchor point #XXX in your url will be subtracted and you won't be able to do what you want.

One more point is that it is good to use this function in $(document).ready(function ()) instead of pageLoad() so that it only move to your position once when page is loaded not ajax postback.

checkout this blog for more information.

jquery links

1. dialog box
2. validation

jquery toggle effect

To build the UI effect like this, we can extend from the below simple example. Use the 'green' code to hide/ show a section using a button. Use the 'orange' code to toggle the button orientation.

$("#buttonZone").click(function() {
$("#searchDiv").slideToggle(600);

});

$("#buttonZone").toggle(
function() {

$(this).removeClass("buttonZoneHide");
$(this).addClass("buttonZoneShow");

},
function() {

$(this).removeClass("buttonZoneShow");
$(this).addClass("buttonZoneHide");

});

how to access your asp.net controls in jquery.

$(document).ready(function() {
var id = " < % = chklstFilesAvailable.ClientID % > ";
var chklist = $("#" + id);
var btnId = " < % = btnDownload.ClientID % > ";
var button = $("#" + btnId);
//reusable show/hide button wiring
wireButtonShowToCheckListBox(chklist, button);
});

function wireButtonShowToCheckListBox(chklist, button) {
chklist.find('input:checkbox').each(function() {
var cb = $(this);
cb.click(function() {
var hit = false;
chklist.find('input:checkbox').each(function() {
var checked = $(this).attr('checked');
if (checked)
hit = true;
});
if (hit == true) {
button.show();
} else {
button.hide();
}
});
});

}

Refer to this article for more details

power of jquery - 1

1.Checkout this amazing effect using jquery for your navigation

2.This article shows you the dynamic tabs using jquery

3. This article shows an alternative way to show validation error

4. Wizard like form filling experience

5. This article shows dropdown menu navigation using jquery

6. This article shows very good effect message box effect to show after you saved something

7. This article shows better UI experience by highlighting the row during data entry into the form.

Checkout all the jquery tutorial from Janko, you will be impressed.