Toggle Multi select Widget : Toggle : GUI Components JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » GUI Components » Toggle »

 

Toggle Multi select Widget



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>Multi-select Widget</title>
  

<script language="JavaScript" type="text/javascript">
<!--

/* ***** BEGIN LICENSE BLOCK *****
 * Version: MPL 1.1/GPL 2.0/LGPL 2.1
 *
 * The contents of this file are subject to the Mozilla Public License Version
 * 1.1 (the "License"); you may not use this file except in compliance with
 * the License. You may obtain a copy of the License at
 * http://www.mozilla.org/MPL/
 *
 * Software distributed under the License is distributed on an "AS IS" basis,
 * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
 * for the specific language governing rights and limitations under the
 * License.
 *
 *
 * The initial developer of the code is Andy Edmonds.
 * Portions created by the Initial Developer are Copyright (C) 2001
 * the Initial Developer. All Rights Reserved.
 *
 * Contributor(s):
 *  Andy Edmonds <andy@uzilla.net>
 *
 * Alternatively, the contents of this file may be used under the terms of
 * either the GNU General Public License Version 2 or later (the "GPL"), or
 * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
 * in which case the provisions of the GPL or the LGPL are applicable instead
 * of those above. If you wish to allow use of your version of this file only
 * under the terms of either the GPL or the LGPL, and not to allow others to
 * use your version of this file under the terms of the MPL, indicate your
 * decision by deleting the provisions above and replace them with the notice
 * and other provisions required by the GPL or the LGPL. If you do not delete
 * the provisions above, a recipient may use your version of this file under
 * the terms of any one of the MPL, the GPL or the LGPL.
 *
 * ***** END LICENSE BLOCK ***** */
 
// CUSTOMIZABLE VALUES
var multis = "methods,datasources,lifecycle"
var isEdit = false// Using numeric count for number of specified values
var inSequence = true// Set to false to disable auto-sequential expansion
var autoCollapse = true// Only allow one container to be expanded at a time

// TRACKING VARIABLES -- do not change
var arMultis = multis.split(",")
var curOpen = false;
var sequenceNum = 0//Tracker for auto-sequential expansion
var isOpen = -1// Currently open element for auto-collapse
//,activity,agent,condition";

function initMultiSelect() {
  var isEdit = false;
  var i, viewSummary, viewOptions;

  for(i=0;i<arMultis.length;i++) {
    viewSummary = document.getElementById("summary_" + arMultis[i]);
    viewOptions = document.getElementById("options_" + arMultis[i]);
    // In edit default to all collapsed
    // In new mode, default to editing first element
    // If any checkbox is selected, dont reset edit flag
    if(!isEdit) {
      isEdit = populateSummary(viewSummary, viewOptions);
    else {
      populateSummary(viewSummary, viewOptions);
    }
    if(isEditinSequence = false;
    showSummary(viewSummary, viewOptions);
  }
  // If it's an edit
  if(!isEdit && inSequence) {
    var firstField = arMultis[0];
    // Show first option panel
    showOptions(
      document.getElementById("summary_" + firstField),
      document.getElementById("options_" + firstField)
    )
  }
}

function populateSummary(sum,opt) {
  var editString = "<input type='button' value='Edit Selections' onclick='showOptions(this.parentNode,this.parentNode.previousSibling);'>";
  var curNode;
  var numChecked = 0;
  var sumStr = '';
  // Get all checkboxes inside current div 
  var inputs = opt.getElementsByTagName("input");
  //alert(inputs.length + " inputs in " + opt.id);
  for(var i=0;i<inputs.length;i++) {
    curNode = inputs.item(i);
    //alert(i);
    if(curNode.nodeName == "INPUT" && curNode.getAttribute("type"== "checkbox") {
      if(curNode.checked) {
        if(numChecked > 0sumStr += "; ";
        numChecked++;
        sumStr += curNode.getAttribute("value"''; 
        
        //alert("At " + i +   " of " + curNode.getAttribute("value"));
      }
    }
  }
  // Options selected? summarize. Otherwise? instruct.
  if(sumStr.length) {
    sum.innerHTML = sumStr + ".<br/>" + editString;
  else {
    // No current selectiongs, provide help msg
    sum.innerHTML = "Please click Edit Selections to specify" ".<br/>" + editString;
  }
  // Pass back positive if items are already checked
  return numChecked;
}

function showSummary(sum, opt) {
  sum.style.display = 'inline';
  opt.style.display = 'none';
  isOpen = -1;
  
}

function showOptions(sum, opt) {
  sum.style.display = 'none';
  opt.style.display = 'inline';
  if(isOpen > -&& autoCollapse) {
      showSummary(
      document.getElementById("summary_" + arMultis[isOpen]),
      document.getElementById("options_" + arMultis[isOpen])
    )
  }
  isOpen = getOffset(sum.getAttribute("id"));
}

function getOffset(label) {
  for(var i=0;i<arMultis.length;i++) {
    if(label.indexOf(arMultis[i]) > -1return i;
  }
  
}

function saveOptions(optNode) {
  var sumNode = document.getElementById("summary_" +optNode.getAttribute("id").split("_")[1]);  
  populateSummary(sumNode,optNode);  
  showSummary(sumNode,optNode);
  if(inSequence) {
    // check to see if the user is editing sequentialy
    if(optNode.id.indexOf(arMultis[sequenceNum]) > -1) {
      // They're editing in sequence
      sequenceNum++;
      // Is there a next element to show?
      if(sequenceNum < arMultis.length) {
        var nextField = arMultis[sequenceNum];
        showOptions(
          document.getElementById("summary_" + nextField),
          document.getElementById("options_" + nextField)
        )
      }
    else {
      inSequence = false;
    }
  }
  
}
//-->
</script></head>


<body onload="initMultiSelect()">



<table cellpadding="8" cellspacing="0" width="942">
  <tbody><tr>
    <td valign="top" width="12%">Usability Methods</td>
    <td bgcolor="#ffffff" width="88%">       
    
<div style="display: inline;" id="options_methods"><table><tbody><tr><td valign="top">
<input name="methods" value="Card Sorting" id="cardsort" type="checkbox"><label for="carsort">Card Sorting</label><br>
<input name="methods" value="Contextual Task Analysis" id="cta" type="checkbox"><label for="cta">Contextual Task Analysis</label> <br>
<input name="methods" value="Ethnography" id="ethno" type="checkbox"><label for="ethno">Ethnography</label><br>


</td><td valign="top">
<input name="methods" value="Heuristic Review" id="heur" type="checkbox"><label for="heur">Heuristic Review</label><br>
<input name="methods" value="Remote Usability Testing" id="remote" type="checkbox"><label for="remote">Remote Usability Testing</label><br>
<input name="methods" value="Usability Testing" id="ut" type="checkbox"><label for="ut">Usability Testing</label><br>
</td></tr></tbody></table>
<input value="Close" style="float: left;" onclick="saveOptions(this.parentNode);" type="button"></div><div style="display: none;" id="summary_methods">Please click Edit Selections to specify.<br><input value="Edit Selections" onclick="showOptions(this.parentNode,this.parentNode.previousSibling);" type="button"></div>
</td>
  </tr>
  <tr bgcolor="#dddddd">
  <td id="label_activity" valign="top">Datasources</td>
  <td valign="top">
    <div style="display: none;" id="options_datasources">
  <table><tbody><tr><td valign="top">
<input name="methods" value="Competitive Review" ic="comp" type="checkbox"><label for="comp">Competitive Review</label><br>
<input name="methods" value="Performance Data" id="perf" type="checkbox"><label for="perf">Performance Data</label><br>
<input name="methods" value="Verbal Protocol" label="protocol" type="checkbox"><label for="protocol">Verbal Protocol</label><br>


</td><td valign="top">
<input name="methods" value="User Surveys" id="survey" type="checkbox"><label for="survey">User Surveys</label><br>
<input name="methods" value="Support Requests" id="support" type="checkbox"><label for="support">Support Requests</label><br>
<input name="methods" value="Usage Data" id="usage" type="checkbox"><label for="usage">Usage Data</label><br>
</td></tr></tbody></table>
        <input value="Close" style="float: left;" onclick="saveOptions(this.parentNode);" type="button"></div><div style="display: inline;" id="summary_datasources">Please click Edit Selections to specify.<br><input value="Edit Selections" onclick="showOptions(this.parentNode,this.parentNode.previousSibling);" type="button"></div>
        </td>
        </tr><tr><td valign="top">Lifecycle </td>
        <td valign="top">
          <div style="display: none;" id="options_lifecycle">
          <table><tbody><tr><td valign="top">
<input name="methods" value="Acceptance Testing" id="at" type="checkbox"><label for="at">Acceptance Testing</label><br>
<input name="methods" value="Iterative Design" id="iterative" type="checkbox"><label for="iterative">Iterative Design</label><br>
<input name="methods" value="Needs Analysis" id="needs" type="checkbox"><label for="needs">Needs Analysis</label><br>


</td><td valign="top">

<input name="methods" value="Rapid Prototyping" id="proto" type="checkbox"><label for="proto">Rapid prototyping</label><br>
<input name="methods" value="Requirements Definition" id="reqs" type="checkbox"><label for="reqs">Requirements Definition</label><br>
<input name="methods" value="Specification" id="spec" type="checkbox"><label for="spec">Specification</label><br>

</td></tr></tbody></table>

<input value="Close" style="float: left;" onclick="saveOptions(this.parentNode);" type="button"></div><div style="display: inline;" id="summary_lifecycle">Please click Edit Selections to specify.<br><input value="Edit Selections" onclick="showOptions(this.parentNode,this.parentNode.previousSibling);" type="button"></div>
        </td>
      </tr>

  
        </tbody></table>




</body></html>


           
       



-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo GUI Components
» Toggle