midori Javascript Framework

midori

Developer(s)	Aycan Gulez
Stable release	2009.11 / {{|2009|11|15}}
Written in	JavaScript
Type	Web application framework
License	MIT License
Website	http://www.midorijs.com

midori is a lightweight JavaScript library that aims to make JavaScript web development easier. It was created by Aycan Gulez.

Features

• DOM element selection using CSS selectors
• Tabs
• Drag and Drop
• Effects
• Pop-up menus
• Ajax with history support
• Autocomplete
• Inline Edit
• Table row selection
• DOM, cookie, form, string and array utility methods

Use

midori consists of 10 modules and is available as a single JavaScript file. It can be included within any web page by using the following markup: <source lang=html4strict> <script type="text/javascript" src="path/to/midori.js"></script> </source>

midori allows the use of standard CSS syntax to access DOM elements, and supports most CSS2 and CSS3 selectors. There are three ways to work on returned DOM elements.

• Passing JavaScript code to modify a single property, using the built-in apply() method:

<source lang=javascript> // Sets the background color of all the cells in even rows to "yellow" in the "cities" table midori.get('#cities tr:nth-child(even) td').apply('style.backgroundColor = "yellow"'); </source>

• Passing a function that takes a single parameter for more complex operations, again using the apply() method:

<source lang=javascript> // Marks the cells whose values are 12 or bigger in the "cities" table midori.get('#cities td').apply(function (o) {

  if (parseInt(o.innerHTML) >= 12) o.style.backgroundColor = 'red';

} ); </source>

• Directly accessing array entries returned by midori.get() is also possible.

<source lang="javascript"> // Returns the first div element var firstDiv = midori.get('div')[0]; </source>

External links

• Official website
• Documentation
• Tutorials