Created by ElAchèche Bedis / @elacheche_bedis
|
|
UbuntuUI is the central access point for all Ubuntu Widget classes. It allows to create objects to manipulate all kinds of widgets and initialize the Ubuntu HTML5 theme
UbuntuUI is defined in /usr/share/ubuntu-html5-theme/0.1/ambiance/js/core.js
var UI = new UbuntuUI();
UI.init();
Pagestack manages pages. It has methods to show and hide pages. Only one page and its toolbar can be displayed at the same time.
var pagestack = UI.pagestack;
Pages are contained in a pagestack and must have the attribute data-role="page"
The header is an UI component which sits at the top of an application.
- It shows to the user where he is.
- It contains tabs.
var tabs = UI.tabs('#tabId');
The toolbar is an UI component which sits at the bottom of an application. Toolbar is defined in the file /usr/share/ubuntu-html5-theme/0.1/ambiance/js/toolbar.js
var toolbar = UI.toolbar('toolbarId');
Header
-
Simple Item
-
Progression item
-
Item with pic
-
Switch
-
Checkbox
var list= UI.list("#listId");
Dialogs are modal windows. They disallow any other interaction with the application while waiting on a user interaction.
Simple Dialog
Are you sure you want to delete this file?
var dialog = UI.dialog('dialogId');
Predefined CSS classes :
- shake
gravity=n (north)
gravity=s (south)
gravity=e (east)
gravity=w (west)
var dialog = UI.popover(document.getElementById('buttonId'), 'dialogId');
Predefined CSS classes :
- active
Ubuntu HTML5 Theme comes with predefined classes to style buttons:
- success
- danger
- warning
var button = UI.button('#buttonId');
Toggles are UI elements which can be turned on and off.
var toggle = new Toggle('toggleId');
Sliders have a single handle that can be moved horizontly with the mouse or the touch screen.
Shapes are “decorators” to make elements like images look as follows
BY ElAchèche Bedis [elacheche.bedis@gmail.com]
fb.com/elacheche.bedis
@elacheche_bedis