Options Menu - Revision history

Hamishwillee: Hamishwillee - Bot update - Fix ArticleMetaData

2012-07-31T07:30:40Z

Hamishwillee - Bot update - Fix ArticleMetaData

Hamishwillee: Hamishwillee - Fix categories

2012-07-05T03:04:33Z

Hamishwillee - Fix categories

Hamishwillee: Automated change of category from Web Runtime (WRT) to Symbian Web Runtime

2011-04-12T23:52:13Z

Automated change of category from Web Runtime (WRT) to Symbian Web Runtime

Lpvalente at 11:27, 19 April 2010

2010-04-19T11:27:11Z

Allanbezerra: Updating Inheritance info

2010-04-08T18:18:54Z

Updating Inheritance info

Hkaliste at 15:07, 18 November 2009

2009-11-18T15:07:46Z

Forum Nokia KB: Protected "Options Menu" ([edit=sysop] (indefinite) [move=sysop] (indefinite))

2009-11-18T09:37:47Z

Protected "Options Menu" ([edit=sysop] (indefinite) [move=sysop] (indefinite))

Forum Nokia KB at 09:30, 18 November 2009

2009-11-18T09:30:22Z

Forum Nokia KB: 1 revision

2009-11-18T06:24:13Z

1 revision

Kbwiki: /* 6 - Nokia WRT Browser Compatibility */

2009-11-09T11:46:31Z

6 - Nokia WRT Browser Compatibility

New page

__NOTOC__
=Inheritance=

<code>[[Widget | Nokia.Widget]]

|- Nokia.OptionsMenu
</code>

=1- Description=

The Options Menu component contains a row of single-line items. Each item presents the user with a list of action items.

=2 - Visual Design=

[[File:Optionsmenu01.png]]

=3 - Component Dependencies=

==3.1 CSS==

<pre>

<link rel="stylesheet" href="/themes/themeroller/default-theme/THEMEROLLER.css" type="text/css" media="screen">

<link rel="stylesheet" href="/themes/nokia/base/JS4WRT.css" type="text/css" media="screen">

<link rel="stylesheet" href="/themes/nokia/ext-theme/<theme>/<resolution>/custom.css" type="text/css" media="screen">
</pre>

==3.2 Javascript==

<pre>

<script src="/lib/jquery/JQUERY.js" type="text/javascript" charset="utf-8"></script>

<script src="/lib/JS4WRT.js" type="text/javascript" charset="utf-8"></script>
</pre>

=4 - Functional Specifications/Requirements=

==4.1 - Options==

*element: 'selector'
**jQuery selector or the DOM reference to become the container of the component.
*transitions: boolean
**Defines whether transitions are applied on the component.
*label: string
**Defines a label for a specific section of the component.

==4.2 - Events - Callbacks==

*create: function()
**Scope: [this.element]

==4.3 - Methods==

*appendShadow: function()
**Adds a shadow on the component.
**return [void]
*addSection: function(section)
**Adds a new section on the component.
**return [void]
*addItem: function(item)
**Adds a new item in a specific section.
**return [int]
*getItems: function()
**Returns a set of items.
**return [jQuery collection]
*getLabel: function()
**Gets the label for a specific section of the component.
**return [String]
*select: function(event)
**Selects a component item.
**return [void]

==4.4 - Default options==

*transitions: false

=5 - Component Demo=

==5.1 HTML==

<pre>
<div id="menu"></div>
</pre>

==5.2 Javascript==

<pre>
var optionsmenu = new Nokia.OptionsMenu({
element: '#menu',
transitions: true
});

// Secction 1
var section1 = new Nokia.OptionsMenuSection({
label: 'File'
});

var option1 = new Nokia.OptionsMenuItem({
label: 'New',
select: function() {
alert('This creates a new file.');
}
});

var option2 = new Nokia.OptionsMenuItem({
label: 'Open',
select: function() {
alert('This opens a new file.');
}
});

section1.addItem(option1);
section1.addItem(option2);
// Secction 2
var section2 = new Nokia.OptionsMenuSection({
label: 'Edit'
});

var option5 = new Nokia.OptionsMenuItem({
label: 'Undo',
select: function() {
alert('This undo last change');
}
});
var option6 = new Nokia.OptionsMenuItem({
label: 'Redo',
select: function() {
alert('This redo last change.');
}
});

section2.addItem(option5);
section2.addItem(option6);
optionsmenu.addSection(section1);
optionsmenu.addSection(section2);
optionsmenu.create();
</pre>

