Table of contents
Before we can see what’s new, we need to do a comparison in the plugins. I won’t go script specific, but configuration specific. Generally, when you download/use a plugin, there are three steps:
- Adding the HTML
- Adding a random script tag/file which calls all plugins and perhaps some custom code
And now, using the IIDE methodology we can cut out this unnecessary third step:
- Add and configure the HTML
Old plugin development
Here’s the old plugin configuration for the jBar version 1.0.0:
Sure it looks okay, but it’s not needed at all. We pass the plugin a bunch of options which are then parsed through the plugin logic and it outputs your code entirely.
No more default options
One thing you’re probably used to seeing is jQuery plugin defaults that are actually inside the plugin script itself which you essentially override with your own options when you call the script. Using the IIDE methodology, I decided this wasn’t at all necessary and completely ignored the need for it. Why? Because it’s not really needed either - the defaults are in the markup for one, and secondly, we can check to see if the user has added the JSON data to the data-* attribute and run a function if necessary - light work.
New plugin development + config
I’m an advocate for ideas and changing things, not without good reason though, but generally because things make sense and following the direction of the industry. I really see this methodology pushing the way for future plugin development, and web development in general. I use IIDE for a lot of my application development work, with data-* attributes the possibilities are endless.
So what does the above do? It’s essentially some really basic JSON that we feed off the parameters to add data to our script, which in turn outputs the plugin that you need. These are the only four options that come with the jBar version 2.0.0. I know some of you requested to have the jBar at the bottom as well, but in terms of usability it’s not great. However, all the styling inside the jBar is controlled via a CSS document now, not injected into style tags - so it’s achievable with some CSS changes.
What do the options mean?
- message: the jBar call-to-action message
- button: the button message
- url : where you’d like the button link to fire
- state: choose the initial state of the jBar, open or closed are the two parameters
Now you know the ins and outs of the new plugin configuration, you can easily add it to your page like so:
Redeveloped + Data API
Now we’ll take a look at the script:
The plugin is wrapped in a protective wrapper, passing jQuery into it, but what I want to talk about specifically is the bond between jQuery, the plugin and our JSON.
First, I’ve setup a small handler to grab the element and pass the data back to he plugin:
You’ll notice at the end we have this.jsonConfig which uses the .data() API from jQuery (conveniently parsing our JSON for us - jQuery will recognise JSON inside data-* attributes and return it).
To get the message that you’d specify in the HTML, we’d now simply do this:
A little bonus, you can see at the end I’ve added return this. This is very similar to how jQuery works when chaining functions and methods. So I can do this:
The Data API included in the plugin is where I think things will/need to progress in plugin and script development, I’m not running the jBar plugin script on document ready (DOM ready), but inside the plugin itself, I am initialising it with a DOM ready handler, which runs a check to see if our data-init=”jbar” attribute exists, and if so, I grab it and run the jBar on it. It’s as simple as that, self-initiation.
New technology advances, transitions and data URIs
The up and down jBar arrow images are also no longer images, they’re data URIs, which means IE7 will not be able to render them. According to browser stats IE7 is pretty much non-existant. This also means that you don’t need to upload any images to your directories to get it working, just the CSS which you’re free to toy and destroy.
Valid plugin configuration
But I want to use Version 1.0.0
Suit yourself, grab it here.