×
Namespaces

Variants
Actions
Revision as of 17:32, 22 January 2010 by tapla (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Adding a Guarana UI iconic menu on a web page

From Nokia Developer Wiki
Jump to: navigation, search


Article Metadata
Tested with
Devices(s): Nokia N97
Compatibility
Platform(s):
Symbian
Article
Created: (22 Jan 2010)
Last edited: tapla (22 Jan 2010)

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:
Iconsmenu01.png
You can download the component library from Forum Nokia.

Source: Relevant HTML components

<head>
<!-- Guarana UI style sheets -->
<link rel="stylesheet"
href="style/themes/themeroller/default-theme/ui.all.css"
type="text/css" media="screen">
 
<!-- Guarana UI scripts -->
<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>

Source: 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);
}

The label and icon attributes define the label and icon of the menu item, respectively. The select 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:

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

Postconditions

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

97 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×