Hi jQuerivites,
I'd like to offer up my humble plugin (humble is the key word here)
to get a sense of if something this basic is of any worth to the
community. I discussed an earlier version of the plugin briefly on a
previous thread (Sites Powered by jQuery) and there is an
implementation of it on my Preshil site (I don't want to post a link
here as I don't want to seem like I'm spamming it around) which is in
the Sites Using jQuery list at jquery.com
To summarise, it takes your jQuery object and creates an unordered
list of links to the elements within the object. If the elements do
not have an id (needed to provide the links with a href target), a
unique id is created for it, otherwise it uses the existing id. Get
something, do something. ;)
An options object can be passed as the only parameter. The options are:
- "head" : this is a string of html to appear above the list of
links, can be used as a heading for the list, for example.
- "divClass" : this is a space separated string of classes to be
applied on the div that wraps the entire list and head.
- "aClass" : this is a space separated string of classes to be
applied to each of the links created.
These options have defaults of course - you can see what they are in
the code. The whole thing can be styled with CSS as you see fit
(hence the extra class hooks in the options object) and enhanced
further with JavaScript. I attached scrolling to the links using the
aClass as a hook, for example.
I think the (possibly only one) redeeming feature of this plugin over
the far better and more elaborate navigation aids is that it is so
simple (at least how I have it styled on the Preshil site) that
anyone can understand the menu's purpose regardless of how tech-savy
they are. It's also very lightweight and, as far as CSS styling goes,
you only really need a background or border on the main div.
The code:
(function($){
$.fn.contentMenu = function(o){
o = $.extend({ "head" : "<h3>Some handy links to help you navigate
this page:</h3>",
"divClass" : "contentMenu",
"aClass" : "inPage" }, o || {});
$.cmCount = $.cmCount+1 || 0;
var $list = $("<ul>");
$('<div class="'+o.divClass+'"></div>').append(o.head).append
($list).insertBefore(this.eq(0));
return this.each(function(i){
this.id = this.id || "menu"+$.cmCount+"-el"+i;
$list.append('<li><a href="#'+this.id+'"
class="'+o.aClass+'">Skip
to <em>'+this.innerHTML+'</em></a></li>');
});
};
)(jQuery);
Example of calling the plugin:
$("#main h2").contentMenu({
"head" : "<h3>Page navigation:</h3>",
"aClass":"scrolls",
"divClass":"alert"});
or just using the defaults:
$("#main h2").contentMenu();
I understand this is basic stuff but it's my first plugin and I'd
love to hear any feedback even if it's "this plugin is not really
interesting/useful/well made enough". I guess my question is: whilst
many people could create something like this easily and quickly
enough, should there be plugins that cover such light tasks anyway?
Thanks and sorry for the long post.
Joel Birch.
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
