SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to build menus

    I have been using some fairly old menu code from http://inspire.server101.com/js/xc/ and I've been reasonably happy with it but it assumes frames and requires menu items to have HTML like:

    <li><a href='x.html' target='main' title='title'>A menu item</a></li>

    as I try to adapt that to a frame-less, div-oriented, CSS-driven design, I find myself with HTML like:

    <li><a href='javascript:load(x,main)'>A menu item</a></li>

    I'm a bit uncomfortable with the 'javascript:' protocol but I also find that as I try to write functions to build menu items I have things like:

    a.href='javascript:'+action;

    and action can't be as flexible as I want. What I'd really like is an onclick handler but anchors don't seem to have those.

    If I can't fake an onclick handler for anchors, I guess I'm going to have to move away from the xc menu driver I've been using. Any advice...?

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why not just ditch the <a> tag altogether:

    <li onclick="load(x,main);">A menu item</li>

    If you can't, well the <a> tag DOES support onclick:
    <a href="javascriptdisabled.html" onclick="dosomething();return false;">link</a>

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jimfraser View Post
    Why not just ditch the <a> tag altogether:

    <li onclick="load(x,main);">A menu item</li>
    Because the xc menu driver I've been using requires it.

    If you can't, well the <a> tag DOES support onclick:
    <a href="javascriptdisabled.html" onclick="dosomething();return false;">link</a>
    Yes, but the DOM element doesn't seem to. I haven't been able to:

    a = document.createElement('a');
    a.onclick='dosomething';

  4. #4
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah well that's because the .onclick property of a dom element accepts a function reference, not a string:
    Code:
    a.onclick = dosomething;
    
    or
    
    a.onclick = function () {
      dosomething();
      dosomethingelse();
    }

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    a.onclick = dosomething;
    
    or
    
    a.onclick = function () {
      dosomething();
      dosomethingelse();
    }
    OK. I've got a function that makes menu items:

    Code:
    function makeItem(label, action, title) {
      var l = document.createElement('li');
      var a = document.createElement('a');
      a.title = title;
      a.href=document.URL; // FIXME - something better?
      a.onclick=action;
      a.innerHTML = label;
      l.appendChild(a);
      return l;
    }
    which assumes that action is a function. So I'm calling it like this:

    Code:
      function makeAction(file) {
         return new Function("loadContent('contents',\'"+file+"\');return false;");
      }
    
      var m = makeMenu('x', 'no title');
      for (var i = 0; i < items.length; ++i) {
        addItem(m,makeItem(items[i].label, 
                           makeAction(items[i].file), 
                           items[i].title));
      }
    Which works but I'm new enough to JavaScript to have no confidence that my use of "new Function()" is reasonable. Is it?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •