Windows XP Explorer menus (only info)

 

 

http://www.dynarch.com/products/navbar/

As you could have figured out already, Dynarch NavBar is very close to the all-so-known Windows XP Explorer menus. The missing part was a CSS file that defines a similar look. Well, there you have it!

In order to make your NavBar look like WinXP menus, just load the /navbar/themes/winxp/skin.css skin, and set _NavBar_icons_url = "/navbar/themes/winxp/". View the source of this page for more details.

You can read more information about CSS files and custom icons in the NavBar documentation.

JavaScript actions

As of version 2.5, NavBar supports custom JavaScript action handlers for menu items in a very straightforward way. Instead of passing an URL, just pass a reference to a JavaScript function which is previously defined. In order to pass a custom argument to that function, put it in place of the “target” attribute. For example:

function showDate(param, item, section) {
    var menu = section.parent;
    // "menu" is a reference to the NavBar object
    // you can use it now i.e. to set preferences:
    // menu.setPref("auto-hide", true);

    // but let's show the date:
    alert(new Date() + "\nPassed argument is: " + param);
}
var menu = new NavBar(...);
new NavSection(menu, "Section label", [
   [ "Show date", showDate, "tooltip", "icon.gif", "custom argument" ]
]);

The above code creates an item that will call our custom function “showDate” when clicked. The function receives 3 arguments. Beware that the first one may be undefined if you don’t pass it. In the code above though we pass it and its value is “custom argument”. The other two arguments are “item” — a referenece to the TR element that holds the item elements, and “section” — a reference to the NavSection object that this item belongs to.

Replacing the radio buttons and checkboxes with custom images

function chgCB(){
  CHKB = document.getElementById('newCB').getElementsByTagName('input');
  for(i=0; i < CHKB.length; i++){
    if(CHKB[i].type == "checkbox"){
      IMG = document.createElement('img');
      CHKB[i].parentNode.insertBefore(IMG, CHKB[i]);
      IMG.src = "radio0.gif";
      if(CHKB[i].checked  == true) IMG.src = "radion.gif";
      if(CHKB[i].disabled == true) IMG.src = "radio.gif";
      else{ // Changing state's behaviours are only applied if the box is clickable
        CHKB[i].onchange = function(){
          IMG = this.parentNode.getElementsByTagName('img')[0];
          if(this.checked == true) IMG.src = 'radion.gif'
          else IMG.src = 'radio0.gif'
        }
        if(!window.sidebar){
          CHKB[i].parentNode.onclick = function(){
            CHK = this.getElementsByTagName('input')[0];
            CHK.checked = (CHK.checked == true) ? false : true;
            CHK.onchange()
          }
        }
      }
      CHKB[i].style.visibility = 'hidden';
      CHKB[i].style.position  = 'absolute';
    }
  }
} function chgRB(){
  CHKB = document.getElementById('newRB').getElementsByTagName('input');
  for(i=0; i < CHKB.length; i++){
    if(CHKB[i].type == "radio"){
      IMG = document.createElement('img');
      CHKB[i].parentNode.insertBefore(IMG, CHKB[i]);
      IMG.src = "radio0.gif";

      IMG.id = 'img'+CHKB[i].id;
      IMG.relation = CHKB[i].name;

      if(CHKB[i].checked  == true) IMG.src = "radion.gif";
      if(CHKB[i].disabled == true) IMG.src = "radio.gif";
      else{ // Changing state's behaviours are only applied if the box is clickable
        CHKB[i].onchange = function(){

          IMG = document.getElementById('newRB').getElementsByTagName('img');
          for(i=0; i < IMG.length; i++){
            if(IMG[i].relation != this.name) continue;
            if(IMG[i].src.indexOf('radio.gif') != -1) continue;
            if(IMG[i].id == 'img'+this.id) IMG[i].src = 'radion.gif';
            else IMG[i].src = 'radio0.gif'
          }

        }
        if(!window.sidebar){
          CHKB[i].parentNode.onclick = function(){
            CHK = this.getElementsByTagName('input')[0];
            CHK.checked = (CHK.checked == true) ? false : true;
            CHK.onchange()
          }
        }
      }
      CHKB[i].style.visibility = 'hidden';
      CHKB[i].style.position  = 'absolute';
    }
  }
}

Hello world!

Welcome to WordPress.com. This is your first post. Edit or delete it and start blogging!