Change Page Combo

This sample creates a combo box with a list of pages (the sel.append() lines).  When you select from the combo, you are switched to that page.   Truthfully, the same template could be used to do a wide variety of things by changing the script in the sel.change() event.  This script goes in the Load event of the Custom Control:

$(this).empty();
var sel = $("<select>");
sel.append($("<option value = 'tester'>My test page</option>"));
sel.append($("<option value = 'calibration'>Calibration Page</option>"));
sel.append($("<option value = 'OtherPage'>My Other page</option>"));
sel.change(function() {
   var newPage = $(this).find("option:selected");
   if (newPage.length > 0) {
      page.setCurrentPage(newPage.attr("value"));
   }
});
$(this).append(sel);

This is all done with jQuery.  To explain:

$(this).empty();
 

clears the contents of the control.  Always a good thing to do as the control will have default content so it is visible before you add script.

var sel = $("<select>");

creates our combo box.  HTML uses the <select> element for combo boxes.  We store the combo in a variable so we can work with it.  We haven't put it on the page yet.

sel.append(...)

These lines add the various options that will appear in the combo.  In HTML this is done by adding <option> tags inside a <select> element.  The value = 'xxx' part is the name of the page we switch to when selected.  The part between <option> and </option> is what is displayed in the combo.  Change these two values and replicate as many sel.append() lines as you need options.

sel.change(...)
 

This creates an event that gets called whenever something is selected in the combo.  Inside is what is called an anonymous function containing that event script.  In that script:

var newPage = $(this).find("option:selected");

 
gets the element that is currently selected and puts it in the newPage variable.

if (newPage.length > 0)
 

makes sure that something is actually selected.

page.setCurrentPage(newPage.attr("value"));
 

sets the current page based on the contents of the "value" attribute of the selected option.

Finally, we add the select combo box to our control:

$(this).append(sel);