Dialog

Overview

Dialogs are modal windows. They disallow any other interaction with the application while waiting on a user interaction.

Markup declaration

Dialogs are declared with the attribute data-role="dialog". They can contain other HTML elements:

<div id="dialog1" style="display: block" data-role="dialog">
  <section>
    <h1>Simple Dialog</h1>
    <p>Are you sure you want to delete this file?</p>
    <menu>
      <button id="no" data-role="button">Cancel</button>
      <button id="yes" class="danger" data-role="button">Delete</button>
    </menu>
  </section>
<div>

The following example prompts the user for its name:

<div id="dialog2" style="display: block" data-role="dialog">
  <section>
    <h1>Name Dialog</h1>
    <p>What is you name?</p>
    <menu>
      <input type="text" id="nameField"/>
      <button data-role="button" id="okButton">OK<button>
    </menu>
  </section>
</div>

Ubuntu HTML5 dialog with text input

Javascript Access method

Accessing the dialog from Javascript is made as follows:

var UI = new UbuntuUI();
UI.init();
var dialog = UI.dialog('dialogId'); // Takes an "id"-String as a parameter. 
```html


<h2>Interface definition</h2>

```javascript
interface Dialog{
  void show();
  void hide();
  void toggle();
};

Methods

  • void show() . shows the dialog.

  • void hide(). hides the dialog.

  • void toggle(). shows the dialog if it is hidden, hides if it is shown.

Dialogs can be shown and hidden from Javascript as follows:

UI.dialog('dialogId').show(); // show the dialog
UI.dialog('dialogId').hide(); // hides the dialog
UI.dialog('dialogId').toggle(); // toggles the state to "displayed" or "hidden"

Predefined CSS classes

  • shake: this class is an animation which "shakes" the dialog. Use it for example when the user entered some data which cannot be validated.

The following example shakes the dialog when the user tries to save an empty name:

<div id="dialog" style="display: block" data-role="dialog">
  <section>
    <h1>Name Dialog</h1>
    <p>What is your name?</p>
    <menu>
      <input type="text" id="nameField"/>
      <button data-role="button" id="okButton">OK<button>
    </menu>
  </section>
<div>
<script>
UI.button('okButton').click(function(){
  var name = document.getElementById('nameField').value;
  if(!name){
    // displays a shake animation because the user forgot to enter his name
    document.getElementById('dialog').classList.add("shake");
  }
});
</script>