background preloader

50 Fundamental jQuery Controls, Components and Plugins

50 Fundamental jQuery Controls, Components and Plugins
Every seasoned developer has one and every young and upcoming developer should be thinking of building one – a good and concise collection of UI controls, components and plugins that you can always rely on in times of need. Of course, there are plenty of great UI frameworks, kits and libraries that you could use, but none will offer you every component and none of them will be tailored to your own personal preferences and needs. Up until a few months ago my controls had been collected and sourced from various frameworks (Prototype, MooTools, jQuery…), upon review it seemed a little out-dated, some components unnecessary and some controls desperately needed updated. It seemed logical to give the collection a fresh outlook and a uniformity under one framework – I chose jQuery. (I have held on to a few controls that have not been built with jQuery, but for the sake of this post I have omitted them). So, here are my 50 Fundamental jQuery Controls and Rich UI Components… What would you add? Related:  jQuery

Calendar - Page 5 It is difficult to find a well-developed calendar component for our web applications. NoGray has developed a free and highly customizable Javascript calendar component for web developers like us. The look and feel of the calendar can be changed easily using CSS. If you found the calendar does not suit your needs, you can spend some money and ask them to customize it for you. Web Application is getting more and more popular recently. NoGray focuses on 3 simple steps when working with clients. You know where to go if you need someone to help on your website or web application projects. ; ) Requirements: XHTML Doctype Demo: License: License Free

jQuery Sequential List Have you ever had to manually code something that is sequential? Didn't you find it annonying? Well, here is a simple solution for you. This tutorial will show you how to use jQuery to add a sequent of CSS classes to create a graphical list. View Demo Sequential List 1a. First, download a copy of jQuery. <script type="text/javascript" src="jquery.js"></script><script type="text/javascript"> $(document).ready(function(){ $("#step li").each(function (i) { i = i+1; $(this).addClass("item" i); }); }); </script> The jQuery will output the source code as: 1b. Style the <li> element with a background image accordingly (step1.png, step2.png, step3.png, and so on..). 2a. You can also use this technique to add sequential content using jQuery's prepend feature. The code will add the <span class="commentnumber"> tag (with # + 1) to each <li> tag. 2b. Style the <li> element with position:relative and use position:absolute to place the .commentnumber to the top right corner.

AmplifyJS - A Component Library for jQuery jQuery UI DatePicker: Disable Specified Days One project I'm currently working on requires jQuery. The project also features a datepicker for requesting a visit to their location. jQuery UI's DatePicker plugin was the natural choice and it does a really nice job. One challenge I encountered was the need to prevent specific days from being picked. Here's the jQuery JavaScript I used to accomplish that. The jQuery JavaScript The base code is taken from this forum post. I'd like to see jQuery UI implement a standard way of disabling days. Be Heard Tip: Wrap your code in <pre> tags or link to a GitHub Gist! Older Sliding Labels Using MooTools Newer Printing MooTools Accordion Items

8 Fresh and Useful jQuery Plugins jQuery helps us web designers and developers do some amazing things, and plugins make it almost too easy. That’s why it’s an obsession of mine to find new ones. I’ve been on the lookout for the past couple of weeks, and I’ve collected some good ones. Isotope Isotype is a jQuery plugin for creating dynamic and intelligent layouts. jQuewy jQuewy is a simple, efficient, and lightweight loader for javascript functions, with a powerful CDN-ready backend. Sausage Sausage is a jQuery UI widget for contextual pagination. ImageLens ImageLens is a jQuery plug-in to add lens style zooming effect to an image. jquery.timepickr.js This jQuery plugin is an experimental approach to enhancing web time picking. CodeExplorer This jQuery plugin produces an online code explorer. 960 Grid on jQuery-Mobile 960 Grid on jQuery-Mobile is a port of 960 grid to jquery mobile. jMenu jMenu is a jQuery plugin that enables us to create horizontal navigations with unlimited sub-menus. About the Author Related Posts 629 shares

Three jQuery-based frameworks for a rich UI | Auto-Magical After spending several months refactoring a large ASP.Net MVC application for performance, I became intimately aware of certain fundamental limitations of the server-side UI approach and began looking into pure client-side UI frameworks as an alternative. Having decided on jQuery as the foundation, I’ve narrowed down the possibilities to three candidates: jQuery UI, Kendo UI and Wijmo. Here are some of my conclusions: Why choose pure-client side? My current development approach is MVC 3 “enriched” with the Telerik Extensions for ASP.Net MVC. Presenting a new alternative to server-side MVC controls, are several client-side UI frameworks. There are three competing HTML5 UI/Ajax UI frameworks I want to mention. jQuery UI: jQuery UI provides a bunch of client-side UI widgets, “interactions” and effects. Pros: From the same team which brought you jQuery. Cons: Key components are not included with the framework, such as Grid, Template, DataSource/DataView, Validation. Telerik Kendo UI:

20+ Demos Showing Advanced jQuery Effects Just a short while ago, Flash was one of the primary technologies used by web designers to add interactivity to a website. Since the introduction of the iPad, with its lack of the Flash Player, there’s an acceleration in the web development world to use alternative technologies to Flash, such as jQuery, Ajax and others. Although Flash is still a very powerful and useful tool, which works great on many cases, several of the effects that web designers are accustomed to creating in Flash, can be just as easily implemented using jQuery. Here are 21 online demos that show the power of jQuery for creating advanced effects and interactivity that can rival Flash. 1. This demo mimics the popular card flip technique which can rotate an element 360 degrees around its own x or y-axis. 2. jQuery Quicksand plugin This is a great plugin for sorting an array of elements/icons on a page with nice fade-in/fade-out and animation effects. 3. 4. 5. 6. 7. jQuery Circulate 8. 9. 10. 11. 12. 13. 14. 15. 16. 19. 20.

10 Fresh jQuery Plugins and Tutorials | Tutorials The popularity of jQuery continues to grow. This means that we’re seeing it used on more websites these days, and there are more developers coming up with new ways to use it. The great thing about that is many of these developers are sharing what they learn though tutorials and plugins. We’re always on the look out for this new jQuery stuff. Beautiful Background Image Navigation This tutorial will teach you how to create a beautiful navigation that has a background image slide effect. Quovolver Quovolver is a simple extension for jQuery that takes a group of quotes and displays them on your page in an elegant way. Lettering.js Lettering.js is a lightweight, easy to use jQuery plugin for radical Web Typography. imgAreaSelect imgAreaSelect is a plugin for selecting a rectangular area of an image. An HTML5 Slideshow w/ Canvas & jQuery This tutorial will help you create a progressively enhanced slideshow with a fancy transitioning effect, which is perfectly functional in older browsers as well.

Presenteer Introduction Presenteer.js a very flexible HTML5 presentation tool that works in one line of code, but is configurable with constructor options and many callbacks. In its simplest form, it works like And then navigate through the presentation with presentation.start();,;, presentation.prev(); and; Installation Include jQuery and Presenteer.js (and possibly Sylvester.js, see below) in your page. Create the HTML and style it with CSS Then, on page load, create a Presenteer instances for every presentation on the page. I set followElementTransforms to false to make Presenteer not follow element transforms. And set followElementTransforms: true. Constructor options Apart from the followElementTransforms constructor argument, there's many more options and callbacks. Where canvas is a selector or jQuery element of the canvas on which the presentation is placed. The list of elements on the canvas is specified in the elements argument. Navigation 1.

45+ Fresh Out of the oven jQuery Plugins Mar 05 2008 Two month ago we’ve presented the 50 favorite jQuery plugins many developers use and we promised that the second version will be coming soon. Today, we are going to introduce 45+ more jquery plugins that were recently created, so you don’t have to do the search as we did it and will continue to do it to build a useful library of jquery plugins and solutions. Image SlideShows and Galleries 1) Galleria -Is a javascript image gallery written in jQuery. 2) jQuery Multimedia Portfolio -Non obstrusive and accessible portfolio supporting multiple media : photos, video (flv), audio (mp3), will automatically detect the extension of each media and apply the adapted player. 3) wSlide -Change your lists in animated box (with pagination) Tag Clouds 4) Hover Sub Tags- Using jQuery to reduce the size of the tag cloud that you have on your sites, for example if you have Ajax as a tag, you can have jquery, mootools, etc… as sub-tags. Pagination Navigation 7) jQuery Treeview Plugin Tables and Grids

