jQuery plugins setting default values using extend

Working on my first jQuery plugin I needed a way for anyone calling the plugin to set some options. I am sure you have seen this in other plugins you have used before. With those options the user can provide you also need to account for no options being set. We can get around this by setting some defaults for configuration options. A user provided options to our plugin $(function(){ $("#menu").BigAssMenu({foo:"foo",bar:"foo"}); }); No options provided. $(function(){ $("#menu").BigAssMenu(); });

In our plugin we will allow the user to pass in the options. (function($){ $.fn.extend({ BigAssMenu: function(options){ } }); })(jQuery); Next we need to setup some defaults in case no options are passed to our plugin. (function($){ $.fn.extend({ BigAssMenu: function(options){ var defaults = { foo:"foo", bar:"bar" } } }); })(jQuery); Finally we need account for the case where some options are provided but not all of them are. We can do this using the extend function of jQuery. Here we are supplying 2 arguments our options object and our defaults object. This will merge the 2 objects by modifying the first. This way if 0 arguments are passed it will use the defaults but any argument passed in will override our default. (function($){ $.fn.extend({ BigAssMenu: function(options){ var defaults = { foo:"foo", bar:"bar" } var options = $.extend(defaults,options); } }); })(jQuery);

This is a great way to provide a configurable plugin. Please feel free to provide feedback, still a newbie when it comes to jQuery!

BigAssMenu jQuery plugin selector context tip

So after my first stab at my first jQuery plugin I found a pretty big bug right away. First we should take a look at the core of the problem and how this works. When your using jQuery to select something from the DOM you can pass in an optional argument. This argument is the context in which you want to search. This will give us some obvious performance benefits because we don't have to drill down the entire node, we can just search the node we are in. return this.each(function(){ // the object we are working with var obj = $(this); // get a list of menu items var menuItems = $('li',obj); });

I did not think about it at first but the code as constructed is going to cause some problems. With this markup it will work fine. <div id="menu"> <ul> <li><a id="home" href="basic.html">Home</a></li> <li> <a id="about" href="#">About</a> <div> About Sub Menu </div> </li> <li> <a id="products" href="#">Products</a> <div> Products Sub Menu </div> </li> <li><a id="service" href="#">Service</a></li> <li><a id="support" href="#">Support</a></li> <li><a id="contact" href="#">Contact Us</a></li> </ul> </div> But what happens if there are any other list elemnents in the sub menus? This of course is going to come up so we have a problem on our hands. <div id="menu"> <ul> <li><a id="home" href="#">Home</a></li> <li> <a id="about" href="#">About</a> <div> about sub menu </div> </li> <li> <a id="products" href="#">Products</a> <div> <h2>Books</h2> <ul> <li>ColdFusion</li> <li>jQuery</li> <li>CSS</li> <li>HTML</li> <li>Groovy</li> <li>Hibernate</li> </ul> </div> </li> <li> <a id="service" href="#">Service</a> <div> service </div> </li> <li><a id="support" href="#">Support</a></li> <li><a id="contact" href="#">Contact Us</a></li> </ul> </div>

With that problem I started looking for a solution. Because I didn't really know how to accomplish this i was trying all kinds of selectors and traversing methods all of which came up short. Finally someone on the jQuery forums was able to help me out. We want only direct decedents of the object we are working with. I knew about this but what I did not know was that you could start off with it. Because we are starting off with the context of the object we are working with we can say only direct list items of the obj,ul. var menuItems = $('> ul > li',obj);

My first jQuery plugin: Big Ass Menu

