String Input Mode

This shows the simplest form of string input.

You have entered:

Open Dialog HTML

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

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

jQuery

$(document).delegate('#simplestring', 'click', function() {
  $(this).simpledialog({
    'mode' : 'string',
    'prompt' : 'What do you say?',
    'buttons' : {
      'OK': {
        click: function () {
          $('#dialogoutput').text($('#dialoglink').attr('data-string'));
        }
      },
      'Cancel': {
        click: function () { },
        icon: "delete",
        theme: "c"
      }
    }
  })
})

String Password Input Mode

This shows getting a password input.

You have entered:

Open Dialog HTML

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

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

jQuery

$(document).delegate('#simplepass', 'click', function() {
  $(this).simpledialog({
    'mode' : 'string',
    'prompt' : 'Password?',
    'inputPassword': true,
    'buttons' : {
      'OK': {
        click: function () {
          $('#dialogoutput').text($('#dialoglink').attr('data-string'));
        }
      },
      'Cancel': {
        click: function () { },
        icon: "delete",
        theme: "c"
      }
    }
  })
})

Adding to a Select Box

This shows how to use SimpleDialog to add to a select box.

HTML

<div data-role='fieldcontain'> 
  <label for='vendor'>Some Select Menu, using jQM styles</label> 
  <select data-native-menu="false" name='stringselect' id='stringselect' > 
    <option data-placeholder='true'>Choose one...</option> 
    <option data-addoption='true' value='0'>Add New...</option> 
    <option value='Example Vendor'>Example Vendor</option> 
    <option value='Another Example Vendor'>Another Example Vendor</option> 
  </select> 
</div>

jQuery

$(document).delegate('#stringselect', 'change', function(e) {
  var self = this;
  $(self+':selected:not([data-placeholder])').each(function(){
    if ( $(this).attr('data-addoption') ) {
      $(self).simpledialog({
        'mode' : 'string',
        'prompt' : 'Add New Option',
        'useDialogForceFalse' : true,
        'buttons' : {
          'Yes, Add' : {
            click: function () { 
              thisopt = $(self).attr('data-string');
              $('<option value="'+thisopt+'" selected="selected">'+thisopt+'</option>').appendTo($(self));
              $(self).selectmenu('refresh', true);
              return true; }
          },
          'Cancel' : {
            click: function () { $(self).selectmenu('open'); },
            icon: "delete"
          }
        }
      });
    }
  });
});