Archive for the ‘jQuery’ Category

jQuery MultiSelect Plugin w/ ThemeRoller Support

Monday, February 1st, 2010

Update 02/15/2010: Version 0.4.1 is out! Download below, and read the changelog.

I’ve been working on a multiple select plugin on and off for the past couple months and finally have it stable enough for a first release. When I started this project my intentions were only to re-factor Cory LaViska’s MultiSelect implementation, but it quickly turned into a complete re-write with a focus on speed and ThemeRoller support. This plugin turns an ordinary HTML select control into an elegant drop down list of checkboxes.
jQuery MultiSelect

Current version: 0.4.1 (02/15/2010 – Changelog)
View demos
Download source (11.7 kb) or minified (6.5 kb), and the CSS file.
Follow this project on GitHub

Features

Full ThemeRoller support.
Optgroup support with clickable labels.
Optional header with check all / uncheck all / close links.
Degrades gracefully.
Keyboard support (albeit, somewhat shaky at this point).
Ability to hook into 5 different event callbacks.
Display the checked options in a list with a configurable maximum.
Easily change the position, fade speed, scroll container height, links text, and input text.
The widget width inherits from the original element, but is also configurable as a parameter.
Pre-selected & disabled option support.
bgiframe support.
Only 6.5kb minified.

(more…)

Posted in jQuery | 57 Comments »

jQuery and Performance: What is ‘this’?

Monday, January 4th, 2010

In my opinion, one of the best jQuery performance tips is to minimize your use of jQuery. That is, find a balance between using jQuery and plain ol’ JavaScript, and a good place to start is with ‘this‘. Many developers use $(this) exclusively as their hammer inside callbacks and forget about this, but the difference is distinct:

When inside a jQuery method’s anonymous callback function, this is a reference to the current DOM element. $(this) turns this into a jQuery object and exposes jQuery’s methods. A jQuery object is nothing more than a beefed-up array of DOM elements.

Digging a little deeper

As you begin to nest functions the context of this changes:

<a href="#"><span>Hello World</span></a>
 
$("a").click(function(event){
	var self = this;
 
	$(this).find("span").each(function(){
		console.log(self, this);
	});
 
	event.preventDefault();
});

In this example I save this to the variable “self” so it can be referenced inside the each() loop. Otherwise it’s impossible to reference this as the anchor element inside the loop, because this is now the “span” DOM element.

Depending on what you’re doing, using this is sometimes easier and always faster than $(this). I’m not talking about scraping jQuery altogether, but rather recognizing that a lot of DOM interaction (especially the simple stuff) can just as easily be done in vanilla JS using this; you are not required to use the jQuery API. Example:

(more…)

Posted in JavaScript, jQuery | 13 Comments »

Executing jQuery Methods Using Array Notation

Thursday, December 10th, 2009

I was refactoring some code this morning for a plugin I’m writing and ran into a case where I needed to dynamically execute a jQuery method. I had a variable that holds the value of a jQuery function I wanted to execute based on which key code was pressed; prev() for the up arrow, and next() for the down arrow. As it turns out you can do this with array notation.

(more…)

Posted in jQuery | 2 Comments »

jQuery Related Selects Plugin 0.3

Wednesday, December 2nd, 2009

I’ve just pushed version 0.3 of my related selects jQuery plugin to GitHub. Along with refactoring the code and some minor performance improvements, 0.3 allows you to return data in HTML format instead of JSON. This gives you direct control over the markup and individual option tags in case you want to use optgroups, assign classes to options, etc.

I’m still undecided whether or not I want to add caching. I thought about it when I first wrote it and a user suggested it, but I cannot picture a use case where caching would be necessary; people are likely to choose an option and either decide it was incorrect and change it, or stick with it. In either of these cases, caching doesn’t do anything other than add overhead. If a user selects an option and then continuously changes/reverts back to it, caching would be helpful, but how often is this likely to happen?

Anyways, here’s she is:

Posted in jQuery | No Comments »