jQuery Question

Tuesday, 3 January 2012

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>

jquery Example -Multiple Checkbox Select/Deselect

In this post I am going to demonstrate how to the check box are checked or unchecked with single check box.

 
<code><SCRIPT language="javascript">
$(function(){

 $("#selectall").click(function () {
 $('.myOption').attr('checked', this.checked);
 });

 $(".case").click(function(){

 if($(".myOption").length == $(".myOption:checked").length) {
 $("#selectall").attr("checked", "checked");
 } else {
 $("#selectall").removeAttr("checked");
 }

 });
});
</SCRIPT>

HTML:

</code>
<pre title=""><input type="checkbox" id="selectall"/></pre>
<pre title=""><input type="checkbox" value="2" class="myOption"></pre>
<pre title=""><input type="checkbox" value="1" class="myOption"></pre>

jQuery Tooltip Plugins Tutorials

In this article I listed Most Desirable Collection Of Tooltip JQuery Scripts. Tooltips are the best way to show additional information on mouse over.
<ul>
 <li><a href="http://craigsworks.com/projects/qtip/">qTip – The jQuery Tooltip Plugin</a>: qTip -is an advanced tooltip plugin of the jQuery framework. It's cross-browser, customizable and packed full of features. It has a very rich featured Tooltip plugin<a title="View Demo" href="http://craigsworks.com/projects/qtip/demos/">View Demo</a></li>
 <li><a href="http://www.lullabot.com/articles/beautytips-09-release">BeautyTips, a jQuery Tooltip Plugin</a> : BeautyTips is a simple-to-usejQueryplugin<a title="View Demo" href="http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html">View Demo</a></li>
 <li><a href="http://jqueryfordesigners.com/coda-popup-bubbles/">Coda Popup Bubbles</a>: is a popular TooltipPlugins for making your site more user friendly and attractive<a title="View Demo" href="http://jqueryfordesigners.com/demo/coda-bubble.html">View Demo</a></li>
 <li>
<h5><a href="http://www.vertigo-project.com/projects/vtip">vTip</a></h5>
<a title="View Demo" href="http://www.vertigo-project.com/files/vTip/example.html">View Demo</a></li>
 <li><a href="http://www.codylindley.com/blogstuff/js/jtip/">jTip – The Jquery Tool Tip</a><a title="View Demo" href="http://www.codylindley.com/blogstuff/js/jtip/">View Demo</a></li>
 <li>
<h5><a href="http://onehackoranother.com/projects/jquery/tipsy/">Tipsy – Facebook-Style Tooltip Plugin for jQuery</a> :Tipsy is a jQuery plugin for creating a Facebook-like tooltips effect based on an anchor tag's title attribute.</h5>
<a title="View Demo" href="http://onehackoranother.com/projects/jquery/tipsy/">View Demo</a></li>
 <li>
<h5><a href="http://rndnext.blogspot.com/2009/02/jquery-ajax-tooltip.html">jQuery Ajax Tooltip</a></h5>
<a title="Source" href="http://rndnext.blogspot.com/2009/02/jquery-ajax-tooltip.html">View Demo</a></li>
 <li><a href="http://www.queness.com/post/309/create-a-digg-style-post-sharing-tool-with-jquery">Digg-Style Post Sharing Tool with jQuery</a><a title="View Demo" href="http://www.queness.com/resources/html/shareit/index.html">View Demo</a></li>
</ul>