Using jQuery to Style Design Elements: 20 Impressive Plugins

I know we covered different jQuery posts here but you guys don’t stop asking for more. So here we are again covering more jQuery Plugins doing what: Styling Design Elements. So today we need jQuery solutions that are a little more specific. Here are 20 more handy jQuery plugins that have made websites much sleeker and more interesting.

1. jQuery Sequential List

This tutorial will show you how to use jQuery to add a sequent of CSS classes to create a graphical list. The second example in this tutorial will show you how to add a comment counter to a comment list using jQuery’s prepend feature. The code is very simple, the following example shows how you can add a counter number to a comment list.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){

  $("#commentlist li").each(function (i) {
    i = i 1;
    $(this).prepend('<span class="commentnumber"> #' i '</span>');
   });

});
</script>

To get this markup:

<ol id="commentlist">
	<li><span class="commentnumber"> #1</span>
		...
	</li>
	<li><span class="commentnumber"> #2</span>
		...
	</li>
	<li><span class="commentnumber"> #3</span>
		...
	</li>
</ol>

Check out the demo here

2. jQuery Corners

This jQuery plugin will simple allow you to create rounded corner for your design elements including forms or anchor links without using images or obstructive markup.

Once jQuery and jQuery.corners scripts are loaded, rounding corners is easy.

<div style="background-color:#acc; padding:5px" class="rounded">
  Simple Example
</div>
<script>$(document).ready( function(){
  $('.rounded').corners();
});</script>

Check out the demo here

3. jQuery Checkbox

This jQuery plugin will simple skin checkboxes and radio buttons in a nice way.

Check out the demo here

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

This tutorial demonstrates how to incorporate the power of jQuery UI CSS framework classes in a custom widget to create and style buttons and toolbars.

Creating a basic button is very simple with the jQuery UI CSS framework and styling it is really easy. All you need to do is add the default “clickable” state by assigning the class ui-state-default. We also want these to have rounded corners, so we added the optional ui-corner-all framework class which adds CSS3 corner-radius properties to all corners without the need for any images or extra markup.

<button class="ui-state-default ui-corner-all" type="submit">Button</button>
<a href="#" class="ui-state-default ui-corner-all">Link</a>

Check out the demo here

5. Create A Colorful Sitemap With jQuery

In this article, Chris Coyier teaches us how to build a visually interesting sitemap that makes the hierarchy clearer through the use of color. The idea here is, when the mouse cursor hovers over a list, that list will brighten up a bit and fade to a unique color. When the mouse cursor is removed, the list will return to its original color.

Check out the demo here

6. Style Author Comments Differently with jQuery

Now you want to apply the custom styling applied to comments left by the author on blogger. The script will loop through all of the comments on the page, if the member link on the current comment matches the member link in the profile page on your blog, then it must be an author comment. The script will then apply an additional class to the comment, allowing you to style it separately.

Check out the demo here

7. asmSelect – Alternative Select Multiple

A progressive enhancement to <select multiple> form elements which is easier for users to understand and interact with than regular <select multiple> form elements. Also, it doesn’t require user to Ctrl-Click or Shift-Click multiple elements. Instead users of your form can add or remove elements individually, without risk of losing those that have already been selected.

Check out the demo here

8. Flexgrid

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 to load the content. Features include: Resizable columns, Resizable height, Sortable column headers, Cool theme, Can convert an ordinary table, Paging, Show/hide columns and more.

Check out the demo here

9. MaxLength

This plugin makes it easy to apply a "maxlength" attribute to custom elements for example a <textarea>. It also gives you the possibility to add a nice character counter under the element that shows the user how many chars he/she has left before the maxlength is reached, and/or an alert message.

To use this on a simple text area, all you have to do is:

<script type="text/javascript">
  $(document).ready(function(){
    $('#textarea_1_1').maxlength();
  });
</script>

Check out the demo here

10. ClockPick

ClockPick is a timepicker plugin, enabling users to enter a time value into a form field. Using a unique popup div UI, ClockPick gets the job done in about 1/5 the time it takes to enter a time value using a traditional select menu UI.

Check out the demo here

11. jQuery (mb)Menu 1.5

This is a powerful jQuery component to build easily a multilevel tree menu or a contextual menu (right click) in an intuitive way! You can add as many submenus as you want; if your submenu or menu is not declared in the page, the component’ll get it via ajax calling the template page with the id of the menu you need (the value of “menu” attribute) the ajax page should return a well formatted code as the example below for the menu voices code.

Check out the demo here

12. (mb)ContainersPlus 1.0

This is a useful plug in to build full featured and full skinnable containers. The container can be set to draggable, resizable, collapsable and minimizable. The container can be set to draggable and resizable by adding “draggable” and/or “resizable” to the class attribute; there is a custom attribute called buttons that accept: i [iconize], m [minimize], c [close] as value to add buttons to the button-bar. You can also add a left top corner icon by adding the attribute “icon” with the icon path as value.

Check out the demo here

13. Auto line-height for flexible layouts

Adjusts the line-height of a container (such as a div) in proportion to it’s width, relative to the font size.

Check out the demo here

14. UI.Layout

This plugin was inspired by the extJS border-layout, and recreates that functionality as a jQuery plug-in. The UI.Layout plug-in can create any UI look you want – from simple headers or sidebars, to a complex application with toolbars, menus, help-panels, status bars, sub-forms, etc.

Check out the demo here

15. Colorize

Colorize is a jQuery plugin to add background color to alternate table rows, highlight a row/column on mouse over, and colorize a row/column when you click your mouse button over it. You can colorize as many table rows as you want. A repeat mouse click reverts the row to the original background color.

Check out the demo here

16. jQuery 3 State Switch Plugin

jQuery 3 State Switch Plugin(J3SSW) is a jQuery Plugin that expresses the selection and some states of list item using radio button and checkbox at the same time. The applications of J3SSW includes some interfaces for sort key or filter key of any search results.

Check out the demo here

17. Animated Hover

Animated Hover provides animated transitions between hovered items for any jQuery project. Requires jQuery 1.2+ and Dimensions

Check out the demo here

18. jQuery Feed Menu

It’s nice to offer users an alternate way to get at your feeds, here is an easy and standard way of offering your feeds via a nice, compact menu, just like in the location bar, but on your site.

Check out the demo here

19. jquery Hover Sub Tag Cloud

Here is a new way to create your tag cloud Using jQuery and reduce its size, so my demo will introduce “Hover Sub Tags” under each main Tag, for example if you have Ajax as a tag, you can have jquery, mootools, etc… as sub-tags. A Sub Tag Cloud will appear when hovering over the main Tag links.

Check out the demo here

20. jQuery ListNav Plugin

This jQuery plugin supplies an easy way to unobtrusively add a letter-based navigation widget to any UL or OL list. An easily stylable (via CSS) nav bar appears above the list, showing the user the letters A-through-Z. Clicking one of the letters filters the list to show only the items in the list that start with that letter. Hovering over a letter (optionally) shows a count above the letter, indicating how many items will be displayed if that letter is clicked. Other options give you control over the basic functionality.

Check out the demo here