Button Only Mode

This shows the simplest form of button mode. It also has the header option enabled. You can add as many buttons as you want.

You clicked:

Open Dialog HTML

<p>You have entered: <span id="buttonoutput"></span></p>

<a href="#" id="opendialog" data-role="button">Open Dialog</a>

jQuery

$(document).delegate('#opendialog', 'click', function() {
  // NOTE: The selector can be whatever you like, so long as it is an HTML element.
  //       If you prefer, it can be a member of the current page, or an anonymous div
  //       like shown.
  $('<div>').simpledialog2({
    mode: 'button',
    headerText: 'Click One...',
    headerClose: true,
    buttonPrompt: 'Please Choose One',
    buttons : {
      'OK': {
        click: function () { 
          $('#buttonoutput').text('OK');
        }
      },
      'Cancel': {
        click: function () { 
          $('#buttonoutput').text('Cancel');
        },
        icon: "delete",
        theme: "c"
      }
    }
  })
})

Button w/ Input Mode

This shows how to use the button input mode to get user input.

You entered:

Open Dialog HTML

<p>You have entered: <span id="buttonoutput"></span></p>

<a href="#" id="opendialog" data-role="button">Open Dialog</a>

jQuery

$(document).delegate('#opendialog', 'click', function() {
  // NOTE: The selector can be whatever you like, so long as it is an HTML element.
  //       If you prefer, it can be a member of the current page, or an anonymous div
  //       like shown.
  $('<div>').simpledialog2({
    mode: 'button',
    headerText: 'Hmm?',
    headerClose: true,
    buttonPrompt: 'Please Type Something',
    buttonInput: true,
    buttons : {
      'OK': {
        click: function () { 
          $('#buttonoutput').text($.mobile.sdLastInput);
        }
      },
    }
  })
})