31 | 07 | 2010
Main Menu
Affiliates
Login Form



Alexa
JoomlaWatch Stats 1.2.6 by Matej Koval
10 jQuery Button Design Tutorials Collection
Written by Phoenix   
Tuesday, 18 August 2009 16:00

Rating 3.7/5 (6 votes)

Learn how to design awesome bttons in jQuery with the write less do more - jQuery.

 

1. Styling Buttons and Toolbars with the jQuery UI CSS Framework

By popular demand: coded real-world examples of themeable buttons and toolbars using the jQuery UI CSS framework, a system of classes developed for jQuery UI widgets that can easily be applied to any plugin, and even static content.

 

2.  How to create Skype-like buttons using jQuery

If you use Skype I am sure that you noticed that animated button for adding more people to a chat. When you click on it the icon on the left "jumps" for a few times. I love that animation. And that's why I'm going to show you how to create the same button using jQuery and some simple CSS.

 

3. iToggle For jQuery

A completely unashamed rip of those lovely sliding on/off buttons on the iPhone, making checkboxes (and radio buttons) look good!

This started as a really simple little excersise in bordom one evening just to see if we could replicate the look and feel of the iPhone sliding toggles on the web. Now, it's a fully blown plugin that should do most the work for you! Just like the Last.FM plugin the styling is left almost entirely up to you. There is a template you need to follow, but this just determines a layout, nothing more.

 

4. jQuery checkbox and Radio button

This Jquery Custom checkbox script display radio buttons for your form based on the jQuery library.

 

5. JQuery Plugin: Web SpinButton / SpinBox Control

This page demontrates a Web Spin-Button control using only a textbox.

 

6. Enabling the Pager Buttons

Learn to enable pager buttons with jQuery.

 

7. jQuery imageless buttons a la Google



This jQuery plugin is an attempt to recreate Google's imageless buttons and prove that it doesn't take a whole team of engineers and an endless cycle of code revision and quality control (their own words) to pull this off. I don't know how Google did it, but my buttons automatically adapt to paddings and other styling you wish to use. They allow for a lot of stylistic customisatoin via a few lines of css while keeping all the display critical css rules hidden deep inside the plugin. 

 

8. Clickable Rounded Buttons with jQuery

I have created an simple example for buttons that can be clickable with rounded corners using jquery.corner.js.

 

9. jQuery Glow Buttons

A simple and nice script to add effects to the buttons. jQuery glow button script is used to add glow effects when the user place mouse over the button. This script works on major browsers such as opera,mozilla and other so there is no need of worry about browser compatibality.So I figure what better way to learn more about jQuery than to dig right in and create a plugin or two?  At first I thought this sounded pretty intimidating, but after browsing through some of the existing jQuery plugins I figured it might be easy enough to try and 'rearrange' one of the Toolkit controls that I created.  So that is what I did with my GlowButtonExtender control I created a few months back (and I plan on doing it with the ProgressBar one as well very soon).  I kind of liked this because I thought creating the same UI widget using both the Toolkit and jQuery might give a little more insight into what the relative advantages are between the two frameworks.

 

10.  jQuery Plugin – Radio button with Checkbox Behavior

 

Comments
Search
Only registered users can write comments!

3.22 Copyright (C) 2007 Alain Georgette / Copyright (C) 2006 Frantisek Hliva. All rights reserved."

Last Updated ( Wednesday, 26 August 2009 16:34 )