I am not going to get into a tutorial on how to write a jQuery plugin. There are tons of tutorials out there so I will leave that explanation to the pros. Instead I will walk you through the process of building my plugin. This is the first take so please be nice! I will also come back in future posts and correct some of the mistakes made here. The first thing we need is the core code for our plugin. (function($){ $.fn.extend({ BigAssMenu: function(options){ return this.each(function(){ //core plugin code goes here }); } }); })(jQuery); With the code above we can call our new plugin using the following code. $(function(){ $("#menu").BigAssMenu(); });

Before we get into any more code I think its time to look at our markup. It is important to note that a plugin like this really needs 3 things to make it work well. We need to have the markup for the component (HTML), the look and feel (css) and the glue to put it all together (JavaScript). With that this is the markup we are going to work with. Our sub menus will be divs right under our main menu items. <div id="menu"> <ul> <li><a id="home" href="basic.html">Home</a></li> <li> <a id="about" href="#">About</a> <div> About Sub Menu </div> </li> <li> <a id="products" href="#">Products</a> <div> Products Sub Menu </div> </li> <li><a id="service" href="#">Service</a></li> <li><a id="support" href="#">Support</a></li> <li><a id="contact" href="#">Contact Us</a></li> </ul> </div>

Now that we have the core of plugin ready we need to start writing some code. First we are going to create a reference to the jquery object. Using that reference we can use that as the basis of our selector. This will indeed improve performance because we don't need to go searching the entire DOM now. In our example from above we are now strictly working with the menu node. (function($){ $.fn.extend({ BigAssMenu: function(options){ return this.each(function(){ // the object we are working with var obj = $(this); // get a list of menu items var menuItems = $('li',obj); }); } }); })(jQuery); With the code above we now have an array of menu items (menuItems) to work with. What we want to do is iterate over each of those items and do some work. Here we are going to find the id of the main menu item so we have an object to create a sub menu for. When we have that main navigation item we can look to the next node in the dom which should be our "div". // loop over every menu item menuItems.each(function(index,value){ // the id of the top level menu item var menuid = $(this).find("a")[0].id; var submenu = $("#" + menuid).next(); });

Next we are going to hide all of the sub menus and add a class to them called submenu. Later on we will make these configurable options but lets just run with this for now. With our id we can now listen for a hover event. When the user hovers over the menu item we want to fade in the sub menu and change the class of the menu item so the user knows they are "activating" a menu. When we roll off the menu item we are going to do just the opposite. var hide = false; var subMenuClass = "submenu"; var activeClass = "active"; // hide all sub menus $(submenu).hide(); // add a sub menu class to all sub menus $(submenu).addClass(submenuClass); // when you hover over the main menu item $("#" + menuid).hover(function(){ // fade in the sub menu $(submenu).fadeIn(fadeInDelay); // change the class of the menu item to create that on affect $(this).addClass(activeClass); },function(){ // when you move off the menu hide the sub menu hide = setTimeout(function(){ $(submenu).fadeOut(fadeOutDelay); }); // remove the active class from the menu item $("#" + menuid).removeClass(activeClass); }); This works except when we roll of the main navigation item the sub menu disappears. We can fix that by adding a hover event for the sub menu as well. When the user rolls of the main navigation item they will move onto our sub menu. // make sure the sub menu does not dissapear after you move off the main navigation item $(submenu).hover(function(){ if(hide){ clearTimeout(hide); $(submenu).fadeIn(fadeInDelay); $("#" + menuid).addClass(activeClass); } },function(){ // if you move your mouse out of the sub menu div, the div fades out and removes the active class hide = setTimeout(function() { $(submenu).fadeOut(fadeOutDelay); }); $("#" + menuid).removeClass(activeClass); });

So that is my first attempt at a plugin. Like I said before, there are probably better ones out there but this is a great learning experience for me so I am running with it. I will make this code available after the next couple of posts. I also want to get some credit where it is due. The reason I was able to write this plugin is because of the jDiv Skyrocket labs plugin. This is the code that flipped on the light switch for me so thanks to them for the great resource.

The Mega Drop Down Menu

I don't think this is the official name for it but you may get the idea from the name. Here are work we needed the ability to create a ton of content in drop down menus. As an example here is a quick wire frame that I threw together.

When you hover over a menu item the mega drop down will appear. The important thing to pay attention to here is that the content in the drop down menu should have the ability to contain any markup. There is a great article on site point about these menu's and how they are really starting to crop up everywhere.

I took a couple screen captures of some mega menus that I really like.

GoDaddy

Food Network

There are plenty more examples around the web but these are 2 that I like. Now that I have an idea of what I need to build I needed to figure out how to do it. To accomplish this you are going to need a combination of html/css/js. I did a quick search for a jQuery plugin and found instructions on how I could accomplish this. I decided that I really wanted to understand how the internals worked on this so it was time to create my first jQuery plugin. There are probably plugins out there that do what I am looking for but I needed to really understand how this works in case I need to make modifications in the future.

With that my first jQuery plugin (BigAssMenu) was born. Look for some more information about this plugin in the near future. I want to write about this plugin step by step so people can really follow along with me. Also, don't get to hyped up, it works but I need to come up with some really good examples to show of this plugin. Maybe I will try and recreate the menus above!

ColdFusion ORM + jQuery Sortable example

Tonight I decided to throw together a cool example that uses jQuery sortable and ColdFusion 9 ORM. I like to provide an easy way to sort shorter lists. Obviously if you have a list with a lot of elements you won't do this but for shorter lists it works out great. In this example I have a small CMS where pages have a sort order. I want the user to be able use a UI and change the sort order.

First off we need to enable ORM and set our data source. If you want to follow along at home just setup a data source named sortabledemo. component { this.name = "sortables-demo"; this.ormEnabled = true; this.ormsettings = { datasource="sortabledemo", dbcreate="update" }; public void function onApplicationStart(){ application.pageservice = new model.PageService(); } public boolean function onRequestStart(String target){ if(structKeyExists(url,"reload")){ onApplicationStart(); } return true; } }

[More]

Comments (6)

Print

Send

del.icio.us

Digg It!

Download |

1671 Views

Quick & Easy image rollovers using jQuery

I have a navigation bar that I am working with that is made up of images. When you roll over these images we are doing a quick swap for the over image. The reason I am rewriting it is because it was boiler plate Dreamweaver code that uses the 10 year swap image functions and I wanted to do it by hand. Sure the old code works fine but to me its just not very clean and not easy for anyone to understand.

I am fully aware that I could of done a quick search and found a way better solution than this but nobody ever learned anything from cheating so I thought I would give it a try. I built out a fairly standard navigation that looks like this. <ul id="navigation"> <li><a href="#"><img src="images/home.png" border="0"/></a></li> <li><a href="#"><img src="images/about.jpg" border="0"/></a></li> <li><a href="#"><img src="images/products.jpg" border="0"/></a></li> <li><a href="#"><img src="images/services.jpg" border="0"/></a></li> <li><a href="#"><img src="images/contact.jpg" border="0"/></a></li> </ul> Now that I have my navigation in place I need to react to the user mousing over the image. All of my images are in a directory called images and to keep it simple I have some easy naming conventions. For each navigation image I have one with _over suffix attached to it. For example, I have a home.png button and a home_over.png for the mouse over state.

It's magic time and I can't believe how easy this was. First we need to include our jquery library and to do that I am using Google's CDN so you can follow along at home. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> Next we need to loop over ever navigation item we have. To do that we use the following selector to get an array of items back and use the each method to loop over each. $("#navigation li").each(function(){}); Finally for each loop we are going to get the link, the image and the image source. For each link we can add mouse over and mouse out events. In the mouse over method we are doing a simple replace. We are going to replace .jpg with _over.jpg and since the first part of the image name is the same this is all we have to do to swap images. Finally our mouse out just returns the image src to its original state. var link = $(this).children("a"); var image = $(link).children("img"); var imgsrc = $(image).attr("src"); // add mouseover $(link).mouseover(function(){ var on = imgsrc.replace(/.jpg$/gi,"_over.jpg"); $(image).attr("src",on); }); // add mouse out $(link).mouseout(function(){ $(image).attr("src",imgsrc); });

As I said there is not much to it but its quite easy and works just fine for what I need it for. If you got some ways to improve this please feel free to chime in. As I said I am no expert and probably could of found something better but nobody ever learns that way. Now maybe I can take this and build a plugin because I have been meaning to write 1. Here is the complete code. <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#navigation li").each(function(){ var link = $(this).children("a"); var image = $(link).children("img"); var imgsrc = $(image).attr("src"); // add mouseover $(link).mouseover(function(){ var on = imgsrc.replace(/.jpg$/gi,"_over.jpg"); $(image).attr("src",on); }); // add mouse out $(link).mouseout(function(){ $(image).attr("src",imgsrc); }); }); }); </script> <style> #navigation {display:block;margin:0px;padding:0px;} #navigation li {margin:0px;padding:0px;list-style-type:none;display:inline;} </style> </head> <body> <ul id="navigation"> <li><a href="#"><img src="images/home.png" border="0"/></a></li> <li><a href="#"><img src="images/about.jpg" border="0"/></a></li> <li><a href="#"><img src="images/products.jpg" border="0"/></a></li> <li><a href="#"><img src="images/services.jpg" border="0"/></a></li> <li><a href="#"><img src="images/contact.jpg" border="0"/></a></li> </ul> </body> </html>

jQuery adds a touch of eazy to admin screen

I really was not sure what to title this post so that's what I came up with. I have a friend who I do work for that has a pretty simple admin screen where he can update properties of an e commerce application I built for him. Recently he asked for an option to change the status of an order. This is fairly common in this type of application but what we did not want to do is present an order list, click on an order to view the details, update the order and then return back to the order screen. We decided it would be best if he could easily change the status right from the orders listing. This article will walk you through a couple things I found while creating this feature, hopefully it helps someone.

First let's look at our new admin screen. Here we have a list of orders and instead of displaying a status we are going to display the status as a pick list with the current status selected, nothing big going on here.

<select id="status-#orderId#" class="_status"> <option value="P" <cfif status EQ "P">selected</cfif>>Processed</option> <option value="D" <cfif status EQ "D">selected</cfif>>Declined</option> <option value="S" <cfif status EQ "S">selected</cfif>>Shipped</option> <option value="C" <cfif status EQ "C">selected</cfif>>Cancelled</option> </select> The thing to pay attention to here is what I am doing with the id of the select box. All status drop downs will have a class of status but the id will be unique for each one. During the output loop we will insert the order id so our status will be status-orderid. This will allow us to know what order is being changed.

[More]

jQuery Tools

Google Ajax Libraries

I first learned about the Google Ajax Libraries about a month ago when I was reading through one of Hal Helms jQuery blog posts.

The AJAX Libraries API is a content distribution network and loading architecture for the most popular, open source JavaScript libraries. By using the Google AJAX API Loader's google.load() method, your application has high speed, globaly available access to a growing list of the most popular, open source JavaScript libraries including:

• jQuery
• jQuery UI
• Prototype
• script.aculo.us
• MooTools
• Dojo
• SWFObject
• Yahoo! User Interface Library (YUI)

What does this mean to you? Let's say your working on a project and you need the latest copy of jQuery or the jQuery UI. You could go out and download the latest versions of each and install them on your server or you could use use the Google Ajax Libraries. The other advantage is they are minified and gziped so the size is pretty small along with the fact that it may already be cached in you end users browser. Here is an easy way to include both in your application. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>

I would love to hear others thoughts on this but here go mine. I don't like the idea of relying on this for production. Something about the thought of not having this on my server for production just gives me an uneasy feeling. I think for creating tutorials / demo's or even using this in development is a great idea and I am loving it. What do you guys think?

A lot of hard work has finally paid off

When 2009 started most people were working on setting those all important personal goals for the year. Let's face it, for most of us If your still following 1 a congratulations is in order. Here at STERIS we were starting the planning phase of what would become the new www.steris.com. If you don't know I was lucky enough to have joined this team back in October of 2008. I happy to announce that over the weekend we were able to launch the new corporate site. There is still plenty of work to do but I would like to walk you through a quick overview of the new compared to the old and give a quick run down of the new features. In the future I will post some more code specific features.

Here are a couple screen shots from the old site with it's counter part from the new site. The first is the home page and the second is the news page which is also an example of an inside page with sub navigation. 

[More]