Skip to content
Browse files

Add demos for SimpleDialog2

  • Loading branch information...
1 parent 50f2dac commit 382ae2a32c59ce09fab156ed48a52939939006b0 @jtsage committed Feb 17, 2012
View
138 demos2/blank.html
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQueryMobile - SimpleDialog Demos</title>
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
+ <link type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css" rel="stylesheet" />
+ <link type="text/css" href="http://dev.jtsage.com/jQM-DateBox/css/demos.css" rel="stylesheet" />
+
+ <!-- NOTE: Script load order is significant! -->
+
+ <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
+ <script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
+ <script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog2.js"></script>
+ <script type="text/javascript" src="http://dev.jtsage.com/jQM-SimpleDialog/demos2/extras.js"></script>
+
+
+ <script type="text/javascript" src="http://dev.jtsage.com/gpretty/prettify.js"></script>
+ <link type="text/css" href="http://dev.jtsage.com/gpretty/prettify.css" rel="stylesheet" />
+ <script type="text/javascript">
+ $('div').live('pagecreate', function() {
+ prettyPrint()
+ });
+ </script>
+
+</head>
+<body>
+<div data-role="page" data-theme="c" id="blank">
+ <div data-role="header">
+ <h1>jQueryMobile - SimpleDialog2</h1>
+ <a href="index.html" data-icon="home" data-iconpos="notext">Home</a>
+ </div>
+ <div data-role="content" data-theme="c">
+ <div class="content-secondary">
+
+ <div id="jqm-homeheader">
+ <h1 id="jqm-logo"><img src="jquery-logo-sd.png" alt="jQuery Mobile Framework :: SimpleDialog" /></h1>
+ <p>A Popup Dialog Box for jQueryMobile</p>
+
+ </div>
+
+ <div class="sidebar"></div>
+
+ </div><!--/content-primary-->
+
+ <div class="content-primary">
+
+ <h2>Blank / Freeform Mode</h2>
+ <p>This shows the general format for blank or freeform mode - Your own HTML in a dialog. (Please also see next demo for limitations).</p>
+ <script type="text/javascript">
+ $(document).delegate('#openbutton3', 'click', function() {
+ $('<div>').simpledialog2({
+ mode: 'blank',
+ headerText: 'Some Stuff',
+ headerClose: true,
+ blankContent :
+ "<ul data-role='listview'><li>Some</li><li>List</li><li>Items</li></ul>"+
+ "<a rel='close' data-role='button' href='#'>Close</a>"
+ })
+ });
+ </script>
+ <a href="#" id="openbutton3" data-role="button">Open Dialog</a>
+ <strong>HTML</strong><pre class="prettyprint">
+&lt;a href="#" id="opendialog" data-role="button"&gt;Open Dialog&lt;/a&gt;</pre>
+
+ <strong>jQuery</strong><pre class="prettyprint">
+$(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.
+ $('&lt;div&gt;').simpledialog2({
+ mode: 'blank',
+ headerText: 'Some Stuff',
+ headerClose: true,
+ blankContent :
+ "&lt;ul data-role='listview'&gt;&lt;li&gt;Some&lt;/li&gt;&lt;li&gt;List&lt;/li&gt;&lt;li&gt;Items&lt;/li&gt;&lt;/ul&gt;"+
+ // NOTE: the use of rel="close" causes this button to close the dialog.
+ "&lt;a rel='close' data-role='button' href='#'&gt;Close&lt;/a&gt;"
+ })
+})</pre>
+
+ <h2>Custom Select Limitations</h2>
+ <p>Due to how custom selects work, it might be a very bad idea to use them in a dialog. Short ones, in the default display mode *will* work (and they get cleaned up along with simpledialog too). If using 'dialogAllow' or 'dialogForce', the selects *will* be converted to native select menus instead - they do not play well together.</p>
+ <script type="text/javascript">
+ $(document).delegate('#openbutton4', 'click', function() {
+ $('<div>').simpledialog2({
+ mode: 'blank',
+ headerText: 'Some Stuff',
+ headerClose: true,
+ blankContent:
+ '<select data-native-menu="false" name="select-choice-0" id="select-choice-1">'+
+ '<option value="standard">Standard: 7 day</option>' +
+ '<option value="rush">Rush: 3 days</option>' +
+ '<option value="express">Express: next day</option>'+
+ '<option value="overnight">Overnight</option>'+
+ '</select>'+
+ "<a rel='close' data-role='button' href='#'>Close</a>"
+ })
+ });
+ </script>
+ <a href="#" id="openbutton4" data-role="button">Open Dialog</a>
+ <strong>HTML</strong><pre class="prettyprint">
+&lt;p&gt;You have entered: &lt;span id="buttonoutput"&gt;&lt;/span&gt;&lt;/p&gt;
+
+&lt;a href="#" id="opendialog" data-role="button"&gt;Open Dialog&lt;/a&gt;</pre>
+
+ <strong>jQuery</strong><pre class="prettyprint">
+$(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.
+ $('&lt;div&gt;').simpledialog2({
+ mode: 'blank',
+ headerText: 'Some Stuff',
+ headerClose: true,
+ blankContent :
+ '&lt;select data-native-menu="false" name="select-choice-0" id="select-choice-1"&gt;'+
+ '&lt;option value="standard"&gt;Standard: 7 day&lt;/option&gt;' +
+ '&lt;option value="rush"&gt;Rush: 3 days&lt;/option&gt;' +
+ '&lt;option value="express"&gt;Express: next day&lt;/option&gt;'+
+ '&lt;option value="overnight"&gt;Overnight&lt;/option&gt;'+
+ '&lt;/select&gt;'+
+ // NOTE: the use of rel="close" causes this button to close the dialog.
+ "&lt;a rel='close' data-role='button' href='#'&gt;Close&lt;/a&gt;"
+ })
+})</pre>
+
+
+
+ </div>
+
+
+ </div>
+ <div data-role="footer">
+ </div>
+</div>
+</html>
View
166 demos2/button.html
@@ -0,0 +1,166 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQueryMobile - SimpleDialog Demos</title>
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
+ <link type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css" rel="stylesheet" />
+ <link type="text/css" href="http://dev.jtsage.com/jQM-DateBox/css/demos.css" rel="stylesheet" />
+
+ <!-- NOTE: Script load order is significant! -->
+
+ <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
+ <script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
+ <script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog2.js"></script>
+ <script type="text/javascript" src="http://dev.jtsage.com/jQM-SimpleDialog/demos2/extras.js"></script>
+
+
+ <script type="text/javascript" src="http://dev.jtsage.com/gpretty/prettify.js"></script>
+ <link type="text/css" href="http://dev.jtsage.com/gpretty/prettify.css" rel="stylesheet" />
+ <script type="text/javascript">
+ $('div').live('pagecreate', function() {
+ prettyPrint()
+ });
+ </script>
+
+</head>
+<body>
+<div data-role="page" data-theme="c" id="button">
+ <div data-role="header">
+ <h1>jQueryMobile - SimpleDialog2</h1>
+ <a href="index.html" data-icon="home" data-iconpos="notext">Home</a>
+ </div>
+ <div data-role="content" data-theme="c">
+ <div class="content-secondary">
+
+ <div id="jqm-homeheader">
+ <h1 id="jqm-logo"><img src="jquery-logo-sd.png" alt="jQuery Mobile Framework :: SimpleDialog" /></h1>
+ <p>A Popup Dialog Box for jQueryMobile</p>
+
+ </div>
+
+ <div class="sidebar"></div>
+
+ </div><!--/content-primary-->
+
+ <div class="content-primary">
+
+ <h2>Button Only Mode</h2>
+ <p>This shows the simplest form of button mode. It also has the header option enabled. You can add as many buttons as you want.</p>
+ <p>You clicked: <span id="outputbutton1"></span></p>
+ <script type="text/javascript">
+ $(document).delegate('#openbutton1', 'click', function() {
+ $('<div>').simpledialog2({
+ mode: 'button',
+ headerText: 'Click One...',
+ headerClose: true,
+ buttonPrompt: 'Please Choose One',
+ buttons : {
+ 'OK': {
+ click: function () {
+ $('#outputbutton1').text('OK');
+ }
+ },
+ 'Cancel': {
+ click: function () {
+ $('#outputbutton1').text('Cancel');
+ },
+ icon: "delete",
+ theme: "c"
+ }
+ }
+ })
+ });
+ </script>
+ <a href="#" id="openbutton1" data-role="button">Open Dialog</a>
+ <strong>HTML</strong><pre class="prettyprint">
+&lt;p&gt;You have entered: &lt;span id="buttonoutput"&gt;&lt;/span&gt;&lt;/p&gt;
+
+&lt;a href="#" id="opendialog" data-role="button"&gt;Open Dialog&lt;/a&gt;</pre>
+
+ <strong>jQuery</strong><pre class="prettyprint">
+$(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.
+ $('&lt;div&gt;').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"
+ }
+ }
+ })
+})</pre>
+
+ <h2>Button w/ Input Mode</h2>
+ <p>This shows how to use the button input mode to get user input.</p>
+ <p>You entered: <span id="outputbutton2"></span></p>
+ <script type="text/javascript">
+ $(document).delegate('#openbutton2', 'click', function() {
+ $('<div>').simpledialog2({
+ mode: 'button',
+ headerText: 'Hmm?',
+ headerClose: true,
+ buttonInput: true,
+ buttonPrompt: 'Please Type Something',
+ buttons : {
+ 'OK': {
+ click: function () {
+ $('#outputbutton2').text($.mobile.sdLastInput);
+ }
+ },
+ }
+ })
+ });
+ </script>
+ <a href="#" id="openbutton2" data-role="button">Open Dialog</a>
+ <strong>HTML</strong><pre class="prettyprint">
+&lt;p&gt;You have entered: &lt;span id="buttonoutput"&gt;&lt;/span&gt;&lt;/p&gt;
+
+&lt;a href="#" id="opendialog" data-role="button"&gt;Open Dialog&lt;/a&gt;</pre>
+
+ <strong>jQuery</strong><pre class="prettyprint">
+$(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.
+ $('&lt;div&gt;').simpledialog2({
+ mode: 'button',
+ headerText: 'Hmm?',
+ headerClose: true,
+ buttonPrompt: 'Please Type Something',
+ buttonInput: true,
+ buttons : {
+ 'OK': {
+ click: function () {
+ $('#buttonoutput').text($.mobile.sdLastInput);
+ }
+ },
+ }
+ })
+})</pre>
+
+
+
+ </div>
+
+
+ </div>
+ <div data-role="footer">
+ </div>
+</div>
+</html>
View
96 demos2/dialog.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQueryMobile - SimpleDialog Demos</title>
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
+ <link type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css" rel="stylesheet" />
+ <link type="text/css" href="http://dev.jtsage.com/jQM-DateBox/css/demos.css" rel="stylesheet" />
+
+ <!-- NOTE: Script load order is significant! -->
+
+ <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
+ <script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
+ <script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog2.js"></script>
+ <script type="text/javascript" src="http://dev.jtsage.com/jQM-SimpleDialog/demos2/extras.js"></script>
+
+
+ <script type="text/javascript" src="http://dev.jtsage.com/gpretty/prettify.js"></script>
+ <link type="text/css" href="http://dev.jtsage.com/gpretty/prettify.css" rel="stylesheet" />
+ <script type="text/javascript">
+ $('div').live('pagecreate', function() {
+ prettyPrint()
+ });
+ </script>
+
+</head>
+<body>
+<div data-role="page" data-theme="c" id="dialogmode">
+ <div data-role="header">
+ <h1>jQueryMobile - SimpleDialog2</h1>
+ <a href="index.html" data-icon="home" data-iconpos="notext">Home</a>
+ </div>
+ <div data-role="content" data-theme="c">
+ <div class="content-secondary">
+
+ <div id="jqm-homeheader">
+ <h1 id="jqm-logo"><img src="jquery-logo-sd.png" alt="jQuery Mobile Framework :: SimpleDialog" /></h1>
+ <p>A Popup Dialog Box for jQueryMobile</p>
+
+ </div>
+
+ <div class="sidebar"></div>
+
+ </div><!--/content-primary-->
+
+ <div class="content-primary">
+
+ <h2>jQM Native Dialog Mode</h2>
+ <p>This shows the jQM Native Dialog mode. Note that the example code below shows the FORCED use of the dialog. If you wish to use the "only on small screens" mode (less than 400px wide), only set 'dialogAllow' to true.</p>
+ <script type="text/javascript">
+ $(document).delegate('#dialogbut', 'click', function() {
+ $('<div>').simpledialog2({
+ mode: 'blank',
+ headerText: 'Some Stuff',
+ headerClose: true,
+ dialogAllow: true,
+ dialogForce: true,
+ blankContent :
+ "<ul data-role='listview'><li>Some</li><li>List</li><li>Items</li></ul>"+
+ "<a rel='close' data-role='button' href='#'>Close</a>"
+ })
+ });
+ </script>
+ <a href="#" id="dialogbut" data-role="button">Open Dialog</a>
+ <strong>HTML</strong><pre class="prettyprint">
+&lt;a href="#" id="opendialog" data-role="button"&gt;Open Dialog&lt;/a&gt;</pre>
+
+ <strong>jQuery</strong><pre class="prettyprint">
+$(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.
+ $('&lt;div&gt;').simpledialog2({
+ mode: 'blank',
+ headerText: 'Some Stuff',
+ headerClose: true,
+ dialogAllow: true,
+ dialogForce: true,
+ blankContent :
+ "&lt;ul data-role='listview'&gt;&lt;li&gt;Some&lt;/li&gt;&lt;li&gt;List&lt;/li&gt;&lt;li&gt;Items&lt;/li&gt;&lt;/ul&gt;"+
+ // NOTE: the use of rel="close" causes this button to close the dialog.
+ "&lt;a rel='close' data-role='button' href='#'&gt;Close&lt;/a&gt;"
+ })
+})</pre>
+
+
+
+ </div>
+
+
+ </div>
+ <div data-role="footer">
+ </div>
+</div>
+</html>
View
71 demos2/event.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQueryMobile - SimpleDialog Demos</title>
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
+ <link type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css" rel="stylesheet" />
+ <link type="text/css" href="http://dev.jtsage.com/jQM-DateBox/css/demos.css" rel="stylesheet" />
+
+ <!-- NOTE: Script load order is significant! -->
+
+ <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
+ <script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
+ <script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog2.js"></script>
+ <script type="text/javascript" src="http://dev.jtsage.com/jQM-SimpleDialog/demos2/extras.js"></script>
+
+
+ <script type="text/javascript" src="http://dev.jtsage.com/gpretty/prettify.js"></script>
+ <link type="text/css" href="http://dev.jtsage.com/gpretty/prettify.css" rel="stylesheet" />
+ <script type="text/javascript">
+ $('div').live('pagecreate', function() {
+ prettyPrint()
+ });
+ </script>
+
+</head>
+<body>
+<div data-role="page" data-theme="c" id="events">
+ <div data-role="header">
+ <h1>jQueryMobile - SimpleDialog2</h1>
+ <a href="index.html" data-icon="home" data-iconpos="notext">Home</a>
+ </div>
+ <div data-role="content" data-theme="c">
+ <div class="content-secondary">
+
+ <div id="jqm-homeheader">
+ <h1 id="jqm-logo"><img src="jquery-logo-sd.png" alt="jQuery Mobile Framework :: SimpleDialog" /></h1>
+ <p>A Popup Dialog Box for jQueryMobile</p>
+
+ </div>
+
+ <div class="sidebar"></div>
+
+ </div><!--/content-primary-->
+
+ <div class="content-primary">
+
+ <h2>Public Data Access</h2>
+ <p>SimpleDialog2 has a few publicly available data points:</p>
+ <ul data-role="listview" data-inset="true">
+ <li><h3>$.mobile.sdCurrentDialog</h3><p>The calling element of the currently open dialog (removed on close)</p></li>
+ <li><h3>$.mobile.sdLastInput</h3><p>The value from the input element in Button->Input mode</p></li>
+ </ul>
+ <p>Common function tasks:</p>
+ <ul data-role="listview" data-inset="true">
+ <li><h3>$.mobile.sdCurrentDialog.trigger('simpledialog', {'method':'close'});</h3><p>Immediatly close the open dialog</p></li>
+ <li><h3>$.mobile.sdCurrentDialog.trigger('simpledialog', {'method':'html', 'content':'--'});</h3><p>Replace the HTML in an *open* blank dialog with "content"</p></li>
+ <li><h3>$(document).trigger('simpledialog', {'method':'close'});</h3><p>Immediatly close all open dialogs (Note: nesting probably is a bad, bad idea)</p></li>
+ </ul>
+
+ <h2>Other Goodies</h2>
+ <p>When using the "blank" mode, you can include a link/button/element with rel='close' in the HTML - when clicked, it will automatically close the dialog.</p>
+
+ </div>
+
+ </div>
+ <div data-role="footer">
+ </div>
+</div>
+</html>
View
43 demos2/extras.js
@@ -0,0 +1,43 @@
+//do nothing for now.
+$(":jqmData(role)=page").live('pageinit', function(e) {
+ var currentPage = $(e.target),
+ footerAll = $('<div data-role="footer">' +
+ '<div data-role="controlgroup" data-type="horizontal">' +
+ '<a data-role="button" data-theme="a" rel="external" href="https://github.com/jtsage/jquery-mobile-simpledialog">GitHub Source</a>' +
+ '<a data-role="button" data-theme="a" rel="external" href="http://dev.jtsage.com/forums/">Support Forums</a>' +
+ '<a data-role="button" data-theme="a" rel="external" href="http://dev.jtsage.com/blog/">Blog</a>' +
+ '<a data-role="button" data-theme="a" rel="external" href="mailto:jtsage+datebox@gmail.com">Contact</a>' +
+ '<a data-role="button" data-theme="a" rel="external" href="http://jquerymobile.com/">jQueryMobile Homepage</a>' +
+ '</div></div>'),
+ sidebarsource =
+ $('<li data-role="list-divider">Overview</li>' +
+ '<li><a href="index.html">Introduction</a></li>' +
+ '<li><a href="install.html">Download &amp; Use</a></li>' +
+ '<li><a href="event.html">Methods, Events and Data</a></li>' +
+ '<li><a href="options.html">Options Matrix</a></li>' +
+ '<li data-theme="a">Operation Modes</li>' +
+ '<li><a href="button.html">Button / Input Mode</a></li>' +
+ '<li><a href="blank.html">Blank (Freeform) Mode</a></li>' +
+ '<li data-theme="a">Display Modes</li>' +
+ '<li><a href="popup.html">Standard Pop-up</a></li>' +
+ '<li><a href="dialog.html">jQM Dialog Page</a></li>' +
+ '<li><a href="fullscreen.html">Fullscreen Display</a></li>'),
+ sidebarstart = $('<ul data-corners="false" data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"></ul>');
+
+ if ( currentPage.jqmData('role') === 'page' ) {
+ var footer = currentPage.find('[data-role=footer]'),
+ sidebar = currentPage.find('div.sidebar'),
+ thisone = sidebarstart.clone();
+
+ footer.html(footerAll.trigger('create'));
+ currentPage.trigger('create');
+
+ if ( sidebar.length > 0 ) {
+ thisone.append(sidebarsource);
+ sidebar.append(thisone);
+ sidebar.find('ul').listview();
+ }
+ }
+
+});
+
View
96 demos2/fullscreen.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQueryMobile - SimpleDialog Demos</title>
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
+ <link type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css" rel="stylesheet" />
+ <link type="text/css" href="http://dev.jtsage.com/jQM-DateBox/css/demos.css" rel="stylesheet" />
+
+ <!-- NOTE: Script load order is significant! -->
+
+ <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
+ <script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
+ <script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog2.js"></script>
+ <script type="text/javascript" src="http://dev.jtsage.com/jQM-SimpleDialog/demos2/extras.js"></script>
+
+
+ <script type="text/javascript" src="http://dev.jtsage.com/gpretty/prettify.js"></script>
+ <link type="text/css" href="http://dev.jtsage.com/gpretty/prettify.css" rel="stylesheet" />
+ <script type="text/javascript">
+ $('div').live('pagecreate', function() {
+ prettyPrint()
+ });
+ </script>
+
+</head>
+<body>
+<div data-role="page" data-theme="c" id="fullscreen">
+ <div data-role="header">
+ <h1>jQueryMobile - SimpleDialog2</h1>
+ <a href="index.html" data-icon="home" data-iconpos="notext">Home</a>
+ </div>
+ <div data-role="content" data-theme="c">
+ <div class="content-secondary">
+
+ <div id="jqm-homeheader">
+ <h1 id="jqm-logo"><img src="jquery-logo-sd.png" alt="jQuery Mobile Framework :: SimpleDialog" /></h1>
+ <p>A Popup Dialog Box for jQueryMobile</p>
+
+ </div>
+
+ <div class="sidebar"></div>
+
+ </div><!--/content-primary-->
+
+ <div class="content-primary">
+
+ <h2>Full Screen Mode</h2>
+ <p>This shows the built in fullscreen mode. It is *not* a new page, so it does not affect the DOM cacheing in any way. Like the jQM Dialog mode, this acts on displays less than 400px wide unless 'fullScreenForce' is also true.</p>
+ <script type="text/javascript">
+ $(document).delegate('#fsbut', 'click', function() {
+ $('<div>').simpledialog2({
+ mode: 'blank',
+ headerText: 'Some Stuff',
+ headerClose: true,
+ fullScreen: true,
+ fullScreenForce: true,
+ blankContent :
+ "<ul data-role='listview'><li>Some</li><li>List</li><li>Items</li></ul>"+
+ "<a rel='close' data-role='button' href='#'>Close</a>"
+ })
+ });
+ </script>
+ <a href="#" id="fsbut" data-role="button">Open Dialog</a>
+ <strong>HTML</strong><pre class="prettyprint">
+&lt;a href="#" id="opendialog" data-role="button"&gt;Open Dialog&lt;/a&gt;</pre>
+
+ <strong>jQuery</strong><pre class="prettyprint">
+$(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.
+ $('&lt;div&gt;').simpledialog2({
+ mode: 'blank',
+ headerText: 'Some Stuff',
+ headerClose: true,
+ fullScreen: true,
+ fullScreenForce: true,
+ blankContent :
+ "&lt;ul data-role='listview'&gt;&lt;li&gt;Some&lt;/li&gt;&lt;li&gt;List&lt;/li&gt;&lt;li&gt;Items&lt;/li&gt;&lt;/ul&gt;"+
+ // NOTE: the use of rel="close" causes this button to close the dialog.
+ "&lt;a rel='close' data-role='button' href='#'&gt;Close&lt;/a&gt;"
+ })
+})</pre>
+
+
+
+ </div>
+
+
+ </div>
+ <div data-role="footer">
+ </div>
+</div>
+</html>
View
76 demos2/index.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQueryMobile - SimpleDialog Demos</title>
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
+ <link type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css" rel="stylesheet" />
+ <link type="text/css" href="http://dev.jtsage.com/jQM-DateBox/css/demos.css" rel="stylesheet" />
+
+ <!-- NOTE: Script load order is significant! -->
+
+ <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
+ <script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
+ <script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog2.js"></script>
+ <script type="text/javascript" src="http://dev.jtsage.com/jQM-SimpleDialog/demos2/extras.js"></script>
+
+
+ <script type="text/javascript" src="http://dev.jtsage.com/gpretty/prettify.js"></script>
+ <link type="text/css" href="http://dev.jtsage.com/gpretty/prettify.css" rel="stylesheet" />
+ <script type="text/javascript">
+ $('div').live('pagecreate', function() {
+ prettyPrint()
+ });
+ </script>
+
+</head>
+<body>
+<div data-role="page" data-theme="c" id="main">
+ <div data-role="header">
+ <h1>jQueryMobile - SimpleDialog2</h1>
+ <a href="index.html" data-icon="home" data-iconpos="notext">Home</a>
+ </div>
+ <div data-role="content" data-theme="c">
+ <div class="content-secondary">
+
+ <div id="jqm-homeheader">
+ <h1 id="jqm-logo"><img src="jquery-logo-sd.png" alt="jQuery Mobile Framework :: SimpleDialog" /></h1>
+ <p>A Popup Dialog Box for jQueryMobile</p>
+
+ </div>
+
+ <div class="sidebar"></div>
+
+ </div><!--/content-primary-->
+
+ <div class="content-primary">
+
+ <p>SimpleDialog2 is a re-imagining of the original SimpleDialog - it's purpose is to provide an easy programmers interface to dialog popups.</p>
+
+ <dl><dt>Multiple Operation Modes</dt>
+ <dd>Button List Mode - Generate a dialog with a list of buttons</dd>
+ <dd>Button Input Mode - Generate a dialog with a list of buttons and user input</dd>
+ <dd>Freeform Mode - Generate a dailog containing your own custom HTML source</dd>
+ </dl>
+
+ <dl><dt>Multiple Display Modes</dt>
+ <dd>Popup Mode - Pop the window "over" the current content<dd>
+ <dd>jQM Dialog - Use the native jQM dialog page interface</dd>
+ <dd>Fullscreen - Use a proprietary full viewport pop "over" method</dd>
+ </dl>
+
+ <dl><dt>Collect User Data</dd>
+ <dd>SimpleDialog2 has the ability to collect a user prompt and return it back to your script</dd>
+ </dl>
+
+ <dl><dt>Clean DOM Operation</dt>
+ <dd>Perhaps the biggest change from SimpleDialog - SimpleDialog2 takes great pains in cleaning itself completly from the DOM when it closes. These are *single* use dialogs.</dd>
+ </dl>
+ </div>
+
+ </div>
+ <div data-role="footer">
+ </div>
+</div>
+</html>
View
64 demos2/install.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQueryMobile - SimpleDialog Demos</title>
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
+ <link type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css" rel="stylesheet" />
+ <link type="text/css" href="http://dev.jtsage.com/jQM-DateBox/css/demos.css" rel="stylesheet" />
+
+ <!-- NOTE: Script load order is significant! -->
+
+ <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
+ <script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
+ <script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog2.js"></script>
+ <script type="text/javascript" src="http://dev.jtsage.com/jQM-SimpleDialog/demos2/extras.js"></script>
+
+
+ <script type="text/javascript" src="http://dev.jtsage.com/gpretty/prettify.js"></script>
+ <link type="text/css" href="http://dev.jtsage.com/gpretty/prettify.css" rel="stylesheet" />
+ <script type="text/javascript">
+ $('div').live('pagecreate', function() {
+ prettyPrint()
+ });
+ </script>
+
+</head>
+<body>
+<div data-role="page" data-theme="c" id="install">
+ <div data-role="header">
+ <h1>jQueryMobile - SimpleDialog2</h1>
+ <a href="index.html" data-icon="home" data-iconpos="notext">Home</a>
+ </div>
+ <div data-role="content" data-theme="c">
+ <h2>Download and Use</h2>
+
+ <dl>
+ <dt>Reqirements</dt>
+ <dd><a href="http://jquery.com/">jQuery 1.6.4+</a></dd>
+ <dd><a href="http://jquerymobile.com">jQueryMobile 1.0</a></dd>
+ </dl>
+ <dl>
+ <dt>Download Links - Current Version (hotlinking allowed)</dt>
+ <dd><a rel="external" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog2.js">Uncompressed, Development Version Plugin</a></dd>
+ <dd><a rel="external" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.css">Uncompressed, Development CSS Styles</a></dd>
+ <dd><br /><a rel="external" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog2.min.js">Compressed, Production Version Plugin</a></dd>
+ <dd><a rel="external" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css">Compressed, Production CSS Styles</a></dd>
+ <dd><br /><strong>Note:</strong>The current version is also my first real stop on the development path. If you have a mission critical app, it is *highly* recommended that you either link to the compressed version, or better yet, a copy on your own server</dd>
+ </dl>
+ <dl>
+ <dt>Significant Loading Order</dt>
+ <dd>Loading Order is significant, a typical &lt;head&gt; might look like:</dd>
+ <dd><pre class="prettyprint">&lt;link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /&gt;
+&lt;link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css" /&gt;
+
+&lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"&gt;&lt;/script&gt;
+&lt;script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"&gt;&lt;/script&gt;
+&lt;script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog2.min.js"&gt;&lt;/script&gt;</pre></dd>
+ </dl>
+ </div>
+ <div data-role="footer">
+ </div>
+</div>
+</html>
View
BIN demos2/jquery-logo-sd.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
272 demos2/options.html
@@ -0,0 +1,272 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQueryMobile - SimpleDialog Demos</title>
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
+ <link type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css" rel="stylesheet" />
+ <link type="text/css" href="http://dev.jtsage.com/jQM-DateBox/css/demos.css" rel="stylesheet" />
+
+ <!-- NOTE: Script load order is significant! -->
+
+ <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
+ <script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
+ <script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog2.js"></script>
+ <script type="text/javascript" src="http://dev.jtsage.com/jQM-SimpleDialog/demos2/extras.js"></script>
+
+
+ <script type="text/javascript" src="http://dev.jtsage.com/gpretty/prettify.js"></script>
+ <link type="text/css" href="http://dev.jtsage.com/gpretty/prettify.css" rel="stylesheet" />
+ <script type="text/javascript">
+ $('div').live('pagecreate', function() {
+ prettyPrint()
+ });
+ </script>
+
+</head>
+<body>
+<div data-role="page" data-theme="c" id="opts">
+ <div data-role="header">
+ <h1>jQueryMobile - SimpleDialog2</h1>
+ <a href="index.html" data-icon="home" data-iconpos="notext">Home</a>
+ </div>
+ <div data-role="content" data-theme="c">
+ <h2>Available Options</h2>
+
+ <ul data-role="listview" data-inset="true" class="options" data-dividertheme="a">
+ <li><h3>mode</h3>
+ <dl data-role="none" class="option"><dt>Type:</dt><dd>String</dd></dl>
+ <dl data-role="none" class="option"><dt>Default:</dt><dd>'blank'</dd></dl>
+ <p class="desc">Mode of operation.</p>
+ <p><strong>Valid options:</strong> ['blank', 'button']</p>
+ </li>
+ <li data-role="list-divider">Themeing</li>
+ <li><h3>themeDialog</h3>
+ <dl data-role="none" class="option"><dt>Type:</dt><dd>String</dd></dl>
+ <dl data-role="none" class="option"><dt>Default:</dt><dd>'b'</dd></dl>
+ <dl data-role="none" class="option"><dt>Modes:</dt><dd>all</dd></dl>
+ <p class="desc">Theme for the dialog.</p>
+ </li>
+ <li><h3>themeHeader</h3>
+ <dl data-role="none" class="option"><dt>Type:</dt><dd>String</dd></dl>
+ <dl data-role="none" class="option"><dt>Default:</dt><dd>'b'</dd></dl>
+ <dl data-role="none" class="option"><dt>Modes:</dt><dd>all</dd></dl>
+ <p class="desc">Theme for the header, if used.</p>
+ </li>
+ <li><h3>themeInput</h3>
+ <dl data-role="none" class="option"><dt>Type:</dt><dd>String</dd></dl>
+ <dl data-role="none" class="option"><dt>Default:</dt><dd>'e'</dd></dl>
+ <dl data-role="none" class="option"><dt>Modes:</dt><dd>button</dd></dl>
+ <p class="desc">Theme for the input element in Button->Input mode.</p>
+ </li>
+ <li><h3>themeButtonDefault</h3>
+ <dl data-role="none" class="option"><dt>Type:</dt><dd>String</dd></dl>
+ <dl data-role="none" class="option"><dt>Default:</dt><dd>'a'</dd></dl>
+ <dl data-role="none" class="option"><dt>Modes:</dt><dd>button</dd></dl>
+ <p class="desc">Default theme for the buttons in Button->Input mode.</p>
+ </li>
+ <li><h3>themeDialog</h3>
+ <dl data-role="none" class="option"><dt>Type:</dt><dd>Boolean</dd></dl>
+ <dl data-role="none" class="option"><dt>Default:</dt><dd>false</dd></dl>
+ <dl data-role="none" class="option"><dt>Modes:</dt><dd>all</dd></dl>
+ <p class="desc">Theme for the dialog.</p>
+ </li>
+ <li><h3>animate</h3>
+ <dl data-role="none" class="option"><dt>Type:</dt><dd>Boolean</dd></dl>
+ <dl data-role="none" class="option"><dt>Default:</dt><dd>true</dd></dl>
+ <dl data-role="none" class="option"><dt>Modes:</dt><dd>all</dd></dl>
+ <p class="desc">Use animations on transition.</p>
+ </li>
+ <li><h3>transition</h3>
+ <dl data-role="none" class="option"><dt>Type:</dt><dd>String</dd></dl>
+ <dl data-role="none" class="option"><dt>Default:</dt><dd>'pop'</dd></dl>
+ <dl data-role="none" class="option"><dt>Modes:</dt><dd>all</dd></dl>
+ <p class="desc">Animation style for transitions.</p>
+ </li>
+ <li><h3>width</h3>
+ <dl data-role="none" class="option"><dt>Type:</dt><dd>String</dd></dl>
+ <dl data-role="none" class="option"><dt>Default:</dt><dd>'280px'</dd></dl>
+ <dl data-role="none" class="option"><dt>Modes:</dt><dd>all</dd></dl>
+ <p class="desc">Width of the dialog popup.</p>
+ </li>
+ <li><h3>top</h3>
+ <dl data-role="none" class="option"><dt>Type:</dt><dd>Number</dd></dl>
+ <dl data-role="none" class="option"><dt>Default:</dt><dd>false</dd></dl>
+ <dl data-role="none" class="option"><dt>Modes:</dt><dd>all</dd></dl>
+ <p class="desc">Force position of top of popup.</p>
+ </li>
+ <li><h3>left</h3>
+ <dl data-role="none" class="option"><dt>Type:</dt><dd>Number</dd></dl>
+ <dl data-role="none" class="option"><dt>Default:</dt><dd>false</dd></dl>
+ <dl data-role="none" class="option"><dt>Modes:</dt><dd>all</dd></dl>
+ <p class="desc">Force position of left of popup.</p>
+ </li>
+ <li data-role="list-divider">Header Options</li>
+ <li><h3>headerText</h3>
+ <dl data-role="none" class="option"><dt>Type:</dt><dd>String</dd></dl>
+ <dl data-role="none" class="option"><dt>Default:</dt><dd>false</dd></dl>
+ <dl data-role="none" class="option"><dt>Modes:</dt><dd>all</dd></dl>
+ <p class="desc">Text to use in the header. If this, and headerButton are FALSE, no header is used.</p>
+ </li>
+ <li><h3>headerClose</h3>
+ <dl data-role="none" class="option"><dt>Type:</dt><dd>Boolean</dd></dl>
+ <dl data-role="none" class="option"><dt>Default:</dt><dd>false</dd></dl>
+ <dl data-role="none" class="option"><dt>Modes:</dt><dd>all</dd></dl>
+ <p class="desc">Show a close button in the header. If this, and headerText are FALSE, no header is used.</p>
+ </li>
+ <li data-role="list-divider">Display Options</li>
+ <li><h3>dialogAllow</h3>
+ <dl data-role="none" class="option"><dt>Type:</dt><dd>Boolean</dd></dl>
+ <dl data-role="none" class="option"><dt>Default:</dt><dd>false</dd></dl>
+ <dl data-role="none" class="option"><dt>Modes:</dt><dd>all</dd></dl>
+ <p class="desc">Allow use of jQM native dialogs if screen size &lt; 400px.</p>
+ </li>
+ <li><h3>dialogForce</h3>
+ <dl data-role="none" class="option"><dt>Type:</dt><dd>Boolean</dd></dl>
+ <dl data-role="none" class="option"><dt>Default:</dt><dd>false</dd></dl>
+ <dl data-role="none" class="option"><dt>Modes:</dt><dd>all</dd></dl>
+ <p class="desc">Always use the jQM native dialogs.</p>
+ </li>
+ <li><h3>fullScreen</h3>
+ <dl data-role="none" class="option"><dt>Type:</dt><dd>Boolean</dd></dl>
+ <dl data-role="none" class="option"><dt>Default:</dt><dd>false</dd></dl>
+ <dl data-role="none" class="option"><dt>Modes:</dt><dd>all</dd></dl>
+ <p class="desc">Allow the use of the custom full screen display is screen size &lt; 400px.</p>
+ </li>
+ <li><h3>fullScreenForce</h3>
+ <dl data-role="none" class="option"><dt>Type:</dt><dd>Boolean</dd></dl>
+ <dl data-role="none" class="option"><dt>Default:</dt><dd>false</dd></dl>
+ <dl data-role="none" class="option"><dt>Modes:</dt><dd>all</dd></dl>
+ <p class="desc">Always use the custom full screen display</p>
+ </li>
+ <li><h3>showModal</h3>
+ <dl data-role="none" class="option"><dt>Type:</dt><dd>Boolean</dd></dl>
+ <dl data-role="none" class="option"><dt>Default:</dt><dd>true</dd></dl>
+ <dl data-role="none" class="option"><dt>Modes:</dt><dd>all</dd></dl>
+ <p class="desc">Blank the background when using popup mode, modal style.</p>
+ </li>
+ <li><h3>forceInput</h3>
+ <dl data-role="none" class="option"><dt>Type:</dt><dd>Boolean</dd></dl>
+ <dl data-role="none" class="option"><dt>Default:</dt><dd>false</dd></dl>
+ <dl data-role="none" class="option"><dt>Modes:</dt><dd>all</dd></dl>
+ <p class="desc">Do not close dialog when clicking outside the dialog.</p>
+ </li>
+ <li data-role="list-divider">Internal Operation</li>
+ <li><h3>clickEvent</h3>
+ <dl data-role="none" class="option"><dt>Type:</dt><dd>String</dd></dl>
+ <dl data-role="none" class="option"><dt>Default:</dt><dd>'click'</dd></dl>
+ <dl data-role="none" class="option"><dt>Modes:</dt><dd>all</dd></dl>
+ <p class="desc">Event to bind all actions to (including header close button, buttons in button mode, and outside dialog trap).</p>
+ </li>
+ <li><h3>zIndex</h3>
+ <dl data-role="none" class="option"><dt>Type:</dt><dd>Number</dd></dl>
+ <dl data-role="none" class="option"><dt>Default:</dt><dd>500</dd></dl>
+ <dl data-role="none" class="option"><dt>Modes:</dt><dd>all</dd></dl>
+ <p class="desc">z-Index of the popup element (For fixed headers/footers, this might need to be extreamly high).</p>
+ </li>
+ <li><h3>resizeListener</h3>
+ <dl data-role="none" class="option"><dt>Type:</dt><dd>Boolean</dd></dl>
+ <dl data-role="none" class="option"><dt>Default:</dt><dd>true</dd></dl>
+ <dl data-role="none" class="option"><dt>Modes:</dt><dd>all</dd></dl>
+ <p class="desc">Listen to resize events, and reposition accordingly (Desktop operation really).</p>
+ </li>
+ <li data-role="list-divider">Internal Operation</li>
+ <li><h3>callbackOpen</h3>
+ <dl data-role="none" class="option"><dt>Type:</dt><dd>Function</dd></dl>
+ <dl data-role="none" class="option"><dt>Default:</dt><dd>false</dd></dl>
+ <dl data-role="none" class="option"><dt>Modes:</dt><dd>all</dd></dl>
+ <p class="desc">Function to run when the dialog opens.</p>
+ </li>
+ <li><h3>callbackClose</h3>
+ <dl data-role="none" class="option"><dt>Type:</dt><dd>Function</dd></dl>
+ <dl data-role="none" class="option"><dt>Default:</dt><dd>false</dd></dl>
+ <dl data-role="none" class="option"><dt>Modes:</dt><dd>all</dd></dl>
+ <p class="desc">Function to run when the dialog closes, before cleanup is done.</p>
+ </li>
+ <li data-role="list-divider">Blank Mode Options</li>
+ <li><h3>blankContent</h3>
+ <dl data-role="none" class="option"><dt>Type:</dt><dd>String</dd></dl>
+ <dl data-role="none" class="option"><dt>Default:</dt><dd>false</dd></dl>
+ <dl data-role="none" class="option"><dt>Modes:</dt><dd>blank</dd></dl>
+ <p class="desc">A String of the HTML you wish to use in the blank/freeform mode. This may also be a jQuery object.</p>
+ </li>
+ <li data-role="list-divider">Button Mode Options</li>
+ <li><h3>buttonPrompt</h3>
+ <dl data-role="none" class="option"><dt>Type:</dt><dd>String</dd></dl>
+ <dl data-role="none" class="option"><dt>Default:</dt><dd>false</dd></dl>
+ <dl data-role="none" class="option"><dt>Modes:</dt><dd>button</dd></dl>
+ <p class="desc">A string to use as a prompt in the dialog, HTML allowed, wrapper in a &lt;p&gt;</p>
+ </li>
+ <li><h3>buttonInput</h3>
+ <dl data-role="none" class="option"><dt>Type:</dt><dd>Boolean</dd></dl>
+ <dl data-role="none" class="option"><dt>Default:</dt><dd>false</dd></dl>
+ <dl data-role="none" class="option"><dt>Modes:</dt><dd>button</dd></dl>
+ <p class="desc">Show an input box in the dialog.</p>
+ </li>
+ <li><h3>buttonPassword</h3>
+ <dl data-role="none" class="option"><dt>Type:</dt><dd>Boolean</dd></dl>
+ <dl data-role="none" class="option"><dt>Default:</dt><dd>false</dd></dl>
+ <dl data-role="none" class="option"><dt>Modes:</dt><dd>button</dd></dl>
+ <p class="desc">Show an input box of type password in the dialog - buttonInput must also be TRUE.</p>
+ </li>
+ <li><h3>button</h3>
+ <dl data-role="none" class="option"><dt>Type:</dt><dd>Boolean</dd></dl>
+ <dl data-role="none" class="option"><dt>Default:</dt><dd>false</dd></dl>
+ <dl data-role="none" class="option"><dt>Modes:</dt><dd>button</dd></dl>
+ <p class="desc">An object of buttons - see below for individual button options.</p>
+ </li>
+ <li data-role="list-divider">Button Object Options</li>
+ <li><h3>id</h3>
+ <dl data-role="none" class="option"><dt>Type:</dt><dd>String</dd></dl>
+ <dl data-role="none" class="option"><dt>Default:</dt><dd>false</dd></dl>
+ <dl data-role="none" class="option"><dt>Modes:</dt><dd>button object</dd></dl>
+ <p class="desc">The HTML ID of the button. If false, one is generated.</p>
+ </li>
+ <li><h3>theme</h3>
+ <dl data-role="none" class="option"><dt>Type:</dt><dd>String</dd></dl>
+ <dl data-role="none" class="option"><dt>Default:</dt><dd>inherited</dd></dl>
+ <dl data-role="none" class="option"><dt>Modes:</dt><dd>button object</dd></dl>
+ <p class="desc">The theme of the button.</p>
+ </li>
+ <li><h3>icon</h3>
+ <dl data-role="none" class="option"><dt>Type:</dt><dd>String</dd></dl>
+ <dl data-role="none" class="option"><dt>Default:</dt><dd>'check'</dd></dl>
+ <dl data-role="none" class="option"><dt>Modes:</dt><dd>button object</dd></dl>
+ <p class="desc">The icon of the button.</p>
+ </li>
+ <li><h3>iconpos</h3>
+ <dl data-role="none" class="option"><dt>Type:</dt><dd>String</dd></dl>
+ <dl data-role="none" class="option"><dt>Default:</dt><dd>'left'</dd></dl>
+ <dl data-role="none" class="option"><dt>Modes:</dt><dd>button object</dd></dl>
+ <p class="desc">The position of the icon on the button.</p>
+ </li>
+ <li><h3>corners</h3>
+ <dl data-role="none" class="option"><dt>Type:</dt><dd>Boolean</dd></dl>
+ <dl data-role="none" class="option"><dt>Default:</dt><dd>true</dd></dl>
+ <dl data-role="none" class="option"><dt>Modes:</dt><dd>button object</dd></dl>
+ <p class="desc">If true, round the corners of the button.</p>
+ </li>
+ <li><h3>shadow</h3>
+ <dl data-role="none" class="option"><dt>Type:</dt><dd>Boolean</dd></dl>
+ <dl data-role="none" class="option"><dt>Default:</dt><dd>true</dd></dl>
+ <dl data-role="none" class="option"><dt>Modes:</dt><dd>button object</dd></dl>
+ <p class="desc">If true, button will have a drop shadow.</p>
+ </li>
+ <li><h3>close</h3>
+ <dl data-role="none" class="option"><dt>Type:</dt><dd>Boolean</dd></dl>
+ <dl data-role="none" class="option"><dt>Default:</dt><dd>true</dd></dl>
+ <dl data-role="none" class="option"><dt>Modes:</dt><dd>button object</dd></dl>
+ <p class="desc">Clicking this button will close the dialog.</p>
+ </li>
+ <li><h3>click</h3>
+ <dl data-role="none" class="option"><dt>Type:</dt><dd>Function</dd></dl>
+ <dl data-role="none" class="option"><dt>Modes:</dt><dd>button object</dd></dl>
+ <p class="desc">A function to run when this button is clicked. If it returns false, the dialog will not close.</p>
+ </li>
+ </ul>
+ </div>
+ <div data-role="footer">
+ </div>
+</div>
+</html>
View
92 demos2/popup.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQueryMobile - SimpleDialog Demos</title>
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
+ <link type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css" rel="stylesheet" />
+ <link type="text/css" href="http://dev.jtsage.com/jQM-DateBox/css/demos.css" rel="stylesheet" />
+
+ <!-- NOTE: Script load order is significant! -->
+
+ <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
+ <script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
+ <script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog2.js"></script>
+ <script type="text/javascript" src="http://dev.jtsage.com/jQM-SimpleDialog/demos2/extras.js"></script>
+
+
+ <script type="text/javascript" src="http://dev.jtsage.com/gpretty/prettify.js"></script>
+ <link type="text/css" href="http://dev.jtsage.com/gpretty/prettify.css" rel="stylesheet" />
+ <script type="text/javascript">
+ $('div').live('pagecreate', function() {
+ prettyPrint()
+ });
+ </script>
+
+</head>
+<body>
+<div data-role="page" data-theme="c" id="popper">
+ <div data-role="header">
+ <h1>jQueryMobile - SimpleDialog2</h1>
+ <a href="index.html" data-icon="home" data-iconpos="notext">Home</a>
+ </div>
+ <div data-role="content" data-theme="c">
+ <div class="content-secondary">
+
+ <div id="jqm-homeheader">
+ <h1 id="jqm-logo"><img src="jquery-logo-sd.png" alt="jQuery Mobile Framework :: SimpleDialog" /></h1>
+ <p>A Popup Dialog Box for jQueryMobile</p>
+
+ </div>
+
+ <div class="sidebar"></div>
+
+ </div><!--/content-primary-->
+
+ <div class="content-primary">
+
+ <h2>Popup Mode</h2>
+ <p>This shows standard, default popup only mode.</p>
+ <script type="text/javascript">
+ $(document).delegate('#popupbut', 'click', function() {
+ $('<div>').simpledialog2({
+ mode: 'blank',
+ headerText: 'Some Stuff',
+ headerClose: true,
+ blankContent :
+ "<ul data-role='listview'><li>Some</li><li>List</li><li>Items</li></ul>"+
+ "<a rel='close' data-role='button' href='#'>Close</a>"
+ })
+ });
+ </script>
+ <a href="#" id="popupbut" data-role="button">Open Dialog</a>
+ <strong>HTML</strong><pre class="prettyprint">
+&lt;a href="#" id="opendialog" data-role="button"&gt;Open Dialog&lt;/a&gt;</pre>
+
+ <strong>jQuery</strong><pre class="prettyprint">
+$(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.
+ $('&lt;div&gt;').simpledialog2({
+ mode: 'blank',
+ headerText: 'Some Stuff',
+ headerClose: true,
+ blankContent :
+ "&lt;ul data-role='listview'&gt;&lt;li&gt;Some&lt;/li&gt;&lt;li&gt;List&lt;/li&gt;&lt;li&gt;Items&lt;/li&gt;&lt;/ul&gt;"+
+ // NOTE: the use of rel="close" causes this button to close the dialog.
+ "&lt;a rel='close' data-role='button' href='#'&gt;Close&lt;/a&gt;"
+ })
+})</pre>
+
+
+
+ </div>
+
+
+ </div>
+ <div data-role="footer">
+ </div>
+</div>
+</html>
View
3 index.html
@@ -40,6 +40,9 @@ <h1 id="jqm-logo"><img src="/jQM-SimpleDialog/demos/jquery-logo-sd.png" alt="jQu
<p class="intro">SimpleDialog aims to be a replacement for javascript dialog(), written for jQM.</p>
+ <p>Note: This plugin has largely been supserseeded by:</p>
+ <a href="demos2/" rel="external" data-role="button">SimpleDialog2</a>
+
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
<li data-role="list-divider">Overview</li>
<li data-theme="a">Intro &amp; Features</li>

0 comments on commit 382ae2a

Please sign in to comment.
Something went wrong with that request. Please try again.