jQuery Question

Tuesday, 3 January 2012

jQuery Feature

jQuery is a cross-browser JavaScript library that makes it easy to create astonishing web effect in just a few lines of code.
<ul type="disc">
 <li>DOM element selections: The jQuery using easy to selecting DOM elements and traversing to modifying their content. When you use CSS, easy select element id, class and build events to increase or improve more functionality.</li>
 <li>Compatibility All Dynamic Languages - The jQuery script can be use with all most Dynamic Web Languages like PHP, ASP, JSP, CGI etc.</li>
 <li>Event Handling - The jQuery library is support to creating an your own events. and also provide event model. it is very easy to handle events.</li>
 <li>Ajax Intrectactions - The jQuery help to develop lot of features using in AJAX Technology.</li>
 <li>Well documented</li>
 <li>Easy to use</li>
 <li>Chaining</li>
 <li>easy-to-use Ajax</li>
 <li>Nice event handlers</li>
 <li>CSS selectors</li>
 <li>CSS manipulation</li>
 <li>filtering your selection</li>
 <li>did I mention chaining?</li>
 <li>Small in size</li>
 <li>Nice little built-in effects.</li>
 <li>Extensibility through plug-ins</li>
</ul>

jQuery Example - Slide Out Navigation

A CSS and jQuery tutorial for creating a slide out menu.The items only slide out when the user hovers over the area next to them. This gives a beautiful effect.

<a href="http://tympanus.net/codrops/2009/12/08/beautiful-slide-out-nav...">Demo</a>

jQuery Carousel Plugins

<a title="jCarousel" href="http://sorgalla.com/projects/jcarousel/" rel="external nofollow" target="_blank">jCarousel</a>

jCarousel is a popular jQuery plugin for controlling a list of items in horizontal or vertical order.

 <a title="jCarousel Lite" href="http://www.gmarwaha.com/jquery/jcarousellite/" rel="external nofollow" target="_blank">jCarousel Lite</a>

jCarousel Lite is a jQuery plugin that carries you on a carousel ride filled with images and HTML content. Put simply, you can navigate images and/or HTML in a carousel-style widget. It is super light weight, at about 2 KB in size, yet very flexible and customizable to fit most of our needs.

 <a title="rCarousel" href="http://ryrych.github.com/rcarousel/" rel="external nofollow" target="_blank">rCarousel</a>: rcarousel is a jQuery UI continuous carousel with many cool features. It is highly customizable and supports even older browsers.

 

<a title="Tiny Carousel" href="http://baijs.nl/tinycarousel/" rel="external nofollow" target="_blank">Tiny Carousel</a>

Tiny Carousel is a lightweight jQuery based carousel for sliding html based content. It was built using the javascript jQuery library. Tiny Carousel was designed to be a dynamic lightweight utility that gives webdesigners a powerfull way of enhancing a websites user interface.

 <a title="Step Carousel Viewer " href="http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm" target="_blank">Step Carousel Viewer

</a>

Step Carousel Viewer displays images or even rich HTML by side scrolling them left or right. Users can step to any specific panel on demand, or browse the gallery sequentially by stepping through x number of panels each time. A smooth sliding animation is used to transition between steps. And fear not in taming this script to go exactly where you want it to- two public methods, two custom event handlers, and three “status” variables are here for that purpose. Some highlights of this script:

 <a title="Cloud Carousel" href="http://www.professorcloud.com/mainsite/carousel.htm" rel="external nofollow" target="_blank">Cloud Carousel</a>

Cloud Carousel is a jQuery plugin enabling you to create 3D carousel with features like auto-reflections

 <a title="Infinite Carousel jQuery" href="http://www.catchmyfame.com/2009/08/27/jquery-infinite-carousel-plugin-1-2-released/" rel="external nofollow" target="_blank">Infinite Carousel </a>

Around the beginning of this month I released version 1.0.1 of the Infinite Carousel jQuery plugin. About a week later I received an email asking if I could add the ability for a visitor to jump to a specific image in the carousel. I’d seen this functionality in other carousels (none that run in infinite loops) where small images or some other user interface was displayed that allowed someone to pick an image and go directly to it. At first I thought sure, how hard could it be to enable this? If the current carousel could flow infinitely picture by picture, how difficult could it be to fast forward to a specific image in the sequence? Little did i realize what I was in for.

 <a title="Roundabout" href="http://fredhq.com/projects/roundabout/" rel="external nofollow" target="_blank">Roundabout</a>

Roundabout is a jQuery plugin that converts a structure of static HTML elements into a highly customizable turntable-like interactive area.

<a title="WOW Slider" href="http://www.wowslider.com/" rel="external nofollow" target="_blank">WOW Slider</a>

Wow Slider is a free tool for creating awesome jQuery image sliders with fancy templates which are cross-browser compatible. You can create fancy image galleries and slideshows in a few minutes without coding.

 <a title="AnythingSlider" href="http://css-tricks.com/examples/AnythingSlider/" rel="external nofollow" target="_blank">AnythingSlider</a>

AnythingSlider is a full featured slider plugin for jQuery which enables users to create slides from just about anything you can imagine.

 <a title="Slides" href="http://slidesjs.com/" rel="external nofollow" target="_blank">Slides</a>

