Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

Adding a Guarana UI iconic menu on a web page

From Wiki
Jump to: navigation, search


Article Metadata
Tested with
Devices(s): Nokia N97
Compatibility
Platform(s):
Symbian
Article
Keywords: iconicMenuClicked
Created: tapla (22 Jan 2010)
Last edited: hamishwillee (10 May 2012)

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 Nokia Developer.

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

// Called when a menu item is clicked
function iconicMenuClicked(item, event) {
displayNote("Menu item clicked on " + item.label);
}
 
// 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);
}
},
]
});
}
 
Nokia.use("iconicmenu", init);

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.

This page was last modified on 10 May 2012, at 05:45.
134 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.

×