×
Namespaces

Variants
Actions

How to use midor JavaScript library in a WRTS60 widget

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Article
Created: Maveric (02 Nov 2010)
Last edited: hamishwillee (26 Jul 2012)

Contents

Introduction

This is a very light JavaScript framework that uses CSS selectors to access matching elements on a page.

Example:

midori.get('div.old').apply('className += "new"');

The div name changes from "old" to "new". There is also support of AJAX and Drag-and-Drop functionality. Special effects are within also:

style.display = 'none' 
--
midoriFX.hide()


In addition, this JavaScript library supports Pop-Up menus and form auto-completion.

Basically it is possible to turn any web page component into a text box supporting click, type and save. There is also possibility for table row selection.

Prerequisites

You need to download the Midori JavaScript library for this example from here:

http://www.midorijs.com/midori.js

Example code

This is a basic example showing how to include and use this library. Please check the original documentation for possible more use cases and API documentation.

We need only html and css files in this example.

The library needs to be added in the index.html and within your widget project. Save it into the root directory and if you use some other directory, remember to change the path accordingly.

index.html

<html>
<head>
<title>Midori Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="javascript" type="text/javascript" src="basic.js"></script>
<script language="javascript" type="text/javascript" src="midori.js"></script>
<link rel="stylesheet" href="basic.css" type="text/css" />
</head>
<body>
 
<div id="fruits" class="popup">
<a href="#" class="menu">Apple</a>
<a href="#" class="menu">Orange</a>
<a href="#" class="menu">Banana</a>
</div>
 
<a href="#" onclick="midoriPopup.show( {
popupId: 'fruits', obj: this, event: event } )"
>Show</a>
 
</body>
</html>


basic.css

   .popup
{
position: absolute;
background-color: #F0F0F0;
padding: 8px;
border: 1px solid #333;
display: none;
z-index: 10000;
}
 
a.menuitem
{
display: block;
padding: 3px;
}
 
a.menuitem:hover
{
text-decoration: none;
background-color: #06A;
color: #FFF;
}

Midori test widget

The above example has been tested and found working on emulator.

This page was last modified on 26 July 2012, at 01:58.
29 page views in the last 30 days.
×