=6 - Nokia WRT Browser Compatibility=
<p> </p>
<table class="pbNotSortable" cellspacing="1" cellpadding="1" width="300" align="left" style="border-right: rgb(211,211,211) 1px dotted; padding-right: 0px; border-top: rgb(211,211,211) 1px dotted; padding-left: 0px; font-size: 13px; padding-bottom: 0px; margin: 0px; vertical-align: baseline; border-left: rgb(211,211,211) 1px dotted; padding-top: 0px; border-bottom: rgb(211,211,211) 1px dotted; font-family: inherit; border-collapse: collapse">
<tr style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; font-size: 13px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px; vertical-align: baseline; padding-top: 0px; font-family: inherit; border-right-width: 0px">
<td class="sorttable_sorted_reverse" style="border-right: rgb(211,211,211) 1px dotted; padding-right: 4px; border-top: rgb(211,211,211) 1px dotted; padding-left: 4px; font-weight: 400; font-size: 13px; padding-bottom: 2px; margin: 0px; vertical-align: baseline; border-left: rgb(211,211,211) 1px dotted; padding-top: 2px; border-bottom: rgb(211,211,211) 1px dotted; font-family: inherit; background-color: rgb(255,255,255); text-align: left"><span id="sorttable_sortrevind" style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; font-size: 13px; float: left; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px; vertical-align: baseline; padding-top: 0px; font-family: inherit; border-right-width: 0px">▴ </span> </td>
<td style="border-right: rgb(211,211,211) 1px dotted; padding-right: 4px; border-top: rgb(211,211,211) 1px dotted; padding-left: 4px; font-weight: 400; font-size: 13px; padding-bottom: 2px; margin: 0px; vertical-align: baseline; border-left: rgb(211,211,211) 1px dotted; padding-top: 2px; border-bottom: rgb(211,211,211) 1px dotted; font-family: inherit; background-color: rgb(255,255,255); text-align: left"><strong>S60 3.1</strong></td>
<td style="border-right: rgb(211,211,211) 1px dotted; padding-right: 4px; border-top: rgb(211,211,211) 1px dotted; padding-left: 4px; font-weight: 400; font-size: 13px; padding-bottom: 2px; margin: 0px; vertical-align: baseline; border-left: rgb(211,211,211) 1px dotted; padding-top: 2px; border-bottom: rgb(211,211,211) 1px dotted; font-family: inherit; background-color: rgb(255,255,255); text-align: left"><strong>S60 3.2</strong></td>
<td style="border-right: rgb(211,211,211) 1px dotted; padding-right: 4px; border-top: rgb(211,211,211) 1px dotted; padding-left: 4px; font-weight: 400; font-size: 13px; padding-bottom: 2px; margin: 0px; vertical-align: baseline; border-left: rgb(211,211,211) 1px dotted; padding-top: 2px; border-bottom: rgb(211,211,211) 1px dotted; font-family: inherit; background-color: rgb(255,255,255); text-align: left"><strong>S60 5.0</strong></td>
<tr style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; font-size: 13px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px; vertical-align: baseline; padding-top: 0px; font-family: inherit; border-right-width: 0px">
<td style="border-right: rgb(211,211,211) 1px dotted; padding-right: 4px; border-top: rgb(211,211,211) 1px dotted; padding-left: 4px; font-weight: 400; font-size: 13px; padding-bottom: 2px; margin: 0px; vertical-align: baseline; border-left: rgb(211,211,211) 1px dotted; padding-top: 2px; border-bottom: rgb(211,211,211) 1px dotted; font-family: inherit; background-color: rgb(255,255,255); text-align: left">Options Menu</td>
<td bgcolor="#000000" style="border-right: rgb(211,211,211) 1px dotted; padding-right: 4px; border-top: rgb(211,211,211) 1px dotted; padding-left: 4px; font-weight: 400; font-size: 13px; padding-bottom: 2px; margin: 0px; vertical-align: baseline; border-left: rgb(211,211,211) 1px dotted; padding-top: 2px; border-bottom: rgb(211,211,211) 1px dotted; font-family: inherit; background-color: rgb(255,255,255); text-align: left"><span style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; font-size: 13px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px; vertical-align: baseline; color: rgb(51,153,102); padding-top: 0px; font-family: inherit; border-right-width: 0px">NO </span></td>
<td bgcolor="#000000" style="border-right: rgb(211,211,211) 1px dotted; padding-right: 4px; border-top: rgb(211,211,211) 1px dotted; padding-left: 4px; font-weight: 400; font-size: 13px; padding-bottom: 2px; margin: 0px; vertical-align: baseline; border-left: rgb(211,211,211) 1px dotted; padding-top: 2px; border-bottom: rgb(211,211,211) 1px dotted; font-family: inherit; background-color: rgb(255,255,255); text-align: left"><span style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; font-size: 13px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px; vertical-align: baseline; color: rgb(51,153,102); padding-top: 0px; font-family: inherit; border-right-width: 0px">YES </span></td>
<td bgcolor="#000000" style="border-right: rgb(211,211,211) 1px dotted; padding-right: 4px; border-top: rgb(211,211,211) 1px dotted; padding-left: 4px; font-weight: 400; font-size: 13px; padding-bottom: 2px; margin: 0px; vertical-align: baseline; border-left: rgb(211,211,211) 1px dotted; padding-top: 2px; border-bottom: rgb(211,211,211) 1px dotted; font-family: inherit; background-color: rgb(255,255,255); text-align: left"><span style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; font-size: 13px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px; vertical-align: baseline; color: rgb(51,153,102); padding-top: 0px; font-family: inherit; border-right-width: 0px">YES </span></td>
</table>
<p> </p>

