Hi all,
Oh boy! I am just loving jQuery and its interactions with ASP.NET. In my last post,we found that jQuery is a lightweight javascript library and leverages rich user interface. It has lot of functions such as hover(), css, cssClass, slideDown, slideUp, animate etc. jQuery provides a separate library for user interface such as accordion, tabs, slider, dialog box, draggable, droppable etc.
1) Download jQuery (functions such as slideUp, slideDown, animate etc.)
For each downloads I found a very impressive video tutorials how to set up jQuery.
I will walk through a simple accordion in an ASP.NET page.
Step1: Download jQuery and jQueryUI as mentioned above.
Step2: Create a New project in VS2010 RC New Project >> Visual C# , Web >> Choose "ASP.NET Web Application" >> Project Name: ASPjQueryUI >> Click OK.
Step3: When you download jQueryUI, copy the "jquery-ui-1.8c2.custom" onto "ASPjQueryUI". Its easy to copy to "css" and "js" as separate folders.
Step4: In the body section, we create a div with id named "accordion". Under this div, we create 3 hyperlinks named: Section 1, Section 2 and Section 3. For each of the hyperlinks we create div and put some text.
Step5: Under head section, we drag the jQuery, jQueryUI and css. We also an create accordion control as follows:
Step6: Press F5, to view the output.
What I noticed is that we can manipulate jQuery for advanced scenarios as well. This post is just a basic demonstration.
Cheers,
1 comment:
Thanks for a great SharePoint Jquery simple example. Your source works like a charm. However when i deployed your solution as a webpart in my development environment, i notice i was getting a javascript error at the bottom of IE. I looked at the code and removed a reference for css file as javascript in script tags in WebpartjQueryUserControl.ascx file and the error went away. :)
have a good day.
Post a Comment