Adding a Guarana UI iconic menu on a web page - Revision history

Hamishwillee: Text replace - "Category:Symbian Web Runtime" to "Category:Symbian"

2012-05-10T05:45:48Z

Text replace - "Category:Symbian Web Runtime" to "Category:Symbian"

Hamishwillee: Hamishwillee - Bot change of template (Template:CodeSnippet) - now using Template:ArticleMetaData

2011-06-24T09:17:59Z

Hamishwillee - Bot change of template (Template:CodeSnippet) - now using Template:ArticleMetaData

Hamishwillee: Hamishwillee - Automated change of text from Forum Nokia to Nokia Developer. (Rebrand)

2011-06-22T11:35:10Z

Hamishwillee - Automated change of text from Forum Nokia to Nokia Developer. (Rebrand)

Hamishwillee: Bot change of links to internal format.

2011-05-19T03:18:16Z

Bot change of links to internal format.

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

2011-04-12T22:55:12Z

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

Allanbezerra: Fixing js code

2010-04-27T20:11:53Z

Fixing js code

Jimgilmour1: add function iconicMenuClicked to keywords

2010-01-22T19:44:23Z

add function iconicMenuClicked to keywords

Tapla: Created page with 'NOTOC NOEDITSECTION {{CodeSnippet |id= |platform= |devices=Nokia N97 |category=Web Runtime (WRT) |subcategory=Guarana UI, UI |creationdate=January 22, 2010 |keyword…'

2010-01-22T14:32:40Z

Created page with '__NOTOC__ __NOEDITSECTION__ {{CodeSnippet |id= |platform= |devices=Nokia N97 |category=Web Runtime (WRT) |subcategory=Guarana UI, UI |creationdate=January 22, 2010 |keyword…'

New page

__NOTOC__
__NOEDITSECTION__
{{CodeSnippet
|id= 
|platform=
|devices=Nokia N97
|category=Web Runtime (WRT)
|subcategory=Guarana UI, UI
|creationdate=January 22, 2010
|keywords=
}}

==Overview==