← Older revision		Revision as of 07:30, 31 July 2012
Line 1:		Line 1:
		+	{{ArticleMetaData <!-- v1.2 -->
		+	\|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
		+	\|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
		+	\|devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
		+	\|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Qt SDK 1.1.4]) -->
		+	\|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
		+	\|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
		+	\|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
		+	\|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
		+	\|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
		+	\|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
		+	\|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
		+	\|translated-by= <!-- [[User:XXXX]] -->
		+	\|translated-from-title= <!-- Title only -->
		+	\|translated-from-id= <!-- Id of translated revision -->
		+	\|review-by= <!-- After re-review: [[User:username]] -->
		+	\|review-timestamp= <!-- After re-review: YYYYMMDD -->
		+	\|update-by= <!-- After significant update: [[User:username]]-->
		+	\|update-timestamp= <!-- After significant update: YYYYMMDD -->
		+	\|creationdate= 20091109
		+	\|author= [[User:Kbwiki]]
		+	}}
	[[Category:Guarana UI]]		[[Category:Guarana UI]]
−	~~__NOTOC__~~
	=Inheritance=		=Inheritance=

@@ Line 1: / Line 1: @@
-[[Category:Symbian Web Runtime]]
+[[Category:Guarana UI]]
 __NOTOC__
 =Inheritance=

@@ Line 1: / Line 1: @@
-[[Category:Web Runtime (WRT)]]
+[[Category:Symbian Web Runtime]]
 __NOTOC__
 =Inheritance=

← Older revision		Revision as of 11:27, 19 April 2010
Line 1:		Line 1:
		+	[[Category:Web Runtime (WRT)]]
	__NOTOC__		__NOTOC__
	=Inheritance=		=Inheritance=

@@ Line 2: / Line 2: @@
 =Inheritance=
-<code>Nokia.Widget
+<code>
-     |- Nokia.OptionsMenu
+Nokia.OptionsMenu
 </code>

@@ Line 3: / Line 3: @@
 <code>Nokia.Widget
+    |- Nokia.OptionsMenu
 |- Nokia.OptionsMenu
 </code>
@@ Line 25: / Line 24: @@
 <pre>
 <!-- Themeroller CSS -->
-<link rel="stylesheet" href="/themes/themeroller/default-theme/THEMEROLLER.css" type="text/css" media="screen">
+<link rel="stylesheet" href="themes/themeroller/<theme>/Themeroller.css" type="text/css" media="screen">
-<!-- Nokia WRT Framework Base CSS -->
-<link rel="stylesheet" href="/themes/nokia/base/JS4WRT.css" type="text/css" media="screen">
 <!-- Specific Theme/Resolution CSS -->
 <link rel="stylesheet" href="/themes/nokia/ext-theme/<theme>/<resolution>/custom.css" type="text/css" media="screen">
@@ Line 36: / Line 33: @@
 <pre>
 <!-- jQuery file -->
-<script src="/lib/jquery/JQUERY.js" type="text/javascript" charset="utf-8"></script>
+<script src="/lib/jquery/jQuery.js" type="text/javascript" charset="utf-8"></script>
-<!-- JS4WRT file -->
+<!-- Guarana file -->
-<script src="/lib/JS4WRT.js" type="text/javascript" charset="utf-8"></script>
+<script src="/lib/Guarana.js" type="text/javascript" charset="utf-8"></script>
 </pre>
@@ Line 107: / Line 104: @@
 });
-// Secction 1
+// Secction 1 Definition
 var section1 = new Nokia.OptionsMenuSection({
       label: 'File'
@@ Line 128: / Line 125: @@
 section1.addItem(option1);
 section1.addItem(option2);
 // Secction 2
 var section2 = new Nokia.OptionsMenuSection({
       label: 'Edit'
@@ Line 148: / Line 146: @@
 section2.addItem(option5);
 section2.addItem(option6);
 optionsmenu.addSection(section1);
 optionsmenu.addSection(section2);
 optionsmenu.create();
 </pre>