The update addresses a small issue when the plugin was targeted to multiple elements or no elements at all. Updating to this version is recommended as it doesn’t change any features or break any previously existing functionality.

Head over here to read more about the plugin or go straight to the download page to pick it up.

The jQuery UI Effects library had just what I was looking for, with only one problem. In order to use the desired effect I had to include over 100 kb of additional Javascript. My app was already pretty heavy on the client side so I sought a way to achieve the effect with as little cruft as possible.

So, after a little hacking around, I present the “Mini” UI Effects plugins. They are a set of plugins that are lightweight and attempt to offer a similar experience to the jQuery UI effects. For now there are just three basic effects, “Blink”, “Wiggle” and “Bob.” They are similar to the jQuery UI “Pulsate”, “Shake” and “Bounce” effects respectively.

Please feel free to download and use them in your own projects both commercial and personal alike. They have been tested to work in IE6+, Safari and Firefox.

Check out a demo and download the jQuery Mini UI plugins here. Let me encourage you to leave feedback in the comments. We’d love to hear of any experience using them (bugs or otherwise). Enjoy.

It weighs in at just under 1k minified, so it shouldn’t be too tough on your page weight. Feel free to download it and use it for any kind of project.

Usage

Include the plugin as you would any jQuery plugin (where “/path/to/file” is specific to your instance).

Next, put the HTML markup in place (of course the href, target and class can be what you want):

Open Google in a new window.

Then, just call popup() on the desired elements:

$(".popup-link").popup();

Additionally, you can provide the desired size of the popup window like so:

$(".popup-link").popup({
    width: 320,
    height: 240
});

Download it here.

Update

We have posted a new version of the plugin that addresses a small bug. The download link above takes you to the demo/download page which contains the new version. Read more about it on this page.

First, we need to define the plugin, we will call ours “colorize”… pretty simple. You’ll want to use the full “jQuery” function call throughout the plugin, as opposed to the “$” alias in the event this plugin gets used in a situation that alias has changed. In short, $ = bad.

jQuery.fn.colorize = function()

That gives us the ability to do something like:

$("#selector").colorize();

Next, we should come up with some sensible default settings for our plugin while also providing a way for users to provide their own settings.

jQuery.fn.colorize = function(options) {
    var defaults = {
        textColor: "green"
    };
    var options = jQuery.extend(defaults, options);
};

Now, we have one option, “textColor”, in our plugin, which defaults to green. We make use of jQuery’s extend() function to smash the two objects (options and defaults) together. So, usage of our plugin looks like this:

$("#selector").colorize({
    textColor: "red"
});

By calling our plugin in this manner, we override the default “green” setting with “red”. Next, let’s add some code so our plugin actually does something. All we’re going to do is apply the CSS property “color” to the selected element. Note that inside a plugin “this” assumes the role of the selected element.

    $(this).css({
        color: options.textColor
    });

Now, admittedly this plugin is awful in terms of provided functionality. But, at least it does something now. One last tidbit that’s important to include, though.

return this;

It is important to return this if at all possible so as to maintain the chaining ability of jQuery. For example, our plugin supports chaining so we can do this:

$("#selector").colorize({textColor: "blue"}).show(500);

Done.

So, all put together we’ve got something that should look like this:

jQuery.fn.colorize = function(options) {
    var defaults = {
        textColor: "green"
    };
    var options = jQuery.extend(defaults, options);

    jQuery(this).css({
        color: options.textColor
    });

    return this;
};

That concludes the basics for jQuery plugin authoring. For more information you can always check out the awesome-packed jQuery documentation.

http://nettuts.s3.amazonaws.com/154_cheatsheet/jquery12_colorcharge.png