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.

How to use midor JavaScript library in a WRTS60 widget

From Wiki
Jump to: navigation, search
Article Metadata
Article
Created: Maveric (02 Nov 2010)
Last edited: hamishwillee (25 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 25 July 2012, at 22:58.
36 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.

×