On 28/02/2007, at 12:29 AM, Klaus Hartl wrote:
> Joel Birch schrieb:
>> 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.
>
> I think its useful! Here's some work for you ;-)
>
> * Instead of doing two appends you could do:
>
> $('<div class="'+o.divClass+'"></div>').append([o.head,
> $list]).insertBefore(this.eq(0));
>
> * Instead of using this.innerHtml you should use $(this).text() to
> avoid
> nested links for example. Imagine article headlines that are links as
> well but should also serve as content navigation hook.
>
> Another useful option would be to specify where to append the created
> navigation. I could imagine appending it to the body and apply a fixed
> positioning, so that it is always in the viewport...
>
> And how cool would it be if the headline is computed from the elements
> that are used to create the navigation? E.g. if the navigation is
> build
> from <h3> elements the created headline would become a <h2> or at
> least
> a <h3> as well... Just an idea, doesn't make sense for all cases
> maybe.
>
>
> -- Klaus
>
Thanks for the great feedback Klaus! I didn't realise you could
append an array of elements. Also, great point about using $
(this).text() to avoid nested links. There's two new things you've
taught me.
I did consider the option of specifying where to append the
navigation - I'll definitely do that now. With the computed headline
idea - it would indeed be cool, but I think I'll keep it more
flexible for now and see if my usage of the plugin warrants it.
Currently, the head can be any amount of HTML not just one heading,
which I may find useful for intro paragraphs etc.
Thanks for the encouragement :)
Joel.
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
