James Smith • loopj.com » Blog Archive » jQuery Plugin: Token. This Project Has Moved! For the latest version and awesome documentation, please head over to: Overview This is a jQuery plugin to allow users to select multiple items from a predefined list, using autocompletion as they type to find each item. You may have seen a similar type of text entry when filling in the recipients field sending messages on facebook.
Features Intuitive UI for selecting multiple items from a large list Layout controlled fully in CSS, easily customisable Result caching reduces server load No images required, just the plugin’s .js file and some CSS Handles json search data for autocompletion Smooth animations when results load Select items using the mouse or keyboard Screenshots Vertical list style item selection Facebook style item selection Demo A live demo of the token input is available here. Usage Latest documentation can be found here: License This plugin is released under a dual license.
Quick Download Github Project About the Author. 18 jQuery scripts and tutorials to improve your portfolio | Desi. For freelancing designers, the online portfolio is one the best ways to get some work. Every prospect will check it before hiring you for the job, so it must be good. JQuery can be a great tool to improve your portfolio’s usability or functionalities. In the following collection you will find some great jQuery scripts and tutorials that’s help you to get a better portfolio… and find more graphic design jobs!
1. TN3 Gallery One of my favorite jQuery slideshow available, a paid script that will make your life much easier and your site prettier. 2. jQuery tabs Tabs can be a great way to make informations about a project quickly available without leaving the page. 3. jQuery cycle If you want to show a project’s evolution, jQuery cycle could be the way to go. 4. If you are going to use a tooltip to display further technical informations, do it with style. 5. jQuery Zoom 6. Nice flipping effect for your divs, images, or whatever you want to put in it. 7. jQuery Multimedia portfolio 8. 9. 12. 40 Exceptional jQuery Interface Techniques and Tutorials.
With the advent of JavaScript/web application libraries and frameworks, it’s become much easier to build interactive components for a site. For the folks that are unfamiliar with jQuery – it’s a popular, high-performance and compact JavaScript library/framework. jQuery will allow you to reduce the amount of code you have to write for dealing with browser quirks, memory leaks, and repetitive code by providing you with a set of useful and highly-optimized and thoroughly-tested functions and methods.
In this article, we explore the strengths of jQuery in letting web developers create impressive client-side-based user interface components. Whether you’re looking for a particular interface/interaction pattern built on Query (like module tabs or modal windows) or you simply want to learn the library by engaging in step-by-step tutorials – you should be able to find something here for you. Modal Windows 1. Live Demo 2.
Live Demo 3. Live Demo Tool Tips 4. Live Demo 5. Live Demo 6. Live Demo Module Tabs. jQuery Tips and Tricks II. This is my second posts about jQuery Tips and Tricks. If you missed my first post, you might want to read it now useful and handy jQuery Tips and Tricks. This time, I found some performance tuning, element manipulations tips and tricks that I believe will able to help you develop a more effective and efficient jQuery script. Enjoy! 1. No conflict-mode To avoid conflict when you are using multiple libraries in a website, you can use this jQuery Method, and assign a different variable name instead of the dollar sign. Using jQuery with other libraries var $j = jQuery.noConflict(); $j('#myDiv').hide(); 2.
It return the number of elements that are selected by jQuery selector. $('.someClass').length; 3. There are advantages to let Google host jQuery. 4. jQuery provides us 3 ways to determine if a checkbox is checked. // First way $('#checkBox').attr('checked'); // Second way $('#edit-checkbox-id').is(':checked'); // Third way $("[:checkbox]:checked").each( function() { // Insert code here } ); 5. Bookmark: 50+ stunning jQuery applications. This post has got a collection of stunning jQuery applications; I tried my best to gather most of the best applications / plug-ins which are developed using jQuery at one place. I hope below list might help developers in coming up with some good applications by using jQuery. Jcrop » the jQuery Image Cropping Plugin – deepliquid.com Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.
Fancy Box – Simple and fancy jQuery plugin – fancy.klade.lv Fancy Box has got many features like: * Automatically scales large images to fit in window * Adds a nice drop shadow under the zoomed item * Groups related items and adds navigation through them (uses preloading) * Can display images, inline and iframed content * Customizable through settings and CSS jQuery lightBox Plugging – leandrovieira.com. 5 Tips for Better jQuery Code: jQuery, Tutorial. I’ve been coding using jQuery since shortly after it came out, and well — I’ve been using it almost every work day. Here is a few tips that have saved me time. #1: Use data method instead of storing data inside the DOM. The mistake I see people making all the time is this: $('selector').attr('attribute', 'this is the data that I am storing');// then later getting that data with $('selector').attr('attribute'); Why is this a bad thing? Instead use the data method in jQuery. $('selector').data('meaningfullname', 'this is the data I am storing');// then later getting the data with $('selector').data('meaningfullname'); This allows you to store data with meaningful names and as much data as you want on any element on the page.
. #2: Take advantage of jQuery’s built-in custom selectors. jQuery has a plentiful amount of selectors that are beyond basic CSS selectors, so use them. . #3: If you are Manipulating the DOM a lot, use the new on syntax. $(document).on('click', 'div.edit', function(){ ... });