Basic Tips jQuery The jQuery programming library has dramatically changed the way we work online. Web developers are able to prototype animations and backend effects much quicker with fewer lines of code. This brings to the table a profound collection of functions which you can read about here. It doesn’t take long to figure out jQuery syntax, especially if you are fairly well versed using JavaScript. But if you are new to the language it shouldn’t take long to get started. Setting Up your Documents The first thing you’ll want to do is include the most recent version of jQuery. If you include an external document from Google this saves you time on each pageload. $(document).ready(function() { //do stuff }); The above block is using the jQuery $() selector syntax. Creating Functionality If you are struggling to understand how constructors are used to target elements, spend a bit of time browsing the jQuery tutorials section. Below is some crude HTML and jQuery code to display our alert box. Conclusion

7 Best jQuery & JavaScript PDF Viewer plugin with examples In this Post we are providing best jQuery PDF viewer plugin & tutorial with examples.Due to popularity of online document viewer like Google Docs some javascript developers develop a good and useful plugins to view pdf file on online pdf viewer.Here is some good list of online pdf viewers. pdf.js is an HTML5 experiment that explores building a faithful and efficient PDF renderer without native code assistance. The jQuery Media Plugin supports unobtrusive conversion of standard markup into rich media content. which holds the object, embed iframe tags neccessary to render the media content. Read More Demo 3. A JavaScript library for dynamically embedding PDFs in HTML documents. Read More Demo 4.Google Docs Viewer plugin for jQuery The Google Docs Viewer is an embeddable browser-based viewer that requires only a URL to a file available online. Read More Demo 5. The ZOHO Viewer is an embeddable browser-based viewer that requires only a URL to a file available online. Read More Demo Read More Demo

10 Very Useful Ajax Plugins for your Websites 10 Ajax plugins collection This is collection of most interesting fresh Ajax plugins. Here are plugins and for working with images, and for paypal, and for pagination, and for navigation and another. Image Zoom & Pan Gallery, 360° Object Rotate (Spin), Fullscreen View. Online demo you can find here. 2. Nice way to display long lists. 3. By default – it made for comments, but, you can easy to apply it to another, as example – possibility to display next X blog posts (so you can use it for pagination too). 4. This plugin is drag and drop image file uploader. 5. jpaging jQuery AJAX paging plugin. 6. jsLink jQuery Broken Link Checker Plugin. 7. This plugin will add a full function shopping cart to your website. 8.jNavigate This plugin will allow to load your website content dynamically. 9.Ajax Login Form Easy ajaxy login form for your website. 10.Transform This plugin allow users to easily make cross-browser XML transformations with XSL. Conclusion