Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Essential JavaScript: 8 Cross-Browser Solutions-7 : Page 7

There's a core set of problems that every JavaScript developer will run across sooner or later. This article shows you how to deal with eight of the most common situations.


advertisement

Making a JumpList Combo Box
Problem 6: How do I create a drop down box with hyperlinks attached to each member of the list box so that clicking an item causes the browser to navigate to the associated link?

There are a number of ways to create a JumpList box, ranging from using arrays to managing the links directly in the drop down box. Here are the extremes:

   Using Arrays and Object Oriented Programming:
   <html>
   <head>
   <title>JumpList</title>
   <script language="JavaScript">
   function jumpArray(){
      var args = jumpArray.arguments;
      for(var i=0; i<args.length; i++)
         this[i] = args[i];
      this.length = args.length;
   }
   
   var labels = new jumpArray('Select a Search Engine',
      'Yahoo','AltaVista','Hotbot','Lycos','Google');
   
   var urls = new jumpArray ('','http://www.yahoo.com',
      'http://www.av.com','http://www.hotbot.com',
      'http://www.lycos.com','http://www.google.com');
   
   function goSearch(form){
   i = form.JumpList.selectedIndex;
   if(i!=0)
      window.location.href = urls[i];
   }
   </script>
   </head>
   <body>
   <!-- The select control will appear 
      wherever you place the following script. 
   -->
   <script language="JavaScript">
   document.write('<form><select name="JumpList" 
      onChange="goSearch(this.form)">');
   for(var i=0;i<labels.length; i++)
      document.write('<option>' + labels[i]);
   document.write('</select></form>');
   </script>
   </body>
   </html>

The preceding code uses a jumpArray constructor, (for more on objects and constructors, see Creating Classy Menus with JavaScript to instantiate two JumpArrays--one for the labels and one for the urls. It also includes a goSearch function (since all of the urls point to search engines) called in the <select> element's onChange event. Then, as the page loads, a script in the <body> tag writes the JumpList box to the document. The result is a drop down box that navigates to the appropriate location when the user makes a choice.

Here's another version that manages the URLs and Labels in the <select> element:



   <html>
   <head>
   <title>JumpList 2</title>
   </head>
   <body>
   
    <form name="form1">
     <select size="1" name="jumpList" 
          onChange="window.location.href=this[selectedIndex].value">
       <option>Choose a Search Engine</option>
       <option value="http://www.yahoo.com">Yahoo</option>
       <option value="http://www.av.com">AltaVista</option>
       <option value="http://www.google.com">Google</option>
     </select>
   </form>
   </body>
   </html>

This one looks substantially easier, because the only JavaScript is located in the onChange event for the <select> element. So why would you use the object oriented approach? Multiply the total number of JumpLists you'll do times the number of <option> elements in each as opposed to the two lines of JavaScript for each object oriented list to determine your needs. Obviously, the OOP approach is much easier to reuse than the in-line approach.

A slightly more advanced version (left up to you to implement) is to rewrite the object oriented JumpList code so it uses a single array rather than separate arrays for text and URLs (Hint—each item in the array can be assigned any necessary properties).



Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap
Thanks for your registration, follow us on our social networks to keep up-to-date