Slides is a slideshow plugin for jQuery that is built with simplicity in mind. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.
<h3><a onmousedown="return rwt(this,'','','','1','AFQjCNFweeobMSBfu_VyZW_wZ7i9CBZqRw','','0CB4QFjAA')" href="http://www.bkosborne.com/jquery-waterwheel-carousel">jQuery Waterwheel Carousel</a></h3>
Waterwheel Carousel of the jQuery plugin Carousel is that you can use to display images cascading waterfall effect.

jquery example - tab panel

[caption id="attachment_542" align="aligncenter" width="300" caption="jquery tabed panel"]<a href="http://jqueryexample.com/wp-content/uploads/2011/12/jquery-tabed-panel.jpg"><img class="size-medium wp-image-542" title="jquery tabed panel" src="http://jqueryexample.com/wp-content/uploads/2011/12/jquery-tabed-panel-300x142.jpg" alt="jquery tabed panel" width="300" height="142" /></a>[/caption]

Tabbed panels are very useful and one of the most popular way to place a lot of information on a page without losing usability. Here is listed popular JQuery Tabs tutorials and plugins which you can use in your project.
<ul>
 <li><a title="jQuery UI Tabs with Next/Previous" href="http://css-tricks.com/jquery-ui-tabs-with-nextprevious/" rel="external nofollow" target="_blank">Tabs with Next/Previous</a> :
<a title="View Live Demo" href="http://css-tricks.com/examples/TabsNextPrev/" rel="external nofollow" target="_blank">View Live Demo</a></li>
 <li><a title="Create a smooth tabbed menu in jQuery" href="http://yensdesign.com/2008/12/create-a-smooth-tabbed-menu-in-jquery/" rel="external nofollow" target="_blank">Smooth tabbed menu in jQuery</a> :Simple plug-in that allows for a large number of tabs to fit into a small space
<a title="View Live Demo" href="http://yensdesign.com/tutorials/tabs/" rel="external nofollow" target="_blank">View Live Demo</a></li>
 <li><a href="http://nettuts.com/tutorials/html-css-techniques/how-to-create-a-slick-tabbed-content-area/" target="_blank">Slick Tabbed</a>: This script allows you to create a slick tabbed content area using CSS and jQuery.
<a title="View Live Demo" href="http://d2o0t5hpnwv4c1.cloudfront.net/001_Tabbed/site/jQuery.html" rel="external nofollow" target="_blank">View Live Demo</a></li>
 <li> <a title="Simple Tabs w/ CSS & jQuery" href="http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/" rel="external nofollow" target="_blank">Simple Tabs w/ CSS & jQuery</a>: This jQuery plugin supplies an easy way to create tabbed menu with our lovely jQuery library
<a title="View Live Demo" href="http://www.sohtanaka.com/web-design/examples/tabs/" rel="external nofollow" target="_blank">View Live Demo</a></li>
 <li><a title="Sweet AJAX Tabs With jQuery 1.4 & CSS3" href="http://tutorialzine.com/2010/01/sweet-tabs-jquery-ajax-css/" rel="external nofollow" target="_blank">AJAX Tabs: </a>This tabbed panel allows you to squeeze much more content in a seemingly limited space and provide a structured way of accessing it.
<a title="View Live Demo" href="http://demo.tutorialzine.com/2010/01/sweet-tabs-jquery-ajax-css/demo.html" rel="external nofollow" target="_blank">View Live Demo</a></li>
</ul>

jQuery example - feed menus

jquery Example - select an element through matched attribute value

Selects elements that have the specified attribute with a value exactly equal to a certain value.
In an assignment I have a multilevel dynamic combo box. And I have to select an element in which there are not id or class selector .For this I used attribute match selector in jQuery.
Examples:
<code><script>var optionVal = $('option[value="myOption"]').value();</script></code>

jQuery Example - grid plugins

There are so many jQuery grid plugins. Each having different features and capabilities. Below I listed the best jQuery grid plugins which you can use in your projects
<ul>
 <li>Flexigrid: <a href="http://flexigrid.info/" rel="nofollow">http://flexigrid.info/</a> : Lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content.</li>
 <li>jQuery Grid: <a href="http://www.trirand.com/blog/" rel="nofollow">http://www.trirand.com/blog/</a> :</li>
 <li>jqGridView: <a href="http://plugins.jquery.com/project/jqGridView" rel="nofollow">http://plugins.jquery.com/project/jqGridView</a> jqGrid is an Ajax-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the web.</li>
 <li>Ingrid: <a href="http://reconstrukt.com/ingrid/" rel="nofollow">http://reconstrukt.com/ingrid/</a> :Ingrid is an unobtrusive jQuery component that adds datagrid behaviors (column resizing, paging, sorting, row and column styling, and more) to your tables.</li>
 <li>DataTable : <a href="http://www.datatables.net/index" rel="nofollow">http://www.datatables.net/index</a> : DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.</li>
 <li>Slickgrid : <a href="http://code.google.com/p/slickgrid/" rel="nofollow">http://code.google.com/p/slickgrid/</a></li>
 <li>TableSorter: <a href="http://tablesorter.com/" rel="nofollow">http://tablesorter.com/</a>:tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell.</li>
 <li>dhtmlxGrid: <a href="http://www.dhtmlx.com/docs/products/dhtmlxGrid/" rel="nofollow">http://www.dhtmlx.com/docs/products/dhtmlxGrid/</a></li>
 <li>Sigma Grid: <a href="http://www.sigmawidgets.com/products/sigma_grid2/" rel="nofollow">http://www.sigmawidgets.com/products/sigma_grid2/</a></li>
</ul>