A SingleClick Event to easily capture a single click. Unlike the builtin click which fires for each and every click.

A PasswordStrength indicator.

But at it's core it is mostly just a framework to allow you to develop faster, utilising the Don't-Repeat-Yourself ideology.

This demo shows it in action, as well as providing you with tutorials and examples on how YOU can write great jQuery plugins which are configurable, extensible and translatable in minutes instead of hours.

Installation

As everyones extraction process is a little bit different be sure of the following:

If the archive was extracted and you have a whole bunch of files and directories (folders), then you must create a new directory called jquery-sparkle and move all the files and directories into that to continue.

If the archive was extracted and you have only one directory called jquery-sparkle which has a whole bunch of stuff in it, then that is fine and you can continue onto the next step.

If the archive was extracted and you have only one directory and it is not called jquery-sparkle then you must rename it to jquery-sparkle to continue.

Be sure to always keep the entire jquery-sparkle directory intact; this means if you were to only move some of the files instead of moving the entire directory, then you would run into problems due to the cross directory references would no longer be working.

Step 3. Include jQuery (insert into your page's head tag)

If your page already has already included jQuery then you should skip this step.

Example Result

String.prototype.toSlug

Example Code

<textarea id="sparkle-demo-toSlug-input"> This is a post about special chars: !@#$%^*()+</textarea>
<textarea id="sparkle-demo-toSlug-result"></textarea>
<button id="sparkle-demo-toSlug-update">Update Result</button>

Example Result

Using BalClass

The Benefits of BalClass

The major benefits of using BalClass is that you can easily work with multiple configurations for your plugin, as well as making it easily extensible by other developers. For example we can do this to have our plugin easily translatable:

We can then trigger your plugin using different configurations like so:

<p id="hibye-example"></p>
<script type="text/javascript">
// onDomReady
$(function(){
$('#hibye-example').hibye(); // uses the default language
$('#hibye-example').hibye('english'); // uses the english language
$('#hibye-example').hibye('french'); // uses the english language
$('#hibye-example').hibye('french',{
'hi': 'Salut :-)'
}); // uses the french language with a override on hi to include a smiley face
$('#hibye-example').hibye({
'hi': 'Ciao',
'bye': 'Ciao'
}); // uses the default language with a override on hi and bye so that they are italian
});
</script>

Now that is pretty nifty isn't it! Now say if an Italian developer is using our plugin calls the hibye jquery function ($.fn.hibye) a fair bit, instead of doing the following (which is a bit redundant):

The Benefits of Sparkle

For our HiBye example, what could make it even better is if we use sparkle! Sparkle really saves us a lot of time, instead of having to do all those lengthy jQuery fn calls whenever we want to instantiate something, we can just add a CSS class and Sparkle will handle it automagically! Wow!

This has huge benefits especially for AJAX loaded in content, as say datepickers and timepickers for example will be instantiated automatically for their AJAX content without us having to instantiate each and every one manually! This is a serious life saver at times!

So let's see how we can do this. Firstly we want to modify our example to no longer use an id attribute, but instead a CSS class.

<p class="sparkle-hibye"></p>

You don't need to prefix the CSS classname with sparkle- but we like to as it has become a kinda convention and standard with other sparkle extensions. So now that that's done, all we need to do is add our sparkle extension. We can do this with:

Now that's all there is to it, now wherever there is a element with the class sparkle-hibye they will automatically be hibye'd onDomReady. If you are loading in AJAX content, you can use $ajax_content.sparkle() to sparkleify the ajax content.

But what if we are on a French website, we would want all the HiBye's to be in French! We can do this easily with:

$.Sparkle.applyExtensionConfig("hibye",{
"hibyeMode": "french"
});

And bang, just like that, all the sparkle instantiated HiBye's are now in french! As well as any future sparkled content!

Example Result

Enjoy!!!

If anything isn't working the way you want it to, or if you would like to request a feature or provide praise or general feedback then be sure to click the feedback button to the right, or the "Get Support" link up the top of this page.

This work is powered by coffee and distributed for free. Donations are how we afford our coffee. Coffee is how we stay awake after our day job hours to work on things like this free open-source project which you're looking at. So go ahead, and get that warm fuzzy feeling knowing you just helped some poor fellow working after hours for free to buy his coffee. You only need to spare a few dollars, or as much as you feel this piece of work is worth. Thanks so much. Alternatively; if you are not in a donating mood, then spreading the word about this project on twitter, your blog, or whatever is just as good. You can also give praise by clicking the feedback button or visiting our "Get Support" link. Thanks a bunch, we appreciate the help deeply.