This code snippet demonstrates how to add an iconic menu on a web page using Guarana UI components. The iconic menu component looks like this:<br/>
[[File:Iconsmenu01.png]]<br/>
You can download the component library from [http://wiki.forum.nokia.com/index.php/Guarana_UI:_a_jQuery-Based_UI_Library_for_Nokia_WRT Forum Nokia].

==Source: Relevant HTML components==

<code xml>
<head>

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


<script type="text/javascript" src="lib/jquery/jquery.js"
charset="utf-8"></script>
<script type="text/javascript" src="lib/guarana/defaults.js"
charset="utf-8"></script>
<script type="text/javascript" src="lib/guarana/core.js"
charset="utf-8"></script>
</head>
<body>
<div id="bodyContent" class="bodyContent">
<div id="menu"></div>
</div>
</body>
</code>

==Source: JavaScript==

<code javascript>
Nokia.use("iconicmenu", init);

// Initializes the widget
function init() {
var iconicMenu = new Nokia.IconicMenu({
element: "#menu",
items: [
{
label: "favorites",
icon: "gfx/fn.png",
select: function(item, event) {
iconicMenuClicked(item, event);
}
},
{
label: "e-mails",
icon: "gfx/fn.png",
select: function(item, event) {
iconicMenuClicked(item, event);
}
},
{
label: "chat",
icon: "gfx/fn.png",
select: function(item, event) {
iconicMenuClicked(item, event);
}
},
{
label: "trash",
icon: "gfx/fn.png",
select: function(item, event) {
iconicMenuClicked(item, event);
}
},
]
});
}

// Called when a menu item is clicked
function iconicMenuClicked(item, event) {
displayNote("Menu item clicked on " + item.label);
}
</code>

The <tt>label</tt> and <tt>icon</tt> attributes define the label and icon of the menu item, respectively. The <tt>select</tt> attribute defines the function which is called when a menu item is clicked.

'''Note''': The iconic menu component requires the following files from the library:

* <tt>lib/jquery/jquery.js</tt>
* <tt>src/core.js</tt>
* <tt>src/defaults.js</tt>
* <tt>src/dom.js</tt> (implicitly loaded by <tt>core.js</tt>)
* <tt>src/util.js</tt> (implicitly loaded by <tt>core.js</tt>)
* <tt>src/device.js</tt> (implicitly loaded by <tt>core.js</tt>)
* <tt>src/animation.js</tt> (implicitly loaded by <tt>core.js</tt>)
* <tt>src/widget.js</tt> (implicitly loaded by <tt>core.js</tt>)
* <tt>src/iconicmenu.js</tt> (implicitly loaded by <tt>core.js</tt>)
* <tt>themes/nokia/base/base.css</tt> (implicitly loaded by <tt>core.js</tt>)
* <tt>themes/nokia/base/iconicmenu.css</tt> (implicitly loaded by <tt>core.js</tt>)
* <tt>themes/nokia/base/images/shadow.png</tt> (from <tt>base.css</tt>)
* <tt>themes/nokia/base/images/shadow-c.png</tt> (from <tt>base.css</tt>)
* <tt>themes/nokia/base/images/shadow-lr.png</tt> (from <tt>base.css</tt>)
* <tt>themes/themeroller/default-theme/ui.accordion.css</tt>
* <tt>themes/themeroller/default-theme/ui.all.css</tt>
* <tt>themes/themeroller/default-theme/ui.base.css</tt>
* <tt>themes/themeroller/default-theme/ui.core.css</tt>
* <tt>themes/themeroller/default-theme/ui.theme.css</tt>
* <tt>themes/themeroller/default-theme/images/ui-bg_diagonals-thick_10_444444_40x40.png</tt> (from <tt>ui.theme.css</tt>)
* <tt>themes/themeroller/default-theme/images/ui-bg_flat_0_000000_40x100.png</tt> (from <tt>ui.theme.css</tt>)
* <tt>themes/themeroller/default-theme/images/ui-bg_glass_20_9f1504_640x400.png</tt> (from <tt>ui.theme.css</tt>)
* <tt>themes/themeroller/default-theme/images/ui-bg_glass_40_8ab61c_640x400.png</tt> (from <tt>ui.theme.css</tt>)
* <tt>themes/themeroller/default-theme/images/ui-bg_glass_55_8ab61c_640x400.png</tt> (from <tt>ui.theme.css</tt>)
* <tt>themes/themeroller/default-theme/images/ui-bg_glass_100_c2cba5_640x400.png</tt> (from <tt>ui.theme.css</tt>)
* <tt>themes/themeroller/default-theme/images/ui-bg_highlight-hard_80_ededed_640x100.png</tt> (from <tt>ui.theme.css</tt>)
* <tt>themes/themeroller/default-theme/images/ui-bg_highlight-soft_100_ededed_640x100.png</tt> (from <tt>ui.theme.css</tt>)
* <tt>themes/themeroller/default-theme/images/ui-icons_89bf43_256x240.png</tt> (from <tt>ui.theme.css</tt>)
* <tt>themes/themeroller/default-theme/images/ui-icons_97B72B_256x240.png</tt> (from <tt>ui.theme.css</tt>)
* <tt>themes/themeroller/default-theme/images/ui-icons_222222_256x240.png</tt> (from <tt>ui.theme.css</tt>)
* <tt>themes/themeroller/default-theme/images/ui-icons_e3bfb5_256x240.png</tt> (from <tt>ui.theme.css</tt>)
* <tt>themes/themeroller/default-theme/images/ui-icons_ffffff_256x240.png</tt> (from <tt>ui.theme.css</tt>)

==Postconditions==

A Guarana UI iconic menu is added on the web page.

[[Category:Web Runtime (WRT)]][[Category:Guarana UI]][[Category:Code Examples]]

← Older revision		Revision as of 05:45, 10 May 2012
Line 140:		Line 140:
	A Guarana UI iconic menu is added on the web page.		A Guarana UI iconic menu is added on the web page.

−	[[Category:Symbian ~~Web Runtime~~]][[Category:Guarana UI]][[Category:Code Examples]]	+	[[Category:Symbian]][[Category:Guarana UI]][[Category:Code Examples]]

← Older revision		Revision as of 22:55, 12 April 2011
Line 132:		Line 132:
	A Guarana UI iconic menu is added on the web page.		A Guarana UI iconic menu is added on the web page.

−	[[Category:Web Runtime ~~(WRT)~~]][[Category:Guarana UI]][[Category:Code Examples]]	+	[[Category:Symbian Web Runtime]][[Category:Guarana UI]][[Category:Code Examples]]

@@ Line 1: / Line 1: @@
 __NOTOC__
 __NOEDITSECTION__
-{{CodeSnippet
+{{ArticleMetaData
 |id=&nbsp;
 |platform=
@@ Line 9: / Line 9: @@
 |creationdate=January 22, 2010
 |keywords= iconicMenuClicked
 }}

@@ Line 15: / Line 15: @@
 This code snippet demonstrates how to add an iconic menu on a web page using Guarana UI components. The iconic menu component looks like this:<br/>
 [[File:Iconsmenu01.png]]<br/>
-You can download the component library from [[Guarana UI: a jQuery-Based UI Library for Nokia WRT|Forum Nokia]].
+You can download the component library from [[Guarana UI: a jQuery-Based UI Library for Nokia WRT|Nokia Developer]].
 ==Source: Relevant HTML components==

@@ Line 44: / Line 44: @@
 <code javascript>
-Nokia.use("iconicmenu", init);
 // Initializes the widget
@@ Line 83: / Line 87: @@
+}
-// Called when a menu item is clicked
+Nokia.use("iconicmenu", init);
-function iconicMenuClicked(item, event) {
-    displayNote("Menu item clicked on " + item.label);
-−
 </code>