So the basic idea is that you can create a table of contents based on a series of links selected by a jQuery selector?
Could be useful... -- Yehuda On 2/27/07, Joel Birch <[EMAIL PROTECTED]> wrote:
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/
-- Yehuda Katz Web Developer | Wycats Designs (ph) 718.877.1325
_______________________________________________ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/