├── History.md ├── LICENSE ├── README.md ├── build ├── .gitignore ├── README.md ├── make-all.sh └── make.pl ├── css ├── README.md └── jquery.mobile.simpledialog.css ├── demos ├── README.md ├── blank.html ├── bool.html ├── config.html ├── event.html ├── install.html ├── jquery-logo-sd.png └── string.html ├── demos2 ├── blank.html ├── blankin.html ├── button.html ├── buttonapi.html ├── dialog.html ├── event.html ├── extras.js ├── fullscreen.html ├── index.html ├── install.html ├── jquery-logo-sd.png ├── options.html └── popup.html ├── external ├── LICENSE.TXT ├── README.md └── yuicompressor-2.4.6.jar ├── index.html ├── js ├── README.md ├── jquery.mobile.simpledialog.js └── jquery.mobile.simpledialog2.js ├── screens ├── README.md ├── SimpleDialog-Boolean-DialogPage.png ├── SimpleDialog-Boolean-Popup.png ├── SimpleDialog-String-DialogPage.png └── SimpleDialog-String-Popup.png └── tests ├── .gitignore ├── 2datebox.html ├── 2dev.html ├── README.md └── dev.html /History.md: -------------------------------------------------------------------------------- 1 | 2 | jQM-1.0.0 / 2011-12-13 3 | ====================== 4 | 5 | * Contributors: fminuti, glogiotatidis, ray007, asgeo1, chasetec 6 | * Add two options: fullScreen and fullScreenAlways to allow an option other than dialog mode 7 | * Add button options: id, hidden, insertSeperator; Add callbacks: onCreated, onOpened, onClosed, onShown - thanks Joro 8 | * Add option: clickEvent - allow use of vclick or click, dependant on user preference 9 | * Add option in blank mode to use [rel="close"] for a link/button/element to auto-close 10 | * Add options "animate" and "transition" 11 | * Add option "cleanOnClose" to completely remove self from DOM on close - for single use dialogs 12 | * allow "fullHTML" config option to be a HTMLElement or a jQuery object instead of string-only 13 | * Add option "subTitle" for a second line of text 14 | * Add "inputPassword" option 15 | * Add "blank" mode - raw HTML fed into the dialog wrapper 16 | * Update demo with selectbox addition method (the reason I wrote the "string" mode 17 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | jQuery Mobile Framework : plugin to provide a simple popup (modal) or jQMdialog (page) Dialog widget. 2 | Copyright (c) JTSage 3 | CC 3.0 Attribution. May be relicensed without permission/notifcation. 4 | https://github.com/jtsage/jquery-mobile-simpledialog 5 | 6 | You are free: 7 | * to Share - to copy, distribute and transmit the work 8 | * to Remix - to adapt the work 9 | * to make commercial use of the work 10 | 11 | Under the following conditions: 12 | * Attribution - You must attribute JQM-DateBox to JTSage (with link). 13 | 14 | With the understanding that: 15 | 16 | * Waiver - Any of the above conditions can be waived if you get permission from the copyright holder. 17 | * Public Domain - Where the work or any of its elements is in the public domain under applicable law, that status is in no way affected by the license. 18 | 19 | * Other Rights - In no way are any of the following rights affected by the license: 20 | * Your fair dealing or fair use rights, or other applicable copyright exceptions and limitations; 21 | * The author's moral rights; 22 | * Rights other persons may have either in the work itself or in how the work is used, such as publicity or privacy rights. 23 | 24 | * Notice - For any reuse or distribution, you must make clear to others the license terms of this work. The best way to do this is with a link to this web page. 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | DEPRECIATION NOTICE 2 | =================== 3 | 4 | Sadly, this plugin is pretty mcuh dead. As of jQM 1.5.0, dialog is going away. 5 | 6 | In it's place, a new project: [jquery-mobile-windows](https://github.com/jtsage/jquery-mobile-windows/) 7 | 8 | -------------------------------------------------------------------------------- /build/.gitignore: -------------------------------------------------------------------------------- 1 | current_build.txt 2 | jquery.mobile.simpledialog.min.js 3 | jquery.mobile.simpledialog2.min.js 4 | jquery.mobile.simpledialog.min.css 5 | -------------------------------------------------------------------------------- /build/README.md: -------------------------------------------------------------------------------- 1 | jQuery-Mobile-SimpleDialog 2 | ========================== 3 | 4 | SimpleDialog is a replacement for javascript dialog() 5 | 6 | This folder contains the pre-built scripts for SimpleDialog, and the build script 7 | 8 | **NOTE:** Up-to-date versions are always available to link to, 9 | at http://dev.jtsage.com/cdb/simpledialog/latest/ 10 | 11 | Varients built 12 | -------------- 13 | * Minimized version of the combined script 14 | 15 | Usage 16 | ----- 17 | 18 | Run **make.pl** with one of the following targets: 19 | 20 | * _all_ : Build all script varients 21 | 22 | * _check_ : Check build status 23 | * _clean_ : Remove all built scripts 24 | -------------------------------------------------------------------------------- /build/make-all.sh: -------------------------------------------------------------------------------- 1 | ./make.pl all 2 | ./make.pl all 1.0.0 && rm *.bac && mv jquery.mobile.simpledialog*1.0.0* ../../cdn/simpledialog/1.0.0/ 3 | ./make.pl all 1.0.1 && rm *.bac && mv jquery.mobile.simpledialog*1.0.1* ../../cdn/simpledialog/1.0.1/ 4 | ./make.pl all 1.1.0 && rm *.bac && mv jquery.mobile.simpledialog*1.1.0* ../../cdn/simpledialog/1.1.0/ 5 | -------------------------------------------------------------------------------- /build/make.pl: -------------------------------------------------------------------------------- 1 | #!/usr/bin/perl -w 2 | 3 | $javapath = `which java`; 4 | chomp $javapath; 5 | $version = ''; 6 | 7 | $slugtext = "/*\n * jQuery Mobile Framework : plugin to provide a simple Dialog widget.\n * Copyright (c) JTSage\n * CC 3.0 Attribution. May be relicensed without permission/notifcation.\n * https://github.com/jtsage/jquery-mobile-simpledialog\n */\n"; 8 | 9 | @files = ( 10 | 'jquery.mobile.simpledialog.min.js', 11 | 'jquery.mobile.simpledialog2.min.js', 12 | 'jquery.mobile.simpledialog.min.css'); 13 | 14 | if ( $javapath eq '' ) { 15 | die "Java not found, can not continue\n"; 16 | } 17 | 18 | if ( $ARGV[0] ) { 19 | 20 | if ( $ARGV[0] eq 'clean' ) { 21 | print "Cleaning up old javascript files... "; 22 | foreach ( @files ) { 23 | unlink($_); 24 | } 25 | print "DONE.\n"; 26 | } 27 | elsif ( $ARGV[0] eq 'all' ) { 28 | if ( defined($ARGV[1]) ) { 29 | $version = "-".$ARGV[1]; 30 | } 31 | print "Making all usual variants... ($version)\n"; 32 | make_master(); 33 | $last = (stat "../js/jquery.mobile.simpledialog.js")[9]; 34 | open OUTFILE, ">current_build.txt"; 35 | print OUTFILE $last; 36 | close OUTFILE; 37 | print "BUILD FINISHED.\n"; 38 | } 39 | elsif ( $ARGV[0] eq 'check' ) { 40 | $last = (stat "../js/jquery.mobile.simpledialog.js")[9]; 41 | $lastmod = ( stat "current_build.txt" )[9]; 42 | $allhere = 1; 43 | $allcurrent = 1; 44 | open INFILE, "; 46 | close INFILE; 47 | if ( $lines[0] != $last ) { 48 | print "Built Scripts are OLD, run './make.pl all'\n"; 49 | } else { 50 | foreach ( @files ) { 51 | if ( ! -e $_ ) { $allhere = 0; } 52 | } 53 | if ( !$allhere ) { 54 | print "Some Scripts are MISSING, run './make.pl all'\n"; 55 | } else { 56 | foreach ( @files ) { 57 | $thismod = ( stat $_ )[9]; 58 | if ( $thismod > $lastmod ) { $allcurrent = 0; } 59 | } 60 | if ( !$allcurrent ) { 61 | print "Some Scripts appear modified since last build, run ./make.pl all\n"; 62 | } else { 63 | print "Build scripts appear to be CURRENT.\n"; 64 | } 65 | } 66 | } 67 | } 68 | else { 69 | show_usage(); 70 | } 71 | 72 | } else { 73 | show_usage(); 74 | } 75 | 76 | sub show_usage { 77 | print "\nDateBox Build Script\n"; 78 | print "--------------------\n"; 79 | print "Targets: (./make.pl )\n"; 80 | print " all :-: Build all scripts\n"; 81 | print " usage :-: Show this information\n"; 82 | print " clean :-: Clean the build directory\n"; 83 | print " check :-: Check build status of scripts\n\n"; 84 | } 85 | 86 | sub do_slug { 87 | local @ARGV = ($_[0]); 88 | local $^I = '.bac'; 89 | while(<>){ 90 | if ($. == 1) { 91 | print "$slugtext$/"; 92 | print; 93 | } else { 94 | print; 95 | } 96 | } 97 | } 98 | 99 | sub make_master { 100 | if ( $version ne '' ) { 101 | system("cp", "../js/jquery.mobile.simpledialog.js", "jquery.mobile.simpledialog".$version.".js"); 102 | system("cp", "../js/jquery.mobile.simpledialog2.js", "jquery.mobile.simpledialog2".$version.".js"); 103 | system("cp", "../css/jquery.mobile.simpledialog.css", "jquery.mobile.simpledialog".$version.".css"); 104 | } 105 | print "Build :-: Compressed Script... "; 106 | print "compressing... "; 107 | system($javapath, "-jar", "../external/yuicompressor-2.4.6.jar", "-o", "./jquery.mobile.simpledialog".$version.".min.js", "../js/jquery.mobile.simpledialog.js"); 108 | system($javapath, "-jar", "../external/yuicompressor-2.4.6.jar", "-o", "./jquery.mobile.simpledialog2".$version.".min.js", "../js/jquery.mobile.simpledialog2.js"); 109 | print "DONE.\n"; 110 | print "Build :-: CSS File... "; 111 | print "compressing... "; 112 | system($javapath, "-jar", "../external/yuicompressor-2.4.6.jar", "-o", "./jquery.mobile.simpledialog".$version.".min.css", "../css/jquery.mobile.simpledialog.css"); 113 | do_slug("./jquery.mobile.simpledialog".$version.".min.js"); 114 | do_slug("./jquery.mobile.simpledialog2".$version.".min.js"); 115 | do_slug("./jquery.mobile.simpledialog".$version.".min.css"); 116 | print "DONE.\n"; 117 | } 118 | 119 | 120 | # print 'Usage'; } 121 | -------------------------------------------------------------------------------- /css/README.md: -------------------------------------------------------------------------------- 1 | jQuery-Mobile-SimpleDialog 2 | ========================== 3 | 4 | Master SimpleDialog css file. All development happens here. 5 | -------------------------------------------------------------------------------- /css/jquery.mobile.simpledialog.css: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery Mobile Framework : plugin to provide a simple Dialog widget. 3 | * Copyright (c) JTSage 4 | * CC 3.0 Attribution. May be relicensed without permission/notifcation. 5 | * https://github.com/jtsage/jquery-mobile-simpledialog 6 | */ 7 | 8 | /* Shared Styles */ 9 | 10 | .ui-simpledialog-header h4 { margin-top: 5px; margin-bottom: 5px; text-align: center; } 11 | .ui-simpledialog-container { border: 5px solid #111 !important; width:85%; max-width:500px;} 12 | .ui-simpledialog-screen { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } 13 | .ui-simpledialog-hidden { display: none; } 14 | .ui-simpledialog-input { width: 85% !important; display: block !important; margin-left: auto; margin-right: auto;} 15 | .ui-simpledialog-screen-modal { background-color: black; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80); } 16 | .ui-simpledialog-subtitle { text-align: center; } 17 | .ui-simpledialog-controls .buttons-separator {min-height: .6em;} 18 | .ui-simpledialog-controls .button-hidden { display:none; } 19 | 20 | .ui-dialog .ui-simpledialog-container { border: none !important; } 21 | .ui-dialog-simpledialog .ui-content { padding: 5px !important;} 22 | -------------------------------------------------------------------------------- /demos/README.md: -------------------------------------------------------------------------------- 1 | jQuery-Mobile-SimpleDialog 2 | ========================== 3 | 4 | Demo Files. 5 | -------------------------------------------------------------------------------- /demos/blank.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | jQueryMobile - SimpleDialog Demos 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 25 | 26 | 27 | 28 |
29 |
30 |

jQueryMobile - SimpleDialog

31 |
32 |
33 |
34 | 35 |
36 |

jQuery Mobile Framework :: SimpleDialog

37 |

A Popup Dialog Box for jQueryMobile

38 | 39 |
40 | 41 |

SimpleDialog aims to be a replacement for javascript dialog(), written for jQM.

42 | 43 | 54 | 55 |
56 | 57 |
58 | 59 |

Button to open custom HTML dialog

60 |

note you are size limited to about 280px wide (unless you mess with the CSS directly.
61 | You can also later change the contents of fullHTML - simple change it to whatever you like: 62 | 

$('#simpleraw').data('simpledialog').options.fullHTML = "..."
63 | then, call the refresh function: 64 | 
$('#simpleraw').simpledialog('refresh');
65 |

66 | 79 | Open Dialog 80 | HTML
 81 | <a href="#" id="dialoglink" data-role="button">Open Dialog</a>
82 | 83 | jQuery
 84 | $(document).delegate('#simpleraw', 'click', function() {
 85 |     $(this).simpledialog({
 86 |         'mode' : 'blank',
 87 |         'prompt': false,
 88 |         'forceInput': false,
 89 |         'useModal':true,
 90 |         'fullHTML' : 
 91 |             "<ul data-role='listview'><li>Some</li><li>List</li><li>Items</li></ul><a rel='close' data-role='button' href='#' id='simpleclose'>Close</a>"
 92 |     })
 93 | });
94 |
95 | 96 |
97 |
98 |
99 | GitHub SourceBlogContactjQueryMobile Homepage 100 |
101 |
102 |
103 | 104 | -------------------------------------------------------------------------------- /demos/bool.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | jQueryMobile - SimpleDialog Demos 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 25 | 26 | 27 | 28 |
29 |
30 |

jQueryMobile - SimpleDialog

31 |
32 |
33 |
34 | 35 |
36 |

jQuery Mobile Framework :: SimpleDialog

37 |

A Popup Dialog Box for jQueryMobile

38 | 39 |
40 | 41 |

SimpleDialog aims to be a replacement for javascript dialog(), written for jQM.

42 | 43 | 54 | 55 |
56 | 57 |
58 |

Button Input Mode

59 |

This shows the simplest form of bool mode. You can add as many buttons as you want.

60 |

You clicked:

61 | 85 | Open Dialog 86 | HTML
 87 | <p>You have entered: <span id="dialogoutput"></span></p>
 88 | 
 89 | <a href="#" id="simplebool" data-role="button">Open Dialog</a>
90 | 91 | jQuery
 92 | $(document).delegate('#simplebool', 'click', function() {
 93 |   $(this).simpledialog({
 94 |     'mode' : 'bool',
 95 |     'prompt' : 'How about it?',
 96 |     'useModal': true,
 97 |     'buttons' : {
 98 |       'OK': {
 99 |         click: function () {
100 |           $('#dialogoutput').text('OK');
101 |         }
102 |       },
103 |       'Cancel': {
104 |         click: function () {
105 |           $('#dialogoutput').text('Cancel');
106 |         },
107 |         icon: "delete",
108 |         theme: "c"
109 |       }
110 |     }
111 |   })
112 | })
113 | 114 |
115 | 116 |
117 |
118 |
119 | GitHub SourceBlogContactjQueryMobile Homepage 120 |
121 |
122 |
123 | 124 | -------------------------------------------------------------------------------- /demos/config.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | jQueryMobile - SimpleDialog Demos 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 25 | 26 | 27 | 28 |
29 |
30 |

jQueryMobile - SimpleDialog

31 | Home 32 |
33 |
34 |

Configuration

35 | 36 |
    37 |
  • Options
    • 38 |

  • mode

    Purpose: Mode of operation
    Default: 'bool'
    Options: 'string', 'bool', 'blank'

    • 39 |

  • prompt

    Purpose: Prompt to the user
    Default: 'Are you sure?'

    • 40 |

  • cleanOnClose

    Purpose: Completely remove simpledialog from the DOM on close - great for single use dialogs.
    Default: false

    • 41 |

  • clickEvent

    Purpose: The event to bind buttons to.
    Default: 'click'

    • 42 |

  • subTitle

    Purpose: A second line of prompt to the user, always in the content section
    Default: false

    • 43 |

  • fullHTML

    Purpose: In conjunction with blank mode, the HTML to use in the dialog
    Default: null

    • 44 |

  • inputPassword

    Purpose: Use password style input for string mode
    Default: false

    • 45 |

  • Themeing

      46 |
    • Named Themes
      • 47 |

    • pickPageTheme

      Purpose:Theme for popup window or dialog
      Default: 'b'
      Modes: all

      • 48 |

    • pickPageButtonTheme

      Purpose:Theme for widget buttons
      Default: 'a'
      Modes: all

      • 49 |

    • pickPageInputTheme

      Purpose:Theme for widget input elemets
      Default: 'e'
      Modes: all

      • 50 |
    • Other Display Options
      • 51 |

    • zindex

      Purpose:Z-Index for popup
      Default: 500
      Modes: all

      • 52 |

    • top

      Purpose:Position of top, in pixels
      Default: undefined
      Modes: all

      • 53 |

    • left

      Purpose:Position of left, in pixels
      Default: undefined
      Modes: all

      • 54 |
    • 55 |

  • User Interface

      56 |

    • useDialogForceTrue

      Purpose:Boolean *Always* use Dialog Window, regardless of screen size
      Default: false
      Modes: all

      • 57 |

    • useDialogForceFalse

      Purpose:Boolean *Never* use Dialog Window, regardless of screen size
      Default: false
      Modes: all

      • 58 |

    • fullScreen

      Purpose:Use full screen (not a dialog) mode, when small screen size, in place of dialog
      Default: false
      Modes: all

      • 59 |

    • fullScreenAlways

      Purpose:Use full screen (not a dialog) mode, *always* - fullScreen must also be true.
      Default: false
      Modes: all

      • 60 |

    • useModal

      Purpose:Use modal styling (background fades out) on popup
      Default: false
      Modes: all

      • 61 |

    • forceInput

      Purpose:Force the user to pick something, don't close on outside click
      Default: false
      Modes: all

      • 62 |

    • allowReopen

      Purpose:Allow the dialog to reopen
      Default: true
      Modes: all

      • 63 |

    • enterToTrigger

      Purpose:Button to trigger when enter pressed in input box
      Default: 0
      Modes: string

      • 64 |

    • escToTrigger

      Purpose:Button to trigger when escape pressed in input box
      Default: 1
      Modes: string

      • 65 |

    • transition

      Purpose:Transition style between dialog and page
      Default: pop
      Modes: all

      • 66 |

    • animate

      Purpose:Use animation between dialog and page (and modal fader)
      Default: true
      Modes: all

      • 67 |
    • 68 |

  • Buttons

      69 |
    • 'buttons' is an object containing the following options for each button
      • 70 |

    • click

      Purpose: Function to perform when 'click'ing the button. Return false to leave dialog open (or set closeOnClick)
      Default: null

      • 71 |

    • icon

      Purpose: Icon to use on button
      Default: 'check'

      • 72 |

    • theme

      Purpose: Theme to use for button
      Default: pickPageButtonTheme from above

      • 73 |

    • closeOnClick

      Purpose: This button will close dialog if click function returns true
      Default: true

      • 74 |

    • id

      Purpose: The id of the button
      Default: null

      • 75 |

    • hidden

      Purpose: Hide the button by default
      Default: false

      • 76 |

    • insertSeparator

      Purpose: Insert a div seperator after the button
      Default: false

      • 77 |
    • 78 |

  • Callbacks

      79 |
    • Callbacks are functions to be run when certain things happen
      • 80 |

    • onCreated

      When: Runs when the dialog is created

      • 81 |

    • onOpened

      When: Runs when the dialog is opened

      • 82 |

    • onClosed

      When: Runs when the dialog is closed

      • 83 |

    • onShown

      When: Runs when the dialog is opened, after the animation finishes

      • 84 |
    • 85 |
  • Working with dialogs
    • 86 |

  • butObj

    Contains an object of the buttons.
    Example: $('element').data('simpledialog').options.butObj[0].trigger('vclick');

    • 87 |

  • sawOnce

    Contains a boolean that is used on forceinput. Set to false to override and allow one more reopen.

    • 88 |

  • $('element').attr('data-string');

    Contains the string that the user typed - Note that this does absolutly no validation, do that yourself.

    • 89 |
90 | 91 | 92 | 93 |
94 |
95 |
96 | GitHub SourceBlogContactjQueryMobile Homepage 97 |
98 |
99 |
100 | 101 | -------------------------------------------------------------------------------- /demos/event.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | jQueryMobile - SimpleDialog Demos 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 25 | 26 | 27 | 28 |
29 |
30 |

jQueryMobile - SimpleDialog

31 |
32 |
33 |
34 | 35 |
36 |

jQuery Mobile Framework :: SimpleDialog

37 |

A Popup Dialog Box for jQueryMobile

38 | 39 |
40 | 41 |

SimpleDialog aims to be a replacement for javascript dialog(), written for jQM.

42 | 43 | 54 | 55 |
56 | 57 |
58 |

Public Functions

59 |

SimpleDialog has only a few public functions. They are: 60 |

    61 |

  • $('element').simpledialog('open')

    REopen the dialog (opens automatically first instance)

    • 62 |

  • $('element').simpledialog('close')

    Close the dialog

    • 63 |

  • $('element').simpledialog('refresh')

    Refresh the contents of the dialog (blank HTML mode only)

    • 64 |
65 |

Events Available

66 |

Events are all handled through the same master event simpledialog. For instance:

67 | $(some-simpledialog-element).trigger('simpledialog', {'method': 'open'});
68 |
69 |
    70 |

  • Triger to reopen (if enabled)

    {'method'} === open

    • 71 |

  • Triger to close

    {'method'} === close

    • 72 |

  • Triger to refresh (blank mode)

    {'method'} === refresh

    • 73 |

  • Triger to click button

    {'method'} === button
    {'index'} === numeric index of button, starting at 0. Bool mode only

    • 74 |
75 | 76 |

Other Goodies

77 |

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.

78 | 79 |
80 | 81 |
82 |
83 |
84 | GitHub SourceBlogContactjQueryMobile Homepage 85 |
86 |
87 |
88 | 89 | -------------------------------------------------------------------------------- /demos/install.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | jQueryMobile - SimpleDialog Demos 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 25 | 26 | 27 | 28 |
29 |
30 |

jQueryMobile - SimpleDialog

31 | Home 32 |
33 |
34 |

Download and Use

35 | 36 |
37 |
Reqirements
38 |
jQuery 1.6.4+
39 |
jQueryMobile 1.0
40 |
41 |
42 |
Download Links - Current Version (hotlinking allowed)
43 |
Uncompressed, Development Version Plugin
44 |
Uncompressed, Development CSS Styles
45 |

Compressed, Production Version Plugin
46 |
Compressed, Production CSS Styles
47 |

Note: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
48 |
49 |
50 |
Significant Loading Order
51 |
Loading Order is significant, a typical <head> might look like:
52 | 
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
53 | <link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css" /> 
54 | 
55 | <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
56 | <script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
57 | <script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.js"></script>
58 |
59 | 60 | 61 | 62 |
63 |
64 |
65 | GitHub SourceBlogContactjQueryMobile Homepage 66 |
67 |
68 |
69 | 70 | -------------------------------------------------------------------------------- /demos/jquery-logo-sd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jtsage/jquery-mobile-simpledialog/1ecc6b29c922a139fe870f8b809fdd1a06dd1777/demos/jquery-logo-sd.png -------------------------------------------------------------------------------- /demos/string.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | jQueryMobile - SimpleDialog Demos 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 25 | 26 | 27 | 28 |
29 |
30 |

jQueryMobile - SimpleDialog

31 |
32 |
33 |
34 |
35 |

jQuery Mobile Framework :: SimpleDialog

36 |

A Popup Dialog Box for jQueryMobile

37 |
38 | 39 |

SimpleDialog aims to be a replacement for javascript dialog(), written for jQM.

40 | 41 | 52 |
53 | 54 |
55 |

String Input Mode

56 |

This shows the simplest form of string input.

57 |

You have entered:

58 | 79 | Open Dialog 80 | HTML
 81 | <p>You have entered: <span id="dialogoutput"></span></p>
 82 | 
 83 | <a href="#" id="dialoglink" data-role="button">Open Dialog</a>
84 | 85 | jQuery
 86 | $(document).delegate('#simplestring', 'click', function() {
 87 |   $(this).simpledialog({
 88 |     'mode' : 'string',
 89 |     'prompt' : 'What do you say?',
 90 |     'buttons' : {
 91 |       'OK': {
 92 |         click: function () {
 93 |           $('#dialogoutput').text($('#dialoglink').attr('data-string'));
 94 |         }
 95 |       },
 96 |       'Cancel': {
 97 |         click: function () { },
 98 |         icon: "delete",
 99 |         theme: "c"
100 |       }
101 |     }
102 |   })
103 | })
104 | 105 |

String Password Input Mode

106 |

This shows getting a password input.

107 |

You have entered:

108 | 129 | Open Dialog 130 | HTML
131 | <p>You have entered: <span id="dialogoutput"></span></p>
132 | 
133 | <a href="#" id="dialoglink" data-role="button">Open Dialog</a>
134 | 135 | jQuery
136 | $(document).delegate('#simplepass', 'click', function() {
137 |   $(this).simpledialog({
138 |     'mode' : 'string',
139 |     'prompt' : 'Password?',
140 |     'inputPassword': true,
141 |     'buttons' : {
142 |       'OK': {
143 |         click: function () {
144 |           $('#dialogoutput').text($('#dialoglink').attr('data-string'));
145 |         }
146 |       },
147 |       'Cancel': {
148 |         click: function () { },
149 |         icon: "delete",
150 |         theme: "c"
151 |       }
152 |     }
153 |   })
154 | })
155 | 156 |

Adding to a Select Box

157 |

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

158 | 159 | 186 |
187 | 188 | 194 |
195 | 196 | HTML
197 | <div data-role='fieldcontain'> 
198 |   <label for='vendor'>Some Select Menu, using jQM styles</label> 
199 |   <select data-native-menu="false" name='stringselect' id='stringselect' > 
200 |     <option data-placeholder='true'>Choose one...</option> 
201 |     <option data-addoption='true' value='0'>Add New...</option> 
202 |     <option value='Example Vendor'>Example Vendor</option> 
203 |     <option value='Another Example Vendor'>Another Example Vendor</option> 
204 |   </select> 
205 | </div>
206 | 207 | jQuery
208 | $(document).delegate('#stringselect', 'change', function(e) {
209 |   var self = this;
210 |   $(self+':selected:not([data-placeholder])').each(function(){
211 |     if ( $(this).attr('data-addoption') ) {
212 |       $(self).simpledialog({
213 |         'mode' : 'string',
214 |         'prompt' : 'Add New Option',
215 |         'useDialogForceFalse' : true,
216 |         'buttons' : {
217 |           'Yes, Add' : {
218 |             click: function () { 
219 |               thisopt = $(self).attr('data-string');
220 |               $('<option value="'+thisopt+'" selected="selected">'+thisopt+'</option>').appendTo($(self));
221 |               $(self).selectmenu('refresh', true);
222 |               return true; }
223 |           },
224 |           'Cancel' : {
225 |             click: function () { $(self).selectmenu('open'); },
226 |             icon: "delete"
227 |           }
228 |         }
229 |       });
230 |     }
231 |   });
232 | });
233 |
234 | 235 |
236 |
237 |
238 | GitHub SourceBlogContactjQueryMobile Homepage 239 |
240 |
241 |
242 | 243 | -------------------------------------------------------------------------------- /demos2/blank.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | jQueryMobile - SimpleDialog2 Demos 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 26 | 27 | 28 | 29 |
30 |
31 |

jQueryMobile - SimpleDialog2

32 | Home 33 |
34 |
35 |
36 | 37 |
38 |

jQuery Mobile Framework :: SimpleDialog

39 |

A Popup Dialog Box for jQueryMobile

40 | 41 |
42 | 43 |
44 | 45 |
46 | 47 |
48 | 49 |

Blank / Freeform Mode

50 |

This shows the general format for blank or freeform mode - Your own HTML in a dialog. (Please also see next demo for limitations).

51 | 63 | Open Dialog 64 | HTML
 65 | <a href="#" id="opendialog" data-role="button">Open Dialog</a>
66 | 67 | jQuery
 68 | $(document).delegate('#opendialog', 'click', function() {
 69 |   // NOTE: The selector can be whatever you like, so long as it is an HTML element.
 70 |   //       If you prefer, it can be a member of the current page, or an anonymous div
 71 |   //       like shown.
 72 |   $('<div>').simpledialog2({
 73 |     mode: 'blank',
 74 |     headerText: 'Some Stuff',
 75 |     headerClose: true,
 76 |     blankContent : 
 77 |       "<ul data-role='listview'><li>Some</li><li>List</li><li>Items</li></ul>"+
 78 |       // NOTE: the use of rel="close" causes this button to close the dialog.
 79 |       "<a rel='close' data-role='button' href='#'>Close</a>"
 80 |   })
 81 | })
82 | 83 |

Custom Select Limitations

84 |

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.

85 | 102 | Open Dialog 103 | HTML
104 | <p>You have entered: <span id="buttonoutput"></span></p>
105 | 
106 | <a href="#" id="opendialog" data-role="button">Open Dialog</a>
107 | 108 | jQuery
109 | $(document).delegate('#opendialog', 'click', function() {
110 |   // NOTE: The selector can be whatever you like, so long as it is an HTML element.
111 |   //       If you prefer, it can be a member of the current page, or an anonymous div
112 |   //       like shown.
113 |   $('<div>').simpledialog2({
114 |     mode: 'blank',
115 |     headerText: 'Some Stuff',
116 |     headerClose: true,
117 |     blankContent : 
118 |       '<select data-native-menu="false" name="select-choice-0" id="select-choice-1">'+
119 |       '<option value="standard">Standard: 7 day</option>' +
120 |       '<option value="rush">Rush: 3 days</option>' +
121 |       '<option value="express">Express: next day</option>'+
122 |       '<option value="overnight">Overnight</option>'+
123 |       '</select>'+
124 |       // NOTE: the use of rel="close" causes this button to close the dialog.
125 |       "<a rel='close' data-role='button' href='#'>Close</a>"
126 |   })
127 | })
128 | 129 | 130 | 131 |
132 | 133 | 134 |
135 |
136 |
137 |
138 | 139 | -------------------------------------------------------------------------------- /demos2/blankin.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jtsage/jquery-mobile-simpledialog/1ecc6b29c922a139fe870f8b809fdd1a06dd1777/demos2/blankin.html -------------------------------------------------------------------------------- /demos2/button.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | jQueryMobile - SimpleDialog2 Demos 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 26 | 27 | 28 | 29 |
30 |
31 |

jQueryMobile - SimpleDialog2

32 | Home 33 |
34 |
35 |
36 | 37 |
38 |

jQuery Mobile Framework :: SimpleDialog

39 |

A Popup Dialog Box for jQueryMobile

40 | 41 |
42 | 43 |
44 | 45 |
46 | 47 |
48 | 49 |

Button Only Mode

50 |

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

51 |

You clicked:

52 | 76 | Open Dialog 77 | HTML
 78 | <p>You have entered: <span id="buttonoutput"></span></p>
 79 | 
 80 | <a href="#" id="opendialog" data-role="button">Open Dialog</a>
81 | 82 | jQuery
 83 | $(document).delegate('#opendialog', 'click', function() {
 84 |   // NOTE: The selector can be whatever you like, so long as it is an HTML element.
 85 |   //       If you prefer, it can be a member of the current page, or an anonymous div
 86 |   //       like shown.
 87 |   $('<div>').simpledialog2({
 88 |     mode: 'button',
 89 |     headerText: 'Click One...',
 90 |     headerClose: true,
 91 |     buttonPrompt: 'Please Choose One',
 92 |     buttons : {
 93 |       'OK': {
 94 |         click: function () { 
 95 |           $('#buttonoutput').text('OK');
 96 |         }
 97 |       },
 98 |       'Cancel': {
 99 |         click: function () { 
100 |           $('#buttonoutput').text('Cancel');
101 |         },
102 |         icon: "delete",
103 |         theme: "c"
104 |       }
105 |     }
106 |   })
107 | })
108 | 109 |

Button w/ Input Mode

110 |

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

111 |

You entered:

112 | 130 | Open Dialog 131 | HTML
132 | <p>You have entered: <span id="buttonoutput"></span></p>
133 | 
134 | <a href="#" id="opendialog" data-role="button">Open Dialog</a>
135 | 136 | jQuery
137 | $(document).delegate('#opendialog', 'click', function() {
138 |   // NOTE: The selector can be whatever you like, so long as it is an HTML element.
139 |   //       If you prefer, it can be a member of the current page, or an anonymous div
140 |   //       like shown.
141 |   $('<div>').simpledialog2({
142 |     mode: 'button',
143 |     headerText: 'Hmm?',
144 |     headerClose: true,
145 |     buttonPrompt: 'Please Type Something',
146 |     buttonInput: true,
147 |     buttons : {
148 |       'OK': {
149 |         click: function () { 
150 |           $('#buttonoutput').text($.mobile.sdLastInput);
151 |         }
152 |       },
153 |     }
154 |   })
155 | })
156 | 157 | 158 | 159 |
160 | 161 | 162 |
163 |
164 |
165 |
166 | 167 | -------------------------------------------------------------------------------- /demos2/buttonapi.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | jQueryMobile - SimpleDialog2 Demos 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 26 | 27 | 28 | 29 |
30 |
31 |

jQueryMobile - SimpleDialog2

32 | Home 33 |
34 |
35 |
36 | 37 |
38 |

jQuery Mobile Framework :: SimpleDialog

39 |

A Popup Dialog Box for jQueryMobile

40 | 41 |
42 | 43 |
44 | 45 |
46 | 47 |
48 | 49 |

Button API

50 |

When writing functions for each button, there are a number of widget methods available to you. They are all available in the keyword "this", which I prefer the convention of assigining to "self". e.g.:

51 | 52 | jQuery
53 | $(document).delegate('#opendialog', 'click', function() {
54 |   // NOTE: The selector is the hidden DIV element.
55 |   $('#inlinecontent').simpledialog2({ ...
56 |     button: {
57 |       'ok': {
58 |         'click':
59 |           function () {
60 |             var self = this;
61 |           }
62 | ....
63 |

Inside the self object, you will find the following:

64 | 65 |
    66 |
  • Objects
    • 67 |

  • displayAnchor

    A jQuery object that contains the calling element

    • 68 |

  • internalID

    An integer definition used by this dialog. Used for cleanup and event namespacing

    • 69 |

  • options

    A object that contains all the calling options (or the default)

    • 70 |

  • screen

    A jQuery object that contains "screen", or full page element that sits behind the dialog - it can either fade the background, or just catch clicks outside the dialog

    • 71 |

  • sdIntContent

    A jQuery object that contains the HTML of the body of the dialog (and the header in popup/fullscreen mode). You can change this directly, but it is here for search / replace operations really.

    • 72 |

  • thisInput

    A variable that contains the value of the buttonInput field.

    • 73 |
  • Methods
    • 74 |

  • close()

    Closes (and destorys) the dialog.

    • 75 |

  • updateBlank(--NewHTML--)

    Takes 1 argument, the new HTML for a currently open 'blank' mode dialog.

    • 76 |

  • repos()

    Force the dialog to re-calculate it's on-screen position.

    • 77 |
  • Arguments
    • 78 |

  • arguments[0]

    The first argument (you can name it if you like), is the event that was called. Not sure why this might be helpful, but it is there.

    • 79 |

  • arguments[1]+

    These can be set with the 'args' property - you can name them too if you like.

    • 80 |
81 |
82 | 83 | 84 |
85 |
86 |
87 |
88 | 89 | -------------------------------------------------------------------------------- /demos2/dialog.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | jQueryMobile - SimpleDialog2 Demos 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 26 | 27 | 28 | 29 |
30 |
31 |

jQueryMobile - SimpleDialog2

32 | Home 33 |
34 |
35 |
36 | 37 |
38 |

jQuery Mobile Framework :: SimpleDialog

39 |

A Popup Dialog Box for jQueryMobile

40 | 41 |
42 | 43 |
44 | 45 |
46 | 47 |
48 | 49 |

jQM Native Dialog Mode

50 |

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.

51 | 65 | Open Dialog 66 | HTML
67 | <a href="#" id="opendialog" data-role="button">Open Dialog</a>
68 | 69 | jQuery
70 | $(document).delegate('#opendialog', 'click', function() {
71 |   // NOTE: The selector can be whatever you like, so long as it is an HTML element.
72 |   //       If you prefer, it can be a member of the current page, or an anonymous div
73 |   //       like shown.
74 |   $('<div>').simpledialog2({
75 |     mode: 'blank',
76 |     headerText: 'Some Stuff',
77 |     headerClose: true,
78 |     dialogAllow: true,
79 |     dialogForce: true,
80 |     blankContent : 
81 |       "<ul data-role='listview'><li>Some</li><li>List</li><li>Items</li></ul>"+
82 |       // NOTE: the use of rel="close" causes this button to close the dialog.
83 |       "<a rel='close' data-role='button' href='#'>Close</a>"
84 |   })
85 | })
86 | 87 | 88 | 89 |
90 | 91 | 92 |
93 |
94 |
95 |
96 | 97 | -------------------------------------------------------------------------------- /demos2/event.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | jQueryMobile - SimpleDialog2 Demos 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 26 | 27 | 28 | 29 |
30 |
31 |

jQueryMobile - SimpleDialog2

32 | Home 33 |
34 |
35 |
36 | 37 |
38 |

jQuery Mobile Framework :: SimpleDialog

39 |

A Popup Dialog Box for jQueryMobile

40 | 41 |
42 | 43 |
44 | 45 |
46 | 47 |
48 | 49 |

Public Data Access

50 |

SimpleDialog2 has a few publicly available data points:

51 |
    52 |

  • $.mobile.sdCurrentDialog

    The currently running dialog object - reference removed on close.

    • 53 |

  • $.mobile.sdLastInput

    The value from the input element in Button->Input mode

    • 54 |
55 |

Common function tasks:

56 |
    57 |

  • $.mobile.sdCurrentDialog.close();

    Immediatly close the open dialog

    • 58 |

  • $.mobile.sdCurrentDialog.updateBlank('-NEW HTML-');

    Replace the HTML in an *open* blank dialog with "content"

    • 59 |

  • $(document).trigger('simpledialog', {'method':'close'});

    Immediatly close all open dialogs (Note: nesting probably is a bad, bad idea)

    • 60 |
61 | 62 |

Other Goodies

63 |

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.

64 | 65 |
66 | 67 |
68 |
69 |
70 |
71 | 72 | -------------------------------------------------------------------------------- /demos2/extras.js: -------------------------------------------------------------------------------- 1 | //do nothing for now. 2 | $(":jqmData(role)=page").live('pageinit', function(e) { 3 | var currentPage = $(e.target), 4 | footerAll = $('
' + 5 | '
' + 6 | 'GitHub Source' + 7 | 'Support Forums' + 8 | 'Blog' + 9 | 'Contact' + 10 | 'jQueryMobile Homepage' + 11 | '
'), 12 | sidebarsource = 13 | $('
  • Overview
    • ' + 14 | '
  • Introduction
    • ' + 15 | '
  • Download & Use
    • ' + 16 | '
  • Methods, Events and Data
    • ' + 17 | '
  • Options Matrix
    • ' + 18 | '
  • Programming Buttons
    • ' + 19 | '
  • Operation Modes
    • ' + 20 | '
  • Button / Input Mode
    • ' + 21 | '
  • Blank (Freeform) Mode
    • ' + 22 | '
  • Blank Mode "Inlining"
    • ' + 23 | '
  • Display Modes
    • ' + 24 | '
  • Standard Pop-up
    • ' + 25 | '
  • jQM Dialog Page
    • ' + 26 | '
  • Fullscreen Display
    • ' + 27 | ''), 28 | sidebarstart = $(''); 29 | 30 | if ( currentPage.jqmData('role') === 'page' ) { 31 | var footer = currentPage.find('[data-role=footer]'), 32 | sidebar = currentPage.find('div.sidebar'), 33 | thisone = sidebarstart.clone(); 34 | 35 | footer.html(footerAll.trigger('create')); 36 | currentPage.trigger('create'); 37 | 38 | if ( sidebar.length > 0 ) { 39 | thisone.append(sidebarsource); 40 | sidebar.append(thisone); 41 | sidebar.find('ul').listview(); 42 | } 43 | } 44 | 45 | }); 46 | 47 | -------------------------------------------------------------------------------- /demos2/fullscreen.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | jQueryMobile - SimpleDialog2 Demos 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 26 | 27 | 28 | 29 |
    30 |
    31 |

    jQueryMobile - SimpleDialog2

    32 | Home 33 |
    34 |
    35 |
    36 | 37 |
    38 |

    jQuery Mobile Framework :: SimpleDialog

    39 |

    A Popup Dialog Box for jQueryMobile

    40 | 41 |
    42 | 43 |
    44 | 45 |
    46 | 47 |
    48 | 49 |

    Full Screen Mode

    50 |

    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.

    51 | 65 | Open Dialog 66 | HTML
    67 | <a href="#" id="opendialog" data-role="button">Open Dialog</a>
    68 | 69 | jQuery
    70 | $(document).delegate('#opendialog', 'click', function() {
71 |   // NOTE: The selector can be whatever you like, so long as it is an HTML element.
72 |   //       If you prefer, it can be a member of the current page, or an anonymous div
73 |   //       like shown.
74 |   $('<div>').simpledialog2({
75 |     mode: 'blank',
76 |     headerText: 'Some Stuff',
77 |     headerClose: true,
78 |     fullScreen: true,
79 |     fullScreenForce: true,
80 |     blankContent : 
81 |       "<ul data-role='listview'><li>Some</li><li>List</li><li>Items</li></ul>"+
82 |       // NOTE: the use of rel="close" causes this button to close the dialog.
83 |       "<a rel='close' data-role='button' href='#'>Close</a>"
84 |   })
85 | })
    86 | 87 | 88 | 89 |
    90 | 91 | 92 |
    93 |
    94 |
    95 |
    96 | 97 | -------------------------------------------------------------------------------- /demos2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | jQueryMobile - SimpleDialog2 Demos 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 26 | 27 | 28 | 29 |
    30 |
    31 |

    jQueryMobile - SimpleDialog2

    32 | Home 33 |
    34 |
    35 |
    36 | 37 |
    38 |

    jQuery Mobile Framework :: SimpleDialog

    39 |

    A Popup Dialog Box for jQueryMobile

    40 | 41 |
    42 | 43 |
    44 | 45 |
    46 | 47 |
    48 | 49 |

    SimpleDialog2 is a re-imagining of the original SimpleDialog - it's purpose is to provide an easy programmers interface to dialog popups.

    50 | 51 |
    Multiple Operation Modes
    52 |
    Button List Mode - Generate a dialog with a list of buttons
    53 |
    Button Input Mode - Generate a dialog with a list of buttons and user input
    54 |
    Freeform Mode - Generate a dailog containing your own custom HTML source
    55 |
    56 | 57 |
    Multiple Display Modes
    58 |
    Popup Mode - Pop the window "over" the current content
    59 |
    jQM Dialog - Use the native jQM dialog page interface
    60 |
    Fullscreen - Use a proprietary full viewport pop "over" method
    61 |
    62 | 63 |
    Collect User Data 64 |
    SimpleDialog2 has the ability to collect a user prompt and return it back to your script
    65 |
    66 | 67 |
    Clean DOM Operation
    68 |
    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.
    69 |
    70 |
    71 | 72 |
    73 |
    74 |
    75 |
    76 | 77 | -------------------------------------------------------------------------------- /demos2/install.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | jQueryMobile - SimpleDialog2 Demos 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 26 | 27 | 28 | 29 |
    30 |
    31 |

    jQueryMobile - SimpleDialog2

    32 | Home 33 |
    34 |
    35 |

    Download and Use

    36 | 37 |
    38 |
    Reqirements
    39 |
    jQuery 1.6.4+
    40 |
    jQueryMobile 1.0
    41 |
    42 |
    43 |
    Download Links - Current Version (hotlinking allowed)
    44 |
    Uncompressed, Development Version Plugin
    45 |
    Uncompressed, Development CSS Styles
    46 |

    Compressed, Production Version Plugin
    47 |
    Compressed, Production CSS Styles
    48 |

    Note: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
    49 |
    50 |
    51 |
    Significant Loading Order
    52 |
    Loading Order is significant, a typical <head> might look like:
    53 | 
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
54 | <link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css" /> 
55 | 
56 | <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
57 | <script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
58 | <script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog2.min.js"></script>
    59 |
    60 |

    A Note on selectors:

    61 |

    In SimpleDialog, it was very important to choose a selector that was on the visible page, and unique. This is no longer true. SimpleDialog2 frankly does not care. At all. Ever. A few possibilities:

    62 |
    63 |
    document
    64 |
    The document object. This works just fine. It will attach to the document, and clean up after itself. Cleanly.
    65 | 
    $(document).simpledialog2({ ... });
    66 |
    html or body
    67 |
    Main elements in the page - again, no issue, it'll clean up when it closes.
    68 | 
    $('html').simpledialog2({ ... });
    69 |
    Any existing ID
    70 |
    Any one will do. Be careful never to attach to anything that might exist more than once, like a class - odd things will happen.
    71 | 
    $('#ALinkOrDivorSpanorWhatever').simpledialog2({ ... });
    72 |
    An anonymous element
    73 |
    Why not just create a temporary node? SimpleDialog2 will even delete it for you when it finishes (see option: safeNuke). Please note the use of full HTML with TAGS! (if you do 'div', it's selecting all div's, not making one)
    74 | 
    $('<div>').simpledialog2({ ... });
    75 |
    76 | 77 |
    78 |
    79 |
    80 |
    81 | 82 | -------------------------------------------------------------------------------- /demos2/jquery-logo-sd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jtsage/jquery-mobile-simpledialog/1ecc6b29c922a139fe870f8b809fdd1a06dd1777/demos2/jquery-logo-sd.png -------------------------------------------------------------------------------- /demos2/options.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | jQueryMobile - SimpleDialog2 Demos 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 26 | 27 | 28 | 29 |
    30 |
    31 |

    jQueryMobile - SimpleDialog2

    32 | Home 33 |
    34 |
    35 |

    Available Options

    36 | 37 |
      38 |

    • mode

      39 |
      Type:
      String
      40 |
      Default:
      'blank'
      41 |

      Mode of operation.

      42 |

      Valid options: ['blank', 'button']

      43 |
      • 44 |
    • Themeing
      • 45 |

    • themeDialog

      46 |
      Type:
      String
      47 |
      Default:
      'b'
      48 |
      Modes:
      all
      49 |

      Theme for the dialog.

      50 |
      • 51 |

    • themeHeader

      52 |
      Type:
      String
      53 |
      Default:
      'a'
      54 |
      Modes:
      all
      55 |

      Theme for the header, if used.

      56 |
      • 57 |

    • themeInput

      58 |
      Type:
      String
      59 |
      Default:
      'e'
      60 |
      Modes:
      button
      61 |

      Theme for the input element in Button->Input mode.

      62 |
      • 63 |

    • themeButtonDefault

      64 |
      Type:
      String
      65 |
      Default:
      false
      66 |
      Modes:
      button
      67 |

      Default theme for the buttons in Button->Input mode, defaults to whatever themeDialog is set to.

      68 |
      • 69 |

    • animate

      70 |
      Type:
      Boolean
      71 |
      Default:
      true
      72 |
      Modes:
      all
      73 |

      Use animations on transition.

      74 |
      • 75 |

    • transition

      76 |
      Type:
      String
      77 |
      Default:
      'pop'
      78 |
      Modes:
      all
      79 |

      Animation style for transitions.

      80 |
      • 81 |

    • width

      82 |
      Type:
      String
      83 |
      Default:
      '280px'
      84 |
      Modes:
      all
      85 |

      Width of the dialog popup.

      86 |
      • 87 |

    • top

      88 |
      Type:
      Number
      89 |
      Default:
      false
      90 |
      Modes:
      all
      91 |

      Force position of top of popup.

      92 |
      • 93 |

    • left

      94 |
      Type:
      Number
      95 |
      Default:
      false
      96 |
      Modes:
      all
      97 |

      Force position of left of popup.

      98 |
      • 99 |
    • Header Options
      • 100 |

    • headerText

      101 |
      Type:
      String
      102 |
      Default:
      false
      103 |
      Modes:
      all
      104 |

      Text to use in the header. If this, and headerButton are FALSE, no header is used.

      105 |
      • 106 |

    • headerClose

      107 |
      Type:
      Boolean
      108 |
      Default:
      false
      109 |
      Modes:
      all
      110 |

      Show a close button in the header. If this, and headerText are FALSE, no header is used.

      111 |
      • 112 |
    • Display Options
      • 113 |

    • dialogAllow

      114 |
      Type:
      Boolean
      115 |
      Default:
      false
      116 |
      Modes:
      all
      117 |

      Allow use of jQM native dialogs if screen size < 400px.

      118 |
      • 119 |

    • dialogForce

      120 |
      Type:
      Boolean
      121 |
      Default:
      false
      122 |
      Modes:
      all
      123 |

      Always use the jQM native dialogs.

      124 |
      • 125 |

    • fullScreen

      126 |
      Type:
      Boolean
      127 |
      Default:
      false
      128 |
      Modes:
      all
      129 |

      Allow the use of the custom full screen display is screen size < 400px.

      130 |
      • 131 |

    • fullScreenForce

      132 |
      Type:
      Boolean
      133 |
      Default:
      false
      134 |
      Modes:
      all
      135 |

      Always use the custom full screen display

      136 |
      • 137 |

    • showModal

      138 |
      Type:
      Boolean
      139 |
      Default:
      true
      140 |
      Modes:
      all
      141 |

      Blank the background when using popup mode, modal style.

      142 |
      • 143 |

    • forceInput

      144 |
      Type:
      Boolean
      145 |
      Default:
      false
      146 |
      Modes:
      all
      147 |

      Do not close dialog when clicking outside the dialog.

      148 |
      • 149 |
    • Internal Operation
      • 150 |

    • clickEvent

      151 |
      Type:
      String
      152 |
      Default:
      'click'
      153 |
      Modes:
      all
      154 |

      Event to bind all actions to (including header close button, buttons in button mode, and outside dialog trap).

      155 |
      • 156 |

    • zindex

      157 |
      Type:
      Number
      158 |
      Default:
      500
      159 |
      Modes:
      all
      160 |

      z-Index of the popup element (For fixed headers/footers, this might need to be extreamly high).

      161 |
      • 162 |

    • resizeListener

      163 |
      Type:
      Boolean
      164 |
      Default:
      true
      165 |
      Modes:
      all
      166 |

      Listen to resize events, and reposition accordingly (Desktop operation really).

      167 |
      • 168 |

    • safeNuke

      169 |
      Type:
      Boolean
      170 |
      Default:
      true
      171 |
      Modes:
      all
      172 |

      Try and detect if you used an unattached, empty node as your selector - if you did, delete it for you after the dialog closes. (If you run into really odd errors, try turning this off, then contact J.T. - he'll want to know.)

      173 |
      • 174 |
    • Widget Callbacks
      • 175 |

    • callbackOpen

      176 |
      Type:
      Function
      177 |
      Default:
      false
      178 |
      Modes:
      all
      179 |

      Function to run when the dialog opens.

      180 |
      • 181 |

    • callbackOpenArgs

      182 |
      Type:
      Array
      183 |
      Default:
      empty
      184 |
      Modes:
      all
      185 |

      An array of arguments to send to the open callback. Remember 'this' is the widget object.

      186 |
      • 187 |

    • callbackClose

      188 |
      Type:
      Function
      189 |
      Default:
      false
      190 |
      Modes:
      all
      191 |

      Function to run when the dialog closes, before cleanup is done - return false to prevent close.

      192 |
      • 193 |

    • callbackCloseArgs

      194 |
      Type:
      Array
      195 |
      Default:
      empty
      196 |
      Modes:
      all
      197 |

      An array of arguments to send to the close callback. Remember 'this' is the widget object.

      198 |
      • 199 |
    • Blank Mode Options
      • 200 |

    • blankContent

      201 |
      Type:
      String
      202 |
      Default:
      false
      203 |
      Modes:
      blank
      204 |

      A String of the HTML you wish to use in the blank/freeform mode. This may also be a jQuery object. Set to true if inlining options.

      205 |
      • 206 |

    • blankContentAdopt

      207 |
      Type:
      boolean
      208 |
      Default:
      false
      209 |
      Modes:
      blank
      210 |

      When inlining, brink all data and controls with the HTML. You almost certainly want this, set to false by default to preserve backwards compatibility with older installs.

      211 |
      • 212 |
    • Button Mode Options
      • 213 |

    • buttonPrompt

      214 |
      Type:
      String
      215 |
      Default:
      false
      216 |
      Modes:
      button
      217 |

      A string to use as a prompt in the dialog, HTML allowed, wrapper in a <p>

      218 |
      • 219 |

    • buttonInput

      220 |
      Type:
      Boolean
      221 |
      Default:
      false
      222 |
      Modes:
      button
      223 |

      Show an input box in the dialog.

      224 |
      • 225 |

    • buttonInputDefault

      226 |
      Type:
      String
      227 |
      Default:
      false
      228 |
      Modes:
      button
      229 |

      Default text for the input box.

      230 |
      • 231 |

    • buttonPassword

      232 |
      Type:
      Boolean
      233 |
      Default:
      false
      234 |
      Modes:
      button
      235 |

      Show an input box of type password in the dialog - buttonInput must also be TRUE.

      236 |
      • 237 |

    • button

      238 |
      Type:
      Boolean
      239 |
      Default:
      false
      240 |
      Modes:
      button
      241 |

      An object of buttons - see below for individual button options.

      242 |
      • 243 |
    • Button Object Options
      • 244 |

    • id

      245 |
      Type:
      String
      246 |
      Default:
      false
      247 |
      Modes:
      button object
      248 |

      The HTML ID of the button. If false, one is generated.

      249 |
      • 250 |

    • theme

      251 |
      Type:
      String
      252 |
      Default:
      inherited
      253 |
      Modes:
      button object
      254 |

      The theme of the button.

      255 |
      • 256 |

    • icon

      257 |
      Type:
      String
      258 |
      Default:
      'check'
      259 |
      Modes:
      button object
      260 |

      The icon of the button.

      261 |
      • 262 |

    • iconpos

      263 |
      Type:
      String
      264 |
      Default:
      'left'
      265 |
      Modes:
      button object
      266 |

      The position of the icon on the button.

      267 |
      • 268 |

    • corners

      269 |
      Type:
      Boolean
      270 |
      Default:
      true
      271 |
      Modes:
      button object
      272 |

      If true, round the corners of the button.

      273 |
      • 274 |

    • shadow

      275 |
      Type:
      Boolean
      276 |
      Default:
      true
      277 |
      Modes:
      button object
      278 |

      If true, button will have a drop shadow.

      279 |
      • 280 |

    • close

      281 |
      Type:
      Boolean
      282 |
      Default:
      true
      283 |
      Modes:
      button object
      284 |

      Clicking this button will close the dialog.

      285 |
      • 286 |

    • click

      287 |
      Type:
      Function
      288 |
      Modes:
      button object
      289 |

      A function to run when this button is clicked. If it returns false, the dialog will not close.

      290 |
      • 291 |

    • args

      292 |
      Type:
      Array
      293 |
      Modes:
      button object
      294 |

      An array of arguments to *also* pass to the click function. The first argument is always the event.

      295 |
      • 296 |
    297 |
    298 |
    299 |
    300 |
    301 | 302 | -------------------------------------------------------------------------------- /demos2/popup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | jQueryMobile - SimpleDialog2 Demos 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 26 | 27 | 28 | 29 |
    30 |
    31 |

    jQueryMobile - SimpleDialog2

    32 | Home 33 |
    34 |
    35 |
    36 | 37 |
    38 |

    jQuery Mobile Framework :: SimpleDialog

    39 |

    A Popup Dialog Box for jQueryMobile

    40 | 41 |
    42 | 43 |
    44 | 45 |
    46 | 47 |
    48 | 49 |

    Popup Mode

    50 |

    This shows standard, default popup only mode.

    51 | 63 | Open Dialog 64 | HTML
    65 | <a href="#" id="opendialog" data-role="button">Open Dialog</a>
    66 | 67 | jQuery
    68 | $(document).delegate('#opendialog', 'click', function() {
69 |   // NOTE: The selector can be whatever you like, so long as it is an HTML element.
70 |   //       If you prefer, it can be a member of the current page, or an anonymous div
71 |   //       like shown.
72 |   $('<div>').simpledialog2({
73 |     mode: 'blank',
74 |     headerText: 'Some Stuff',
75 |     headerClose: true,
76 |     blankContent : 
77 |       "<ul data-role='listview'><li>Some</li><li>List</li><li>Items</li></ul>"+
78 |       // NOTE: the use of rel="close" causes this button to close the dialog.
79 |       "<a rel='close' data-role='button' href='#'>Close</a>"
80 |   })
81 | })
    82 | 83 | 84 | 85 |
    86 | 87 | 88 |
    89 |
    90 |
    91 |
    92 | 93 | -------------------------------------------------------------------------------- /external/LICENSE.TXT: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jtsage/jquery-mobile-simpledialog/1ecc6b29c922a139fe870f8b809fdd1a06dd1777/external/LICENSE.TXT -------------------------------------------------------------------------------- /external/README.md: -------------------------------------------------------------------------------- 1 | jQuery-Mobile-SimeleDialog 2 | ========================== 3 | 4 | This folder contains a relativly recent copy of yui-compressor. 5 | 6 | It is used in the build process. Please see the included LICENSE 7 | -------------------------------------------------------------------------------- /external/yuicompressor-2.4.6.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jtsage/jquery-mobile-simpledialog/1ecc6b29c922a139fe870f8b809fdd1a06dd1777/external/yuicompressor-2.4.6.jar -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | jQueryMobile - SimpleDialog Demos 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 25 | 26 | 27 | 28 |
    29 |
    30 |

    jQueryMobile - SimpleDialog

    31 |
    32 |
    33 |
    34 | 35 |
    36 |

    jQuery Mobile Framework :: SimpleDialog

    37 |

    A Popup Dialog Box for jQueryMobile 1.0

    38 | 39 |
    40 | 41 |

    SimpleDialog aims to be a replacement for javascript dialog(), written for jQM.

    42 | 43 |

    Note: This plugin has largely been supserseeded by:

    44 | SimpleDialog2 45 | 46 | 57 | 58 |
    59 | 60 |
    61 | 62 |
      63 |
    • Features
      • 64 |

    • Two operation modes

      Bool : A button only display where the user can choose one option
      String : Dialog with a text input field to get user data.

      • 65 |
    • Pops Up "over" the screen on larger devices, falls back to the full screen dialog of jQM on small displays
      • 66 |
    • Modal and forced input displays available
      • 67 |
    68 |
    69 | 70 |
    71 |
    72 |
    73 | GitHub SourceBlogContactjQueryMobile Homepage 74 |
    75 |
    76 |
    77 | 78 | -------------------------------------------------------------------------------- /js/README.md: -------------------------------------------------------------------------------- 1 | jQuery-Mobile-SimpleDialog 2 | ========================== 3 | 4 | Master SimpleDialog script file. All development happens here. 5 | -------------------------------------------------------------------------------- /js/jquery.mobile.simpledialog.js: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery Mobile Framework : plugin to provide a simple popup (modal) or jQMdialog (page) Dialog widget. 3 | * Copyright (c) JTSage 4 | * CC 3.0 Attribution. May be relicensed without permission/notifcation. 5 | * https://github.com/jtsage/jquery-mobile-simpledialog 6 | */ 7 | (function($, undefined ) { 8 | $.widget( "mobile.simpledialog", $.mobile.widget, { 9 | options: { 10 | version: '1.0.1-2012021300', // jQueryMobile-YrMoDaySerial 11 | pickPageTheme: 'b', 12 | pickPageInputTheme: 'e', 13 | pickPageButtonTheme: 'a', 14 | fullScreen: false, 15 | fullScreenAlways: false, 16 | 17 | disabled: false, 18 | zindex: '500', 19 | width: '280px', 20 | 21 | prompt: 'Are you sure?', // or false. 22 | mode: 'bool', // or 'string' 23 | allowReopen: true, 24 | useModal: true, 25 | forceInput: true, 26 | isOpen: false, 27 | blankMode: false, 28 | fullHTML: null, 29 | subTitle: false, 30 | inputPassword: false, 31 | cleanOnClose: false, 32 | animate: true, 33 | transition: 'pop', 34 | clickEvent: 'click', 35 | 36 | left: undefined, 37 | top: undefined, 38 | 39 | useDialogForceTrue: false, 40 | useDialogForceFalse: false, 41 | useDialog: false, 42 | isInit: false, 43 | sawOnce: false, 44 | enterToTrigger: 0, 45 | escToTrigger: 1, 46 | butObj: [], 47 | debug: false, 48 | selects: false, 49 | selectparent: [], 50 | 51 | onCreated:null, 52 | onOpened:null, 53 | onClosed:null, 54 | onShown:null 55 | }, 56 | _eventHandler: function(event, payload) { 57 | // Handle all event triggers that have an internal effect 58 | var widget = $(this).data('simpledialog'), 59 | o = widget.options; 60 | 61 | if ( ! event.isPropagationStopped() ) { 62 | switch (payload.method) { 63 | case 'close': 64 | widget.close(payload.fromCloseButton); 65 | break; 66 | case 'open': 67 | widget.open(); 68 | break; 69 | case 'refresh': 70 | widget.refresh(); 71 | break; 72 | case 'button': 73 | o.butObj[payload.index].trigger(o.clickEvent); 74 | break; 75 | } 76 | } 77 | }, 78 | _orientChange: function(e) { 79 | var self = $(e.currentTarget).data('simpledialog'), 80 | o = self.options, 81 | docWinWidth = $.mobile.activePage.width(), 82 | docWinHeightOffset = $(window).scrollTop(), 83 | docWinHeight = $(window).height(), 84 | pickWinHeight = self.pickerContent.outerHeight(), 85 | pickWinWidth = self.pickerContent.innerWidth(), 86 | 87 | pickWinTop = (parseFloat(o.top)+10000) ? parseFloat(o.top) : (docWinHeightOffset + ( docWinHeight / 2 )- ( pickWinHeight / 2)), 88 | pickWinLeft = (parseFloat(o.left)+10000) ? parseFloat(o.left) : (( docWinWidth / 2) - ( pickWinWidth / 2)); 89 | 90 | if ( (pickWinHeight + pickWinTop) > $(document).height() ) { 91 | pickWinTop = $(document).height() - (pickWinHeight + 2); 92 | } 93 | if ( pickWinTop < 45 ) { pickWinTop = 45; } 94 | 95 | e.stopPropagation(); 96 | if ( ! self.pickerContent.is(':visible') || o.useDialog === true ) { 97 | return false; // Not open, or in a dialog (let jQM do it) 98 | } else { 99 | self.pickerContent.css({'top': pickWinTop, 'left': pickWinLeft}); 100 | } 101 | }, 102 | open: function() { 103 | if ( this.pickPage.is(':visible') ) { return false; } 104 | 105 | var self = this, 106 | o = this.options, 107 | docWinWidth = $.mobile.activePage.width(), 108 | docWinHeightOffset = $(window).scrollTop(), 109 | docWinHeight = $(window).height(), 110 | pickWinHeight = self.pickerContent.outerHeight(), 111 | pickWinWidth = self.pickerContent.innerWidth(), 112 | fullTop = $(window).scrollTop(), 113 | fullLeft = $(window).scrollLeft(), 114 | 115 | pickWinTop = (parseFloat(o.top)+10000) ? parseFloat(o.top) : (docWinHeightOffset + ( docWinHeight / 2 )- ( pickWinHeight / 2)), 116 | pickWinLeft = (parseFloat(o.left)+10000) ? parseFloat(o.left) : (( docWinWidth / 2) - ( pickWinWidth / 2)); 117 | 118 | if ( (pickWinHeight + pickWinTop) > $(document).height() ) { 119 | pickWinTop = $(document).height() - (pickWinHeight + 2); 120 | } 121 | if ( pickWinTop < 45 ) { pickWinTop = 45; } 122 | 123 | if ( o.prompt !== false ) { 124 | self.pickerHeader.html(o.prompt); 125 | self.pickPage.find('.ui-header').find('.ui-title').text(o.prompt); 126 | } 127 | self.pickerContent.find('.ui-btn-active').removeClass('ui-btn-active'); 128 | 129 | if ( o.mode === 'blank' ) { 130 | self.pickerContent.delegate('[rel="close"]', o.clickEvent, function() { 131 | self.close(); 132 | }); 133 | } 134 | 135 | if ( !o.disabled ) { 136 | if ( ( docWinWidth > 400 && !o.useDialogForceTrue ) || o.useDialogForceFalse || o.fullScreen ) { 137 | o.useDialog = false; 138 | 139 | if ( o.fullScreen === false ) { 140 | if ( o.useModal === true ) { 141 | if ( o.animate === true ) { self.screen.fadeIn('slow'); } 142 | else { self.screen.show(); } 143 | } else { 144 | self.screen.removeClass('ui-simpledialog-hidden'); 145 | } 146 | } 147 | 148 | if ( o.mode === 'blank' ) { 149 | o.selects = self.pickPage.find('.ui-selectmenu'); 150 | 151 | o.selects.each(function () { 152 | o.selectparent.push($(this).closest('.ui-dialog')); 153 | $(this).appendTo(self.thisPage); 154 | }); 155 | } 156 | 157 | self.pickerContent.addClass('ui-overlay-shadow').css('zIndex', self.options.zindex); 158 | 159 | self.pickerHeader.show(); 160 | 161 | if ( o.fullScreenAlways || ( o.fullScreen && docWinWidth < 400 ) ) { 162 | self.pickerContent.css({'border': '0px !important', 'position': 'absolute', 'top': fullTop, 'left': fullLeft, 'height': docWinHeight, 'width': docWinWidth, 'maxWidth': docWinWidth }).addClass('ui-overlay-shadow in').removeClass('ui-simpledialog-hidden'); 163 | } else { 164 | self.pickerContent.css({'position': 'absolute', 'top': pickWinTop, 'left': pickWinLeft}).addClass('ui-overlay-shadow in').removeClass('ui-simpledialog-hidden'); 165 | } 166 | } else { 167 | // prevent the parent page from being removed from the DOM, 168 | self.thisPage.unbind( "pagehide.remove" ); 169 | o.useDialog = true; 170 | self.pickPageContent.append(self.pickerContent); 171 | self.pickerHeader.hide(); 172 | self.pickerContent.removeClass('ui-overlay-shadow ui-simpledialog-hidden').css({'top': 'auto', 'left': 'auto', 'marginLeft': 'auto', 'marginRight': 'auto'}).css('zIndex', self.options.zindex); 173 | $.mobile.changePage(self.pickPage, {'transition': (o.animate === true) ? o.transition : 'none' }); 174 | } 175 | this.options.isOpen = true; 176 | } 177 | }, 178 | close: function(fromCloseButton) { 179 | var self = this; 180 | fromCloseButton = ( typeof(fromCloseButton) === 'undefined' ) ? false : fromCloseButton; 181 | 182 | if ( self.options.useDialog ) { 183 | if ( fromCloseButton === false ) { 184 | $(self.pickPage).dialog('close'); 185 | } 186 | if( (typeof self.thisPage.jqmData("page")) !== 'undefined' && ! self.thisPage.jqmData("page").options.domCache ){ 187 | self.thisPage.bind( "pagehide.remove", function() { 188 | $(self).remove(); 189 | }); 190 | } 191 | self.pickerContent.addClass('ui-simpledialog-hidden'); 192 | self.thisPage.append(self.pickerContent); 193 | } else { 194 | if ( self.options.useModal ) { 195 | if ( self.options.animate === true ) { 196 | self.screen.fadeOut('slow'); 197 | } else { 198 | self.screen.hide(); 199 | } 200 | } else { 201 | self.screen.addClass('ui-simpledialog-hidden'); 202 | } 203 | self.pickerContent.addClass('ui-simpledialog-hidden').removeClass('in'); 204 | } 205 | self.caller.removeClass('ui-btn-active'); 206 | self.options.isOpen = false; 207 | if ( self.options.cleanOnClose === true && self.options.useDialog === false ) { 208 | self.clean(); 209 | } 210 | if (self.options.onClosed && typeof(self.options.onClosed) === "function") { 211 | self.options.onClosed(self); 212 | } 213 | }, 214 | clean: function() { 215 | // Clean self out of the DOM 216 | var self = this; 217 | 218 | if ( self.options.selects !== false ) { 219 | self.options.selects.each(function() { 220 | $(this).remove(); 221 | }); 222 | $(self.options.selectparent).each(function() { 223 | $(this).remove(); 224 | }); 225 | } 226 | self.pickerContent.remove(); 227 | self.pickPage.remove(); 228 | self.screen.remove(); 229 | self.caller.removeData('simpledialog'); 230 | }, 231 | _create: function(){ 232 | var self = this, 233 | o = $.extend(this.options, this.element.data('options')), 234 | caller = this.element; 235 | 236 | if ( o.isInit && o.allowReopen ) { 237 | self.open(); 238 | } else { 239 | var thisPage = caller.closest('.ui-page'), 240 | pickPage = $("
    " + 241 | "
    " + 242 | "
    "+o.prompt+"
    " + 243 | "
    "+ 244 | "
    "+ 245 | "
    "), 246 | ct = null, 247 | pickPageContent = null; 248 | 249 | if (o.mode === 'blank') { 250 | ct = $("
    "); 252 | ct.html(o.fullHTML); 253 | $('[data-role=content]', pickPage).append(ct); 254 | } 255 | 256 | pickPage.appendTo( $.mobile.pageContainer ) 257 | .page().css('minHeight', '0px').css('zIndex', o.zindex); 258 | 259 | if ( o.animate === true ) { pickPage.addClass('pop'); } 260 | 261 | pickPageContent = pickPage.find( ".ui-content" ); 262 | 263 | // Bind the master handler. 264 | caller.live('simpledialog', self._eventHandler); 265 | 266 | // Bind the close button on the DIALOG mode. 267 | pickPage.find( ".ui-header a").bind(o.clickEvent, function(e) { 268 | e.preventDefault(); 269 | e.stopImmediatePropagation(); 270 | self.close(true); 271 | }); 272 | 273 | if ( o.prompt === false ) { 274 | pickPage.find('.ui-header').find('.ui-title').html(" "); 275 | } 276 | 277 | $.extend(self, { 278 | pickPage: pickPage, 279 | thisPage: thisPage, 280 | pickPageContent: pickPageContent, 281 | screen: screen, 282 | caller: caller 283 | }); 284 | 285 | self._buildPage(); 286 | self.options.isInit = true; 287 | 288 | $(document).bind('orientationchange', function(e) { caller.trigger('orientationchange'); }); 289 | 290 | caller.bind('orientationchange', self._orientChange); 291 | 292 | if (self.options.onCreated && typeof(self.options.onCreated) === "function") { 293 | self.options.onCreated(self); 294 | } 295 | } 296 | }, 297 | _reposition: function() { 298 | var self = this, 299 | o = this.options, 300 | docWinWidth = $.mobile.activePage.width(), 301 | docWinHeightOffset = $(window).scrollTop(), 302 | docWinHeight = $(window).height(), 303 | pickWinHeight = self.pickerContent.outerHeight(), 304 | pickWinWidth = self.pickerContent.innerWidth(), 305 | 306 | pickWinTop = (parseFloat(o.top)+10000) ? parseFloat(o.top) : (docWinHeightOffset + ( docWinHeight / 2 )- ( pickWinHeight / 2)), 307 | pickWinLeft = (parseFloat(o.left)+10000) ? parseFloat(o.left) : (( docWinWidth / 2) - ( pickWinWidth / 2)); 308 | 309 | if ( (pickWinHeight + pickWinTop) > $(document).height() ) { 310 | pickWinTop = $(document).height() - (pickWinHeight + 2); 311 | } 312 | if ( pickWinTop < 45 ) { pickWinTop = 45; } 313 | 314 | self.pickerContent.css({'position': 'absolute', 'width': pickWinWidth, 'top': pickWinTop, 'left': pickWinLeft}); 315 | }, 316 | refresh: function() { 317 | if ( this.options.mode !== "blank" ) { 318 | return false; 319 | } else { 320 | this.pickerContent.css('width', 'auto'); 321 | this.pickerContent.html(this.options.fullHTML); 322 | this.pickerContent.trigger('create'); 323 | 324 | if ( this.pickerContent.is(':visible') && this.options.useDialog === false ) { 325 | this._reposition(); 326 | } 327 | } 328 | }, 329 | _init: function() { 330 | if ( !this.options.sawOnce || this.options.allowReopen ) { 331 | this.options.sawOnce = true; 332 | this.open(); 333 | } 334 | }, 335 | _buildPage: function () { 336 | var self = this, 337 | o = self.options, 338 | idx = null, 339 | pickerInput, 340 | pickerChoice, 341 | screen, 342 | pickerContent = $("
    ", { "class": 'ui-simpledialog-container ui-overlay-shadow ui-corner-all ui-simpledialog-hidden '+((o.animate===true)?o.transition:'')+' ui-body-'+o.pickPageTheme}).css({'zIndex': o.zindex, 'width': o.width}), 343 | pickerHeader = $("

    ").appendTo(pickerContent).find("h4"); 344 | 345 | pickerContent.bind('webkitAnimationEnd', function(){ 346 | if (self.options.onShown && typeof(self.options.onShown) === "function") { 347 | self.options.onShown(self); 348 | } 349 | }); 350 | 351 | if ( o.mode !== 'blank' ) { 352 | if ( o.prompt !== false ) { 353 | pickerHeader.html(o.prompt); 354 | } else { 355 | pickerHeader.parent().html(); 356 | } 357 | 358 | if ( o.subTitle !== false ) { 359 | $("

    "+o.subTitle+"

    ").appendTo(pickerContent); 360 | } 361 | 362 | if ( o.mode === 'string' ) { 363 | pickerInput = $("

    ") 364 | .bind('keyup', function(event) { 365 | if ( event.keyCode === 13 && o.enterToTrigger !== false ) { 366 | o.butObj[o.enterToTrigger].trigger(o.clickEvent); 367 | } 368 | if ( event.keyCode === 27 && o.escToTrigger !== false ) { 369 | o.butObj[o.escToTrigger].trigger(o.clickEvent); 370 | } 371 | }) 372 | .appendTo(pickerContent); 373 | } 374 | 375 | pickerChoice = $("
    ", { "class":'ui-simpledialog-controls' }).appendTo(pickerContent); 376 | 377 | $.each(o.buttons, function(name, props) { 378 | props = $.isFunction( props ) ? { click: props } : props; 379 | props = $.extend({ 380 | text: name, 381 | theme: o.pickPageButtonTheme, 382 | icon: 'check', 383 | iconpos: 'left', 384 | closeOnClick: true, 385 | corners: true, 386 | shadow: true 387 | }, props); 388 | idx = o.butObj.push($(""+name+"") 389 | .appendTo(pickerChoice) 390 | .buttonMarkup({theme: props.theme, icon: props.icon, iconpos: props.iconpos, corners: props.corners, shadow: props.shadow}) 391 | .unbind("vclick").unbind("click") 392 | .bind(o.clickEvent, function() { 393 | if ( o.mode === 'string' ) { self.caller.attr('data-string', pickerInput.find('input').val()); } 394 | var val = props.click.apply(self.element[0], arguments); 395 | if ( val !== false && props.closeOnClick === true ) { 396 | self.close(); 397 | } 398 | }) 399 | ); 400 | 401 | if(typeof(props.id) !== 'undefined' && props.id.length > 0) o.butObj[idx-1].attr('id', props.id); 402 | if(props.hidden) o.butObj[idx-1].addClass('button-hidden'); 403 | 404 | if(props.insertSeparator) 405 | $("
    ").appendTo(pickerChoice); 406 | }); 407 | } else { 408 | pickerContent = self.pickPageContent.contents(); 409 | } 410 | 411 | pickerContent.appendTo(self.thisPage); 412 | 413 | screen = $("
    ", {'class':'ui-simpledialog-screen ui-simpledialog-hidden'}) 414 | .css({'z-index': o.zindex-1}) 415 | .appendTo(self.thisPage) 416 | .bind(o.clickEvent, function(event){ 417 | if ( !o.forceInput ) { 418 | self.close(); 419 | } 420 | event.preventDefault(); 421 | }); 422 | 423 | if ( o.useModal ) { screen.addClass('ui-simpledialog-screen-modal'); } 424 | 425 | $.extend(self, { 426 | pickerContent: pickerContent, 427 | pickerHeader: pickerHeader, 428 | screen: screen 429 | }); 430 | }, 431 | disable: function(){ 432 | this.options.disabled = true; 433 | }, 434 | enable: function(){ 435 | this.options.disabled = false; 436 | } 437 | 438 | }); 439 | 440 | 441 | })( jQuery ); 442 | -------------------------------------------------------------------------------- /js/jquery.mobile.simpledialog2.js: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery Mobile Framework : plugin to provide a dialogs Widget. ver2 3 | * Copyright (c) JTSage 4 | * CC 3.0 Attribution. May be relicensed without permission/notifcation. 5 | * https://github.com/jtsage/jquery-mobile-simpledialog 6 | */ 7 | 8 | (function($, undefined ) { 9 | $.widget( "mobile.simpledialog2", $.mobile.widget, { 10 | options: { 11 | version: '1.0.1-2012061300', // jQueryMobile-YrMoDaySerial 12 | mode: 'blank', // or 'button' 13 | themeDialog: 'b', 14 | themeInput: false, 15 | themeButtonDefault: false, 16 | themeHeader: 'a', 17 | 18 | fullScreen: false, 19 | fullScreenForce: false, 20 | dialogAllow: false, 21 | dialogForce: false, 22 | 23 | headerText: false, 24 | headerClose: false, 25 | buttonPrompt: false, 26 | buttonInput: false, 27 | buttonInputDefault: false, 28 | buttonPassword: false, 29 | blankContent: false, 30 | blankContentAdopt: false, 31 | 32 | resizeListener: true, 33 | safeNuke: true, 34 | forceInput: true, 35 | showModal: true, 36 | animate: true, 37 | transition: 'pop', 38 | clickEvent: 'click', 39 | zindex: '500', 40 | width: '280px', 41 | left: false, 42 | top: false, 43 | 44 | callbackOpen: false, 45 | callbackOpenArgs: [], 46 | callbackClose: false, 47 | callbackCloseArgs: [] 48 | }, 49 | _eventHandler: function(e,p) { 50 | // Handle the triggers 51 | var self = e.data.widget, 52 | o = e.data.widget.options; 53 | 54 | if ( ! e.isPropagationStopped() ) { 55 | switch (p.method) { 56 | case 'close': 57 | self.close(); 58 | break; 59 | case 'html': 60 | self.updateBlank(p.source); 61 | break; 62 | } 63 | } 64 | }, 65 | _create: function () { 66 | var self = this, 67 | o = $.extend(this.options, this.element.jqmData('options')), 68 | initDate = new Date(), 69 | content = $("
    "); 71 | 72 | if ( o.themeButtonDefault === false ) { o.themeButtonDefault = o.themeDialog; } 73 | if ( o.themeInput === false ) { o.themeInput = o.themeDialog; } 74 | $.mobile.sdCurrentDialog = self; 75 | if ( typeof $.mobile.sdLastInput !== 'undefined' ) { delete $.mobile.sdLastInput; } 76 | self.internalID = initDate.getTime(); 77 | self.displayAnchor = $.mobile.activePage.children('.ui-content').first(); 78 | if ( self.displayAnchor.length === 0 ) { self.displayAnchor = $.mobile.activePage; } 79 | 80 | self.dialogPage = $("
    "); 81 | self.sdAllContent = self.dialogPage.find('[data-role=content]'); 82 | 83 | content.appendTo(self.sdAllContent); 84 | 85 | self.sdIntContent = self.sdAllContent.find('.ui-simpledialog-container'); 86 | self.sdIntContent.css('width', o.width); 87 | 88 | if ( o.headerText !== false || o.headerClose !== false ) { 89 | self.sdHeader = $('
    '); 90 | if ( o.headerClose === true ) { 91 | $("Close").appendTo(self.sdHeader).buttonMarkup({ theme : o.themeHeader, icon : 'delete', iconpos: 'notext', corners: true, shadow : true }); 92 | } 93 | $('

    '+((o.headerText !== false)?o.headerText:'')+'

    ').appendTo(self.sdHeader); 94 | self.sdHeader.appendTo(self.sdIntContent); 95 | } 96 | 97 | if ( o.mode === 'blank' ) { 98 | if ( o.blankContent === true ) { 99 | if ( o.blankContentAdopt === true ) { 100 | o.blankContent = self.element.children(); 101 | } else { 102 | o.blankContent = self.element.html(); 103 | } 104 | } 105 | $(o.blankContent).appendTo(self.sdIntContent); 106 | } else if ( o.mode === 'button' ) { 107 | self._makeButtons().appendTo(self.sdIntContent); 108 | } 109 | 110 | self.sdIntContent.appendTo(self.displayAnchor.parent()); 111 | 112 | self.dialogPage.appendTo( $.mobile.pageContainer ) 113 | .page().css('minHeight', '0px').css('zIndex', o.zindex); 114 | 115 | if ( o.animate === true ) { self.dialogPage.addClass(o.transition); } 116 | 117 | self.screen = $("
    ", {'class':'ui-simpledialog-screen ui-simpledialog-hidden'}) 118 | .css('z-index', (o.zindex-1)) 119 | .appendTo(self.displayAnchor.parent()) 120 | .bind(o.clickEvent, function(event){ 121 | if ( !o.forceInput ) { 122 | self.close(); 123 | } 124 | event.preventDefault(); 125 | }); 126 | 127 | if ( o.showModal ) { self.screen.addClass('ui-simpledialog-screen-modal'); } 128 | 129 | $(document).bind('simpledialog.'+self.internalID, {widget:self}, function(e,p) { self._eventHandler(e,p); }); 130 | }, 131 | _makeButtons: function () { 132 | var self = this, 133 | o = self.options, 134 | buttonHTML = $('
    '), 135 | pickerInput = $("
    "), 136 | pickerChoice = $("
    ", { "class":'ui-simpledialog-controls' }); 137 | 138 | 139 | if ( o.buttonPrompt !== false ) { 140 | self.buttonPromptText = $("

    "+o.buttonPrompt+"

    ").appendTo(buttonHTML); 141 | } 142 | 143 | if ( o.buttonInput !== false ) { 144 | $.mobile.sdLastInput = ""; 145 | pickerInput.appendTo(buttonHTML); 146 | pickerInput.find('input').bind('change', function () { 147 | $.mobile.sdLastInput = pickerInput.find('input').first().val(); 148 | self.thisInput = pickerInput.find('input').first().val(); 149 | }); 150 | } 151 | 152 | pickerChoice.appendTo(buttonHTML); 153 | 154 | self.butObj = []; 155 | 156 | $.each(o.buttons, function(name, props) { 157 | props = $.isFunction( props ) ? { click: props } : props; 158 | props = $.extend({ 159 | text : name, 160 | id : name + self.internalID, 161 | theme : o.themeButtonDefault, 162 | icon : 'check', 163 | iconpos: 'left', 164 | corners: 'true', 165 | shadow : 'true', 166 | args : [], 167 | close : true 168 | }, props); 169 | 170 | self.butObj.push($(""+name+"") 171 | .appendTo(pickerChoice) 172 | .attr('id', props.id) 173 | .buttonMarkup({ 174 | theme : props.theme, 175 | icon : props.icon, 176 | iconpos: props.iconpos, 177 | corners: props.corners, 178 | shadow : props.shadow 179 | }).unbind("vclick click") 180 | .bind(o.clickEvent, function() { 181 | if ( o.buttonInput ) { self.sdIntContent.find('input [name=pickin]').trigger('change'); } 182 | var returnValue = props.click.apply(self, $.merge(arguments, props.args)); 183 | if ( returnValue !== false && props.close === true ) { 184 | self.close(); 185 | } 186 | }) 187 | ); 188 | }); 189 | 190 | return buttonHTML; 191 | }, 192 | _getCoords: function(widget) { 193 | var self = widget, 194 | docWinWidth = $.mobile.activePage.width(), 195 | docWinHighOff = $(window).scrollTop(), 196 | docWinHigh = $(window).height(), 197 | diaWinWidth = widget.sdIntContent.innerWidth(), 198 | diaWinHigh = widget.sdIntContent.outerHeight(), 199 | 200 | coords = { 201 | 'high' : $(window).height(), 202 | 'width' : $.mobile.activePage.width(), 203 | 'fullTop' : $(window).scrollTop(), 204 | 'fullLeft': $(window).scrollLeft(), 205 | 'winTop' : docWinHighOff + ((widget.options.top !== false) ? widget.options.top : (( docWinHigh / 2 ) - ( diaWinHigh / 2 ) )), 206 | 'winLeft' : ((widget.options.left !== false) ? widget.options.left : (( docWinWidth / 2 ) - ( diaWinWidth / 2 ) )) 207 | }; 208 | 209 | if ( coords.winTop < 45 ) { coords.winTop = 45; } 210 | 211 | return coords; 212 | }, 213 | _orientChange: function(e) { 214 | var self = e.data.widget, 215 | o = e.data.widget.options, 216 | coords = e.data.widget._getCoords(e.data.widget); 217 | 218 | e.stopPropagation(); 219 | 220 | if ( self.isDialog === true ) { 221 | return true; 222 | } else { 223 | if ( o.fullScreen === true && ( coords.width < 400 || o.fullScreenForce === true ) ) { 224 | self.sdIntContent.css({'border': 'none', 'position': 'absolute', 'top': coords.fullTop, 'left': coords.fullLeft, 'height': coords.high, 'width': coords.width, 'maxWidth': coords.width }).removeClass('ui-simpledialog-hidden'); 225 | } else { 226 | self.sdIntContent.css({'position': 'absolute', 'top': coords.winTop, 'left': coords.winLeft}).removeClass('ui-simpledialog-hidden'); 227 | } 228 | } 229 | }, 230 | repos: function() { 231 | var bsEvent = { data: {widget:this}, stopPropagation: function () { return true; }}; 232 | this._orientChange(bsEvent); 233 | }, 234 | open: function() { 235 | var self = this, 236 | o = this.options, 237 | coords = this._getCoords(this); 238 | 239 | self.sdAllContent.find('.ui-btn-active').removeClass('ui-btn-active'); 240 | self.sdIntContent.delegate('[rel=close]', o.clickEvent, function (e) { e.preventDefault(); self.close(); }); 241 | 242 | if ( ( o.dialogAllow === true && coords.width < 400 ) || o.dialogForce ) { 243 | self.isDialog = true; 244 | 245 | if ( o.mode === 'blank' ) { // Custom selects do not play well with dialog mode - so, we turn them off. 246 | self.sdIntContent.find('select').each(function () { 247 | $(this).jqmData('nativeMenu', true); 248 | }); 249 | } 250 | 251 | self.displayAnchor.parent().unbind("pagehide.remove"); 252 | self.sdAllContent.append(self.sdIntContent); 253 | self.sdAllContent.trigger('create'); 254 | if ( o.headerText !== false ) { 255 | self.sdHeader.find('h1').appendTo(self.dialogPage.find('[data-role=header]')); 256 | self.sdIntContent.find('.ui-header').empty().removeClass(); 257 | } 258 | if ( o.headerClose === true ) { 259 | self.dialogPage.find('.ui-header a').bind('click', function () { 260 | setTimeout("$.mobile.sdCurrentDialog.destroy();", 1000); 261 | }); 262 | } else { 263 | self.dialogPage.find('.ui-header a').remove(); 264 | } 265 | 266 | self.sdIntContent.removeClass().css({'top': 'auto', 'width': 'auto', 'left': 'auto', 'marginLeft': 'auto', 'marginRight': 'auto', 'zIndex': o.zindex}); 267 | $.mobile.changePage(self.dialogPage, {'transition': (o.animate === true) ? o.transition : 'none'}); 268 | } else { 269 | self.isDialog = false; 270 | self.selects = []; 271 | 272 | if ( o.fullScreen === false ) { 273 | if ( o.showModal === true && o.animate === true ) { self.screen.fadeIn('slow'); } 274 | else { self.screen.removeClass('ui-simpledialog-hidden'); } 275 | } 276 | 277 | self.sdIntContent.addClass('ui-overlay-shadow in').css('zIndex', o.zindex).trigger('create'); 278 | 279 | if ( o.fullScreen === true && ( coords.width < 400 || o.fullScreenForce === true ) ) { 280 | self.sdIntContent.removeClass('ui-simpledialog-container').css({'border': 'none', 'position': 'absolute', 'top': coords.fullTop, 'left': coords.fullLeft, 'height': coords.high, 'width': coords.width, 'maxWidth': coords.width }).removeClass('ui-simpledialog-hidden'); 281 | } else { 282 | self.sdIntContent.css({'position': 'absolute', 'top': coords.winTop, 'left': coords.winLeft}).removeClass('ui-simpledialog-hidden'); 283 | } 284 | 285 | $(document).bind('orientationchange.simpledialog', {widget:self}, function(e) { self._orientChange(e); }); 286 | if ( o.resizeListener === true ) { 287 | $(window).bind('resize.simpledialog', {widget:self}, function (e) { self._orientChange(e); }); 288 | } 289 | } 290 | if ( $.isFunction(o.callbackOpen) ) { 291 | o.callbackOpen.apply(self, o.callbackOpenArgs); 292 | } 293 | }, 294 | close: function() { 295 | var self = this, o = this.options, retty; 296 | 297 | if ( $.isFunction(self.options.callbackClose) ) { 298 | retty = self.options.callbackClose.apply(self, self.options.callbackCloseArgs); 299 | if ( retty === false ) { return false; } 300 | } 301 | 302 | if ( self.isDialog ) { 303 | $(self.dialogPage).dialog('close'); 304 | self.sdIntContent.addClass('ui-simpledialog-hidden'); 305 | self.sdIntContent.appendTo(self.displayAnchor.parent()); 306 | if ( $.mobile.activePage.jqmData("page").options.domCache != true && $.mobile.activePage.is(":jqmData(external-page='true')") ) { 307 | $.mobile.activePage.bind("pagehide.remove", function () { 308 | $(this).remove(); 309 | }); 310 | } 311 | } else { 312 | if ( self.options.showModal === true && self.options.animate === true ) { 313 | self.screen.fadeOut('slow'); 314 | } else { 315 | self.screen.addClass('ui-simpledialog-hidden'); 316 | } 317 | self.sdIntContent.addClass('ui-simpledialog-hidden').removeClass('in'); 318 | $(document).unbind('orientationchange.simpledialog'); 319 | if ( self.options.resizeListener === true ) { $(window).unbind('resize.simpledialog'); } 320 | } 321 | 322 | if ( o.mode === 'blank' && o.blankContent !== false && o.blankContentAdopt === true ) { 323 | self.element.append(o.blankContent); 324 | o.blankContent = true; 325 | } 326 | 327 | if ( self.isDialog === true || self.options.animate === true ) { 328 | setTimeout(function(that) { return function () { that.destroy(); };}(self), 1000); 329 | } else { 330 | self.destroy(); 331 | } 332 | }, 333 | destroy: function() { 334 | var self = this, 335 | ele = self.element; 336 | 337 | if ( self.options.mode === 'blank' ) { 338 | $.mobile.sdCurrentDialog.sdIntContent.find('select').each(function() { 339 | if ( $(this).data('nativeMenu') == false ) { 340 | $(this).data('selectmenu').menuPage.remove(); 341 | $(this).data('selectmenu').screen.remove(); 342 | $(this).data('selectmenu').listbox.remove(); 343 | } 344 | }); 345 | } 346 | 347 | $(self.sdIntContent).remove(); 348 | $(self.dialogPage).remove(); 349 | $(self.screen).remove(); 350 | $(document).unbind('simpledialog.'+self.internalID); 351 | delete $.mobile.sdCurrentDialog; 352 | $.Widget.prototype.destroy.call(self); 353 | if ( self.options.safeNuke === true && $(ele).parents().length === 0 && $(ele).contents().length === 0 ) { 354 | ele.remove(); 355 | } 356 | }, 357 | updateBlank: function (newHTML) { 358 | var self = this, 359 | o = this.options; 360 | 361 | self.sdIntContent.empty(); 362 | 363 | if ( o.headerText !== false || o.headerClose !== false ) { 364 | self.sdHeader = $('
    '); 365 | if ( o.headerClose === true ) { 366 | $("Close").appendTo(self.sdHeader).buttonMarkup({ theme : o.themeHeader, icon : 'delete', iconpos: 'notext', corners: true, shadow : true }); 367 | } 368 | $('

    '+((o.headerText !== false)?o.headerText:'')+'

    ').appendTo(self.sdHeader); 369 | self.sdHeader.appendTo(self.sdIntContent); 370 | } 371 | 372 | $(newHTML).appendTo(self.sdIntContent); 373 | self.sdIntContent.trigger('create'); 374 | $(document).trigger('orientationchange.simpledialog'); 375 | }, 376 | _init: function() { 377 | this.open(); 378 | } 379 | }); 380 | })( jQuery ); 381 | -------------------------------------------------------------------------------- /screens/README.md: -------------------------------------------------------------------------------- 1 | jQuery-Mobile-SimpleDialog 2 | ========================== 3 | 4 | Screen Shots. 5 | -------------------------------------------------------------------------------- /screens/SimpleDialog-Boolean-DialogPage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jtsage/jquery-mobile-simpledialog/1ecc6b29c922a139fe870f8b809fdd1a06dd1777/screens/SimpleDialog-Boolean-DialogPage.png -------------------------------------------------------------------------------- /screens/SimpleDialog-Boolean-Popup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jtsage/jquery-mobile-simpledialog/1ecc6b29c922a139fe870f8b809fdd1a06dd1777/screens/SimpleDialog-Boolean-Popup.png -------------------------------------------------------------------------------- /screens/SimpleDialog-String-DialogPage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jtsage/jquery-mobile-simpledialog/1ecc6b29c922a139fe870f8b809fdd1a06dd1777/screens/SimpleDialog-String-DialogPage.png -------------------------------------------------------------------------------- /screens/SimpleDialog-String-Popup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jtsage/jquery-mobile-simpledialog/1ecc6b29c922a139fe870f8b809fdd1a06dd1777/screens/SimpleDialog-String-Popup.png -------------------------------------------------------------------------------- /tests/.gitignore: -------------------------------------------------------------------------------- 1 | arch/* 2 | -------------------------------------------------------------------------------- /tests/2datebox.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | jQueryMobile - SimpleDialog2 Dev 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
    24 |
    25 |

    jQueryMobile - SimpleDialog2 Dev

    26 |
    27 |
    28 |
    29 | 30 |
    31 |

    jQuery Mobile Framework :: SimpleDialog

    32 |

    A Popup Dialog Box for jQueryMobile

    33 | 34 |
    35 | 36 |

    SimpleDialog2 aims to be a replacement for javascript dialog(), written for jQM.

    37 | 38 |
    39 | 40 |
    41 |

    w/ DateBox Demo

    42 |

    And yes, the date is required in there...

    43 |

    You set this date:

    44 | 70 | Open Dialog 71 | 72 | 73 |
    74 | 75 |
    76 |
    77 |
    78 |
    79 | 80 | -------------------------------------------------------------------------------- /tests/2dev.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | jQueryMobile - SimpleDialog2 Dev 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
    23 |
    24 |

    jQueryMobile - SimpleDialog2 Dev

    25 |
    26 |
    27 |
    28 | 29 |
    30 |

    jQuery Mobile Framework :: SimpleDialog

    31 |

    A Popup Dialog Box for jQueryMobile

    32 | 33 |
    34 | 35 |

    SimpleDialog aims to be a replacement for javascript dialog(), written for jQM.

    36 | 37 |
    38 | 39 |
    40 |

    Fullscreen Mode

    41 |

    The world looks mighty good to me, cause Tootsie Rolls are all I see. Whatever it is I think I see, becomes a Tootsie Roll to me! Tootsie Roll how I love your chocolatey chew, Tootsie Roll I think I'm in love with you. Whatever it is I think I see, becomes a Tootsie Roll to me!

    42 |

    The world looks mighty good to me, cause Tootsie Rolls are all I see. Whatever it is I think I see, becomes a Tootsie Roll to me! Tootsie Roll how I love your chocolatey chew, Tootsie Roll I think I'm in love with you. Whatever it is I think I see, becomes a Tootsie Roll to me!

    43 |

    The world looks mighty good to me, cause Tootsie Rolls are all I see. Whatever it is I think I see, becomes a Tootsie Roll to me! Tootsie Roll how I love your chocolatey chew, Tootsie Roll I think I'm in love with you. Whatever it is I think I see, becomes a Tootsie Roll to me!

    44 |

    You clicked:

    45 | 93 | Open Dialog 94 | 95 | 96 |
    97 | 98 |
    99 |
    100 |
    101 |
    102 | 103 | -------------------------------------------------------------------------------- /tests/README.md: -------------------------------------------------------------------------------- 1 | jQuery-Mobile-SimpleDialog 2 | ========================== 3 | 4 | Misc test files, for development. 5 | -------------------------------------------------------------------------------- /tests/dev.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | jQueryMobile - SimpleDialog Dev 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
    21 |
    22 |

    jQueryMobile - SimpleDialog Dev

    23 |
    24 |
    25 |
    26 | 27 |
    28 |

    jQuery Mobile Framework :: SimpleDialog

    29 |

    A Popup Dialog Box for jQueryMobile

    30 | 31 |
    32 | 33 |

    SimpleDialog aims to be a replacement for javascript dialog(), written for jQM.

    34 | 35 |
    36 | 37 |
    38 |

    Fullscreen Mode

    39 |

    The world looks mighty good to me, cause Tootsie Rolls are all I see. Whatever it is I think I see, becomes a Tootsie Roll to me! Tootsie Roll how I love your chocolatey chew, Tootsie Roll I think I'm in love with you. Whatever it is I think I see, becomes a Tootsie Roll to me!

    40 |

    The world looks mighty good to me, cause Tootsie Rolls are all I see. Whatever it is I think I see, becomes a Tootsie Roll to me! Tootsie Roll how I love your chocolatey chew, Tootsie Roll I think I'm in love with you. Whatever it is I think I see, becomes a Tootsie Roll to me!

    41 |

    The world looks mighty good to me, cause Tootsie Rolls are all I see. Whatever it is I think I see, becomes a Tootsie Roll to me! Tootsie Roll how I love your chocolatey chew, Tootsie Roll I think I'm in love with you. Whatever it is I think I see, becomes a Tootsie Roll to me!

    42 |

    The world looks mighty good to me, cause Tootsie Rolls are all I see. Whatever it is I think I see, becomes a Tootsie Roll to me! Tootsie Roll how I love your chocolatey chew, Tootsie Roll I think I'm in love with you. Whatever it is I think I see, becomes a Tootsie Roll to me!

    43 |

    The world looks mighty good to me, cause Tootsie Rolls are all I see. Whatever it is I think I see, becomes a Tootsie Roll to me! Tootsie Roll how I love your chocolatey chew, Tootsie Roll I think I'm in love with you. Whatever it is I think I see, becomes a Tootsie Roll to me!

    44 |

    The world looks mighty good to me, cause Tootsie Rolls are all I see. Whatever it is I think I see, becomes a Tootsie Roll to me! Tootsie Roll how I love your chocolatey chew, Tootsie Roll I think I'm in love with you. Whatever it is I think I see, becomes a Tootsie Roll to me!

    45 |

    The world looks mighty good to me, cause Tootsie Rolls are all I see. Whatever it is I think I see, becomes a Tootsie Roll to me! Tootsie Roll how I love your chocolatey chew, Tootsie Roll I think I'm in love with you. Whatever it is I think I see, becomes a Tootsie Roll to me!

    46 |

    The world looks mighty good to me, cause Tootsie Rolls are all I see. Whatever it is I think I see, becomes a Tootsie Roll to me! Tootsie Roll how I love your chocolatey chew, Tootsie Roll I think I'm in love with you. Whatever it is I think I see, becomes a Tootsie Roll to me!

    47 |

    The world looks mighty good to me, cause Tootsie Rolls are all I see. Whatever it is I think I see, becomes a Tootsie Roll to me! Tootsie Roll how I love your chocolatey chew, Tootsie Roll I think I'm in love with you. Whatever it is I think I see, becomes a Tootsie Roll to me!

    48 |

    You clicked:

    49 | 65 | Open Dialog 66 | 67 | 68 |
    69 | 70 |
    71 | 76 |
    77 | 78 | --------------------------------------------------------------------------------