org.symbian.tools.wrttools.doc.WebDeveloper/html/GUID-0EFEA51B-F98B-4C0B-9960-5D6247355ACA.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="copyright" content="(C) Copyright 2009"/><meta name="DC.rights.owner" content="(C) Copyright 2009"/><meta name="DC.Type" content="concept"/><meta name="DC.Title" content="Handling selection lists"/><meta name="abstract" content="Lists are a basic UI component for displaying all kinds of information, actions, and navigation structures. Editing and organizing information in lists can be made easier by using markable lists. Different line layouts offer flexibility in presenting information; lines can contain different sizes of images and text to suit design needs."/><meta name="description" content="Lists are a basic UI component for displaying all kinds of information, actions, and navigation structures. Editing and organizing information in lists can be made easier by using markable lists. Different line layouts offer flexibility in presenting information; lines can contain different sizes of images and text to suit design needs."/><meta name="DC.Relation" scheme="URI" content="GUID-63F9FB97-9A0D-4DE4-A645-F3DB7DC39716"/><meta name="DC.Relation" scheme="URI" content="GUID-1666F263-F1CB-4928-B2A7-E518B43983BA"/><meta name="DC.Relation" scheme="URI" content="GUID-D54DEFE7-E878-4530-B707-A5388DFE1D9D"/><meta name="DC.Relation" scheme="URI" content="GUID-6DD2B3D2-BA3B-4936-BBC9-F61B6757B6F8"/><meta name="DC.Relation" scheme="URI" content="GUID-13E2DE63-47E5-4E2A-85FF-C8B0CAB9D4DE"/><meta name="DC.Format" content="XHTML"/><meta name="DC.Identifier" content="GUID-0EFEA51B-F98B-4C0B-9960-5D6247355ACA"/><meta name="DC.Language" content="en"/><title>Handling selection lists </title><script type="text/javascript">
function initPage() {}
</script><link href="../PRODUCT_PLUGIN/book.css" rel="stylesheet" type="text/css"/><link href="css/s60/style.css" rel="stylesheet" type="text/css" media="all"/></head><body onload="initPage();"><div class="body"><div class="contentLeft prTxt"><h1 class="pageHeading" id="GUID-0EFEA51B-F98B-4C0B-9960-5D6247355ACA">Handling selection lists</h1><div><p>Lists are a basic UI component for displaying all kinds of information, actions, and navigation structures. Editing and organizing information in lists can be made easier by using markable lists. Different line layouts offer flexibility in presenting information; lines can contain different sizes of images and text to suit design needs.</p>
<div><h3>Using HTML tags</h3><p>You can use HTML <code>select</code> tags or JavaScript to create selection lists.</p></div>
<div><h3>To use list components</h3><p>Create an HTML <code>form</code> element that contains the <code>select</code> tag.</p><pre class="codeblock"><form action = "">
<select>
<option value = "coffee">Coffee</option>
<option value = "tea">Tea</option>
<option value = "water">Water</option>
</select>
</form></pre></div>
<div><h3>Using JavaScript to create selection lists</h3><p>Selection lists allow users to select from a list of options. You can use JavaScript to create selection lists. Specify options as an array of JavaScript objects, where each object represents one option. Each option object has two properties: value and text. The value property can be any JavaScript value, including object references and is used to represent the concrete value of the option. The text property is used to display the option in the user interface. The value could for example be a boolean <code>true</code> or <code>false</code> while the text could be <span class="uicontrol">Yes</span> or <span class="uicontrol">No</span>.</p><p>The set of currently selected options can be set or retrieved from a selection control using <code>getter</code> and <code>setter</code> methods. For single selection controls the selected option is specified as a single reference to one of the options in the control. For multiple selection the selected options are specified as an array of references to zero or more of the options in the control. Refer to the instances of the options in the control; not other instances even if they are identical in value or text.</p><p>Selection controls fire <code>SelectionChanged</code> events when the user makes a selection in the control. </p><p>For an example of using JavaScript to create a selection list, see <a href="http://wiki.forum.nokia.com/index.php/CS000941_-_WRT_Listbox_Widget" target="_blank">WRT Listbox Widget</a>.</p></div>
<div><h3>To create an array of JavaScript objects</h3><p>For multiple selection, specify an array of references to the options in the control.</p><pre class="codeblock">// create an array with three options
var options = [
{ value: 1, text: "Coffee" },
{ value: 2, text: "Tea" },
{ value: 3, text: "Water" }
];
</pre></div>
<div><h3>Using lists in touch devices</h3><p>Use lists with single-line items and large graphics on touch devices. For more information about touch-specific issues, see <a href="http://library.forum.nokia.com/topic/Design_and_User_Experience_Library/GUID-6E5CEE22-7804-4848-9513-F0EFC3130EB0.html" target="_blank">Touch-specific issues in lists</a>.</p></div>
</div></div></div><div class="footer"><hr/><div class="copy">© Nokia 2009.</div></div></body></html>