Tuesday, 3 January 2012

jQuery - TreeView Plugins

If you are looking at treeview control then your can pick any
jsTree is a javascript based, cross browser tree component. It is packaged as a jQuery plugin. jsTree is absolutely free

jQuery Example - Full Screen Background Images

<p>If you are looking for how to Full Screen Background Images then use Backstretch is a simple plugin. It is a simple plugin jQuery plugin that allows you to add a dynamically-resized background image to any page. The image will stretch to fit the page, and will automatically resize as the window size changes.</p>
<p>&lt;script src="js/jquery.js" type="text/javascript"&gt;&lt;/script&gt;<br />
&lt;script src="js/jquery.fullscreenr.js" type="text/javascript"&gt;&lt;/script<br />
&lt;script type="text/javascript"&gt;<br />
$.backstretch("http://path.jpg");<br />
&lt;/script&gt;</p>
<p><a href="http://srobbin.com/jquery-plugins/jquery-backstretch/#demo" target="_blank">demo</a>.</p>

jquery Example - multiselect plugin

[caption id="attachment_591" align="aligncenter" width="300" caption="jquery-multiselect"]<a href="http://jqueryexample.com/wp-content/uploads/2012/01/jquery-multiselect1.jpg"><img class="size-medium wp-image-591" title="jquery-multiselect" src="http://jqueryexample.com/wp-content/uploads/2012/01/jquery-multiselect1-300x145.jpg" alt="jquery-multiselect" width="300" height="145" /></a>[/caption]

<em>If you are looking for <em>multiselect</em> a combo box then use </em>jQuery UI MultiSelect Widget is pretty good <em>. <em>It is a </em>configurable <em>plugin</em> for <em>jQuery</em>. It converts &lt;select&gt; input with attribute multiple into group of checkboxes with ability to add new values also allows filtering within multiselect.  The plugins provides an optional header with check all / uncheck all / close links, Keyboard support and it is only 6kb.</em>

<a href="http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/" target="_blank">Demo</a>

jQuery Example - Change popup div Height based on Browser Size/Resize

<p>In this example I am going to show an example for set a height a of an element according the browser height.</p>
<p>To get browser height we will use $(window).height(); property and we set page elements based on Window size re-size.</p>
<code><p>$(function(){<br />
    $(window).resize(function(){<br />
        var winHeight = $(window).height();<br />
        var winWidth = $(window).width();<br />
        $("#popBox").css('height',(h < 1024 || w < 800) ? 600 : 450);<br />
    });<br />
});</p></code>

JQuery Example - Ajax Fancy Captcha

[caption id="attachment_570" align="aligncenter" width="300" caption="jquery captcha"]<a href="http://jqueryexample.com/wp-content/uploads/2011/12/fancy-captcha.jpg"><img class="size-medium wp-image-570" title="fancy-captcha" src="http://jqueryexample.com/wp-content/uploads/2011/12/fancy-captcha-300x247.jpg" alt="jquery captcha" width="300" height="247" /></a>[/caption]

Ajax Fancy Captcha that based on the super cool JQuery that helps you protect your web pages from bots and spammers. Captcha’s security level is medium, with the emphasis on nice looking and user friendly qualities while still offering reasonable protection from unwanted “guests”. It has a basic design and its elements are easy to style and customize.

<a href="http://www.webdesignbeach.com/beachbar/ajax-fancy-captcha-jquery-plugin" target="_blank">Demo</a>

jQueryTransform - form styling plugin

jqTransform  is a jQuery styling <em>plugin</em> which help you to style the form exactly as you need <em>and transform the entire look and feel of the form.</em>

[caption id="attachment_567" align="aligncenter" width="300" caption="jqtransform-jquery-form"]<a href="http://jqueryexample.com/wp-content/uploads/2011/12/jqtransform-jquery-form.jpg"><img class="size-medium wp-image-567" title="jqtransform-jquery-form" src="http://jqueryexample.com/wp-content/uploads/2011/12/jqtransform-jquery-form-300x222.jpg" alt="jqtransform-jquery-form" width="300" height="222" /></a>[/caption]

<em>
<a href="http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/">View the Demo »</a>
</em>

jquery 3d carousel

<em>3D Carousel</em> is a powerful jQuery plugin enabling you to create <em>3D carousel</em> with  great features. It can be fully customizable controlled by mouse.  jQueryCarousel uses JSON as source data provider.

[caption id="attachment_564" align="aligncenter" width="190" caption="3d carousel jquery"]<a href="http://jqueryexample.com/wp-content/uploads/2011/12/3d-carousel-jquery1.jpg"><img class="size-full wp-image-564" title="3d-carousel-jquery" src="http://jqueryexample.com/wp-content/uploads/2011/12/3d-carousel-jquery1.jpg" alt="3d carousel jquery" width="190" height="120" /></a>[/caption]

<a href="http://jquery-ui.googlecode.com/svn/!svn/bc/3147/branches/labs/index.html" target="_blank">Demo</a>