Skip to content

Instantly share code, notes, and snippets.

@oroce

oroce/simple-with-close-event.js

Created November 23, 2011 14:55
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save oroce/1388871 to your computer and use it in GitHub Desktop.
Save oroce/1388871 to your computer and use it in GitHub Desktop.
Download ZIP
open jQuery Mobile Dialog from javascript with close event
Raw
simple-with-close-event.js
//unfortunately the jQuery mobile team removed option, to attaching custom event handler,
//so i'm just overriding close event, and using jQuery Widget Library _trigger method
$.mobile.dialog.prototype._close = $.mobile.dialog.prototype.close;
$.mobile.dialog.prototype.close = function(){
var args = Array.prototype.slice.call( arguments, 0 );
this._trigger( "close" );
this._close.apply( this, args );
};
$( document ).ready(function(){
$( "#open-dialog" ).click(function( e ){
var dialog = $( $( "#template-dialog" ).html() ); //actually i'm using here sg like this: _.template( $( "#template-dialog" ).html(), propObject );
dialog
.dialog({
close: function(){
console.log( "dialogClose", this, arguments );
}
})
.appendTo( document.body );
$.mobile.changePage( dialog, { transition: "pop", role: "dialog", reverse: false } );
});
});
Raw
simple.html
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="jquery-mobile.css" />
<script src="jquery.js"></script>
<script src="jquery-mobile.js"></script>
<script src="simple.js"></script>
<script type="text/template" id="template-dialog">
<div data-role="page">
<div data-role="header" data-theme="d">
<h1>Dialog</h1>
</div>
<div data-role="content" data-theme="c">
<h1>Delete page?</h1>
<p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
<a href="docs-dialogs.html" data-role="button" data-rel="back" data-theme="b">Sounds good</a>
<a href="docs-dialogs.html" data-role="button" data-rel="back" data-theme="c">Cancel</a>
</div>
</div>
</script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="d">
<h1>Page</h1>
</div>
<div data-role="content" data-theme="c">
<button id="open-dialog">Open dialog with js</button>
</div>
</div>
</body>
</html>
Raw
simple.js
$( document ).ready(function(){
$( "#open-dialog" ).click(function( e ){
var dialog = $( $( "#template-dialog" ).html() ); //actually i'm using here sg like this: _.template( $( "#template-dialog" ).html(), propObject );
dialog
.dialog()
.appendTo( document.body );
$.mobile.changePage( dialog, { transition: "pop", role: "dialog", reverse: false } );
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment