Skip to content

Instantly share code, notes, and snippets.

@egstar

egstar/index.html

Created May 12, 2021 11:59
Show Gist options
  • Save egstar/5d1448829d8db8781c4b70b52a2e0665 to your computer and use it in GitHub Desktop.
Save egstar/5d1448829d8db8781c4b70b52a2e0665 to your computer and use it in GitHub Desktop.
Download ZIP
Sandbox - jQuery DialogExtend // source https://jsbin.com/xaxaqeh
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Sandbox - jQuery DialogExtend</title>
<meta charset=utf-8 />
<link class="jsbin" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script class="jsbin" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script type="text/javascript">
/*! jquery-dialogextend 2013-04-25 */
(function(){var i;i=jQuery,i.widget("ui.dialogExtend",{version:"2.0.0",modes:{},options:{closable:!0,dblclick:!1,titlebar:!1,icons:{close:"ui-icon-closethick",restore:"ui-icon-newwin"},load:null,beforeRestore:null,restore:null},_create:function(){return this.state="normal",i(this.element[0]).data("ui-dialog")||i.error("jQuery.dialogExtend Error : Only jQuery UI Dialog element is accepted"),this._verifyOptions(),this._initStyles(),this._initButtons(),this._initTitleBar(),this._setState("normal"),this._on("load",function(i){return console.log("test",i)}),this._trigger("load")},_setState:function(t){return i(this.element[0]).removeClass("ui-dialog-"+this.state).addClass("ui-dialog-"+t),this.state=t},_verifyOptions:function(){var t,e,o;!this.options.dblclick||this.options.dblclick in this.modes||(i.error("jQuery.dialogExtend Error : Invalid <dblclick> value '"+this.options.dblclick+"'"),this.options.dblclick=!1),this.options.titlebar&&"none"!==(e=this.options.titlebar)&&"transparent"!==e&&(i.error("jQuery.dialogExtend Error : Invalid <titlebar> value '"+this.options.titlebar+"'"),this.options.titlebar=!1),o=[];for(t in this.modes)this["_verifyOptions_"+t]?o.push(this["_verifyOptions_"+t]()):o.push(void 0);return o},_initStyles:function(){var t,e,o;i(".dialog-extend-css").length||(e="",e+='<style class="dialog-extend-css" type="text/css">',e+=".ui-dialog .ui-dialog-titlebar-buttonpane>a { float: right; }",e+=".ui-dialog .ui-dialog-titlebar-restore { width: 19px; height: 18px; }",e+=".ui-dialog .ui-dialog-titlebar-restore span { display: block; margin: 1px; }",e+=".ui-dialog .ui-dialog-titlebar-restore:hover,",e+=".ui-dialog .ui-dialog-titlebar-restore:focus { padding: 0; }",e+=".ui-dialog .ui-dialog-titlebar ::selection { background-color: transparent; }",e+="</style>",i(e).appendTo("body")),o=[];for(t in this.modes)o.push(this["_initStyles_"+t]());return o},_initButtons:function(){var t,e,o,a,n,l=this;a=i(this.element[0]).dialog("widget").find(".ui-dialog-titlebar"),t=i('<div class="ui-dialog-titlebar-buttonpane"></div>').appendTo(a),t.css({position:"absolute",top:"50%",right:"0.3em","margin-top":"-10px",height:"18px"}),a.find(".ui-dialog-titlebar-close").css({position:"relative","float":"right",top:"auto",right:"auto",margin:0}).find(".ui-icon").removeClass("ui-icon-closethick").addClass(this.options.icons.close).end().appendTo(t).end(),t.append('<a class="ui-dialog-titlebar-restore ui-corner-all ui-state-default" href="#"><span class="ui-icon '+this.options.icons.restore+'">restore</span></a>').find(".ui-dialog-titlebar-restore").attr("role","button").mouseover(function(){return i(this).addClass("ui-state-hover")}).mouseout(function(){return i(this).removeClass("ui-state-hover")}).focus(function(){return i(this).addClass("ui-state-focus")}).blur(function(){return i(this).removeClass("ui-state-focus")}).end().find(".ui-dialog-titlebar-close").toggle(this.options.closable).end().find(".ui-dialog-titlebar-restore").hide().click(function(i){return i.preventDefault(),l.restore()}).end(),n=this.modes;for(o in n)e=n[o],this._initModuleButton(o,e);return a.dblclick(function(){return l.options.dblclick?"normal"!==l.state?l.restore():l[l.options.dblclick]():void 0}).select(function(){return!1})},_initModuleButton:function(t,e){var o,a=this;return o=i(this.element[0]).dialog("widget").find(".ui-dialog-titlebar-buttonpane"),o.append('<a class="ui-dialog-titlebar-'+t+' ui-corner-all ui-state-default" href="#"><span class="ui-icon '+this.options.icons[t]+'">'+t+"</span></a>").find(".ui-dialog-titlebar-"+t).attr("role","button").mouseover(function(){return i(this).addClass("ui-state-hover")}).mouseout(function(){return i(this).removeClass("ui-state-hover")}).focus(function(){return i(this).addClass("ui-state-focus")}).blur(function(){return i(this).removeClass("ui-state-focus")}).end().find(".ui-dialog-titlebar-"+t).toggle(this.options[e.option]).click(function(i){return i.preventDefault(),a[t]()}).end()},_initTitleBar:function(){var t;switch(this.options.titlebar){case!1:return 0;case"none":return i(this.element[0]).dialog("option","draggable")&&(t=i("<div />").addClass("ui-dialog-draggable-handle").css("cursor","move").height(5),i(this.element[0]).dialog("widget").prepend(t).draggable("option","handle",t)),i(this.element[0]).dialog("widget").find(".ui-dialog-titlebar").find(".ui-dialog-title").html("&nbsp;").end().css({"background-color":"transparent","background-image":"none",border:0,position:"absolute",right:0,top:0,"z-index":9999}).end();case"transparent":return i(this.element[0]).dialog("widget").find(".ui-dialog-titlebar").css({"background-color":"transparent","background-image":"none",border:0});default:return i.error("jQuery.dialogExtend Error : Invalid <titlebar> value '"+this.options.titlebar+"'")}},state:function(){return this.state},restore:function(){return this._trigger("beforeRestore"),this._restore(),this._setState("normal"),this._toggleButtons(),this._trigger("restore")},_restore:function(){return this["_restore_"+this.state]()},_saveSnapshot:function(){return"normal"===this.state?(this.original_config_resizable=i(this.element[0]).dialog("option","resizable"),this.original_config_draggable=i(this.element[0]).dialog("option","draggable"),this.original_size_height=i(this.element[0]).dialog("widget").height(),this.original_size_width=i(this.element[0]).dialog("option","width"),this.original_size_maxHeight=i(this.element[0]).dialog("option","maxHeight"),this.original_position_mode=i(this.element[0]).dialog("widget").css("position"),this.original_position_left=i(this.element[0]).dialog("widget").offset().left,this.original_position_top=i(this.element[0]).dialog("widget").offset().top,this.original_titlebar_wrap=i(this.element[0]).dialog("widget").find(".ui-dialog-titlebar").css("white-space")):void 0},_loadSnapshot:function(){return{config:{resizable:this.original_config_resizable,draggable:this.original_config_draggable},size:{height:this.original_size_height,width:this.original_size_width,maxHeight:this.original_size_maxHeight},position:{mode:this.original_position_mode,left:this.original_position_left,top:this.original_position_top},titlebar:{wrap:this.original_titlebar_wrap}}},_toggleButtons:function(){var t,e,o,a;i(this.element[0]).dialog("widget").find(".ui-dialog-titlebar-restore").toggle("normal"!==this.state).css({right:"1.4em"}).end(),o=this.modes,a=[];for(e in o)t=o[e],a.push(i(this.element[0]).dialog("widget").find(".ui-dialog-titlebar-"+e).toggle(this.state!==t.state&&this.options[t.option]));return a}})}).call(this),function(){var i;i=jQuery,i.extend(!0,i.ui.dialogExtend.prototype,{modes:{collapse:{option:"collapsable",state:"collapsed"}},options:{collapsable:!1,icons:{collapse:"ui-icon-triangle-1-s"},beforeCollapse:null,collapse:null},collapse:function(){var t;return t=i(this.element[0]).dialog("widget").find(".ui-dialog-titlebar").height()+15,this._trigger("beforeCollapse"),this._saveSnapshot(),i(this.element[0]).dialog("option",{resizable:!1,height:t,maxHeight:t}).hide().dialog("widget").find(".ui-dialog-buttonpane:visible").hide().end().find(".ui-dialog-titlebar").css("white-space","nowrap").end().find(".ui-dialog-content"),this._setState("collapsed"),this._toggleButtons(),this._trigger("collapse")},_restore_collapsed:function(){var t;return t=this._loadSnapshot(),i(this.element[0]).show().dialog("widget").find(".ui-dialog-buttonpane:hidden").show().end().find(".ui-dialog-titlebar").css("white-space",t.titlebar.wrap).end().find(".ui-dialog-content").dialog("option",{resizable:t.config.resizable,height:t.size.height,maxHeight:t.size.maxHeight})},_initStyles_collapse:function(){var t;return i(".dialog-extend-collapse-css").length?void 0:(t="",t+='<style class="dialog-extend-collapse-css" type="text/css">',t+=".ui-dialog .ui-dialog-titlebar-collapse { width: 19px; height: 18px; }",t+=".ui-dialog .ui-dialog-titlebar-collapse span { display: block; margin: 1px; }",t+=".ui-dialog .ui-dialog-titlebar-collapse:hover,",t+=".ui-dialog .ui-dialog-titlebar-collapse:focus { padding: 0; }",t+="</style>",i(t).appendTo("body"))}})}.call(this),function(){var i;i=jQuery,i.extend(!0,i.ui.dialogExtend.prototype,{modes:{maximize:{option:"maximizable",state:"maximized"}},options:{maximizable:!1,icons:{maximize:"ui-icon-extlink"},beforeMaximize:null,maximize:null},maximize:function(){var t,e;return t=i(window).height()-11,e=i(window).width()-11,this._trigger("beforeMaximize"),"normal"!==this.state&&this._restore(),this._saveSnapshot(),i(this.element[0]).dialog("option","draggable")&&i(this.element[0]).dialog("widget").draggable("option","handle",null).find(".ui-dialog-draggable-handle").css("cursor","text").end(),i(this.element[0]).dialog("widget").css("position","fixed").find(".ui-dialog-content").show().dialog("widget").find(".ui-dialog-buttonpane").show().end().find(".ui-dialog-content").dialog("option",{resizable:!1,draggable:!1,height:t,width:e,position:{my:"left top",at:"left top"}}),this._setState("maximized"),this._toggleButtons(),this._trigger("maximize")},_restore_maximized:function(){var t;return t=this._loadSnapshot(),i(this.element[0]).dialog("widget").css("position",t.position.mode).find(".ui-dialog-titlebar").css("white-space",t.titlebar.wrap).end().find(".ui-dialog-content").dialog("option",{resizable:t.config.resizable,draggable:t.config.draggable,height:t.size.height,width:t.size.width,maxHeight:t.size.maxHeight}).dialog("widget").offset({top:t.position.top,left:t.position.left}),i(this.element[0]).dialog("option","draggable")?i(this.element[0]).dialog("widget").draggable("option","handle",i(this.element[0]).dialog("widget").find(".ui-dialog-draggable-handle").length?i(this.element[0]).dialog("widget").find(".ui-dialog-draggable-handle"):".ui-dialog-titlebar").find(".ui-dialog-draggable-handle").css("cursor","move"):void 0},_initStyles_maximize:function(){var t;return i(".dialog-extend-maximize-css").length?void 0:(t="",t+='<style class="dialog-extend-maximize-css" type="text/css">',t+=".ui-dialog .ui-dialog-titlebar-maximize { width: 19px; height: 18px; }",t+=".ui-dialog .ui-dialog-titlebar-maximize span { display: block; margin: 1px; }",t+=".ui-dialog .ui-dialog-titlebar-maximize:hover,",t+=".ui-dialog .ui-dialog-titlebar-maximize:focus { padding: 0; }",t+="</style>",i(t).appendTo("body"))}})}.call(this),function(){var i;i=jQuery,i.extend(!0,i.ui.dialogExtend.prototype,{modes:{minimize:{option:"minimizable",state:"minimized"}},options:{minimizable:!1,minimizeLocation:"left",icons:{minimize:"ui-icon-minus"},beforeMinimize:null,minimize:null},minimize:function(){var t,e,o,a;return e=i(this.element[0]).dialog("widget").find(".ui-dialog-titlebar").height()+15,o=200,t=i("#dialog-extend-fixed-container").length?i("#dialog-extend-fixed-container"):i('<div id="dialog-extend-fixed-container"></div>').appendTo("body"),t.css({position:"fixed",bottom:1,left:1,right:1,"z-index":9999}),a=i("<div/>").css({"float":this.options.minimizeLocation,margin:1}),t.append(a),i(this.element[0]).data("dialog-extend-minimize-overlay",a),this._trigger("beforeMinimize"),this._saveSnapshot(),i(this.element[0]).dialog("option","draggable")&&i(this.element[0]).dialog("widget").draggable("option","handle",null).find(".ui-dialog-draggable-handle").css("cursor","text").end(),i(this.element[0]).dialog("option",{resizable:!1,draggable:!1,height:e,width:o}).on("dialogclose",this._minimize_removeOverlay).dialog("widget").css("position","static").appendTo(a).find(".ui-dialog-content").dialog("widget").find(".ui-dialog-titlebar").each(function(){var t,e,o;return o=i(this),t=o.find(".ui-dialog-titlebar-buttonpane"),e=o.find(".ui-dialog-title"),e.css({overflow:"hidden",width:o.width()-t.width()+10})}).end().find(".ui-dialog-content").hide().dialog("widget").find(".ui-dialog-buttonpane:visible").hide().end().find(".ui-dialog-titlebar").css("white-space","nowrap").end().find(".ui-dialog-content"),this._setState("minimized"),this._toggleButtons(),this._trigger("minimize")},_restore_minimized:function(){var t;return t=this._loadSnapshot(),i(this.element[0]).dialog("widget").appendTo("body").css({"float":"none",margin:0,position:t.position.mode}).find(".ui-dialog-content").dialog("widget").find(".ui-dialog-title").css("width","auto").end().find(".ui-dialog-content").show().dialog("widget").find(".ui-dialog-buttonpane:hidden").show().end().find(".ui-dialog-titlebar").css("white-space",t.titlebar.wrap).end().find(".ui-dialog-content").dialog("option",{resizable:t.config.resizable,draggable:t.config.draggable,height:t.size.height,width:t.size.width,maxHeight:t.size.maxHeight}).off("dialogclose",this._minimize_removeOverlay).dialog("widget").offset({top:t.position.top,left:t.position.left}),i(this.element[0]).dialog("option","draggable")&&i(this.element[0]).dialog("widget").draggable("option","handle",i(this.element[0]).dialog("widget").find(".ui-dialog-draggable-handle").length?i(this.element[0]).dialog("widget").find(".ui-dialog-draggable-handle"):".ui-dialog-titlebar").find(".ui-dialog-draggable-handle").css("cursor","move"),i(this.element[0]).data("dialog-extend-minimize-overlay").remove(),i(this.element[0]).removeData("dialog-extend-overlay")},_initStyles_minimize:function(){var t;return i(".dialog-extend-minimize-css").length?void 0:(t="",t+='<style class="dialog-extend-minimize-css" type="text/css">',t+=".ui-dialog .ui-dialog-titlebar-minimize { width: 19px; height: 18px; }",t+=".ui-dialog .ui-dialog-titlebar-minimize span { display: block; margin: 1px; }",t+=".ui-dialog .ui-dialog-titlebar-minimize:hover,",t+=".ui-dialog .ui-dialog-titlebar-minimize:focus { padding: 0; }",t+="</style>",i(t).appendTo("body"))},_verifyOptions_minimize:function(){var t;return!this.options.minimizeLocation||"left"!==(t=this.options.minimizeLocation)&&"right"!==t?(i.error("jQuery.dialogExtend Error : Invalid <minimizeLocation> value '"+this.options.minimizeLocation+"'"),this.options.minimizeLocation="left"):void 0},_minimize_removeOverlay:function(){return i(this).data("dialog-extend-minimize-overlay").remove(),i(this).removeData("dialog-extend-overlay")}})}.call(this);
</script>
<style id="jsbin-css">
body { color: #333333; font-family: Times, Helvetica, Arial; font-size: 16px; }
.ui-dialog { font-size: 12px; }
/***** HEADER *****/
header { background-color: #f0f0f0; border-radius: 1em; box-shadow: inset 0 0 10px gray; padding: 1em 1.5em 1.5em 1.5em; }
header h1 { margin: 0 0 0.5em 0; }
header ul { margin: 1em 0 0 0; }
/***** CONTENT *****/
section fieldset { margin: 5px; width: 200px; }
section label { cursor: pointer; }
#config-icon .wrapper { clear: both; }
#config-icon ins { float: left; margin: 0 5px 0 0; }
#config-icon label { float: left; }
#config-icon select { float: right; width: 100px; }
#config-method button { width: 48%; }
/***** FOOTER *****/
footer { clear: both; padding-top: 2em; }
footer button { background-color: #e0e0e0; border: none; border-radius: 1em; box-shadow: 0 5px 5px silver; cursor: pointer; font-size: 300%; padding: 10px 0 10px 0; text-align: center; width: 100%; }
footer button:hover { background-color: #d0d0d0; box-shadow: 0 5px 5px #aaaaaa; }
footer button:active { box-shadow: 0 4px 4px #aaaaaa; position: relative; top: 1px; }
</style>
<style id="jsbin-css">
body { color: #333333; font-family: Times, Helvetica, Arial; font-size: 16px; }
.ui-dialog { font-size: 12px; }
/***** HEADER *****/
header { background-color: #f0f0f0; border-radius: 1em; box-shadow: inset 0 0 10px gray; padding: 1em 1.5em 1.5em 1.5em; }
header h1 { margin: 0 0 0.5em 0; }
header ul { margin: 1em 0 0 0; }
/***** CONTENT *****/
section fieldset { margin: 5px; width: 200px; }
section label { cursor: pointer; }
#config-icon .wrapper { clear: both; }
#config-icon ins { float: left; margin: 0 5px 0 0; }
#config-icon label { float: left; }
#config-icon select { float: right; width: 100px; }
#config-method button { width: 48%; }
/***** FOOTER *****/
footer { clear: both; padding-top: 2em; }
footer button { background-color: #e0e0e0; border: none; border-radius: 1em; box-shadow: 0 5px 5px silver; cursor: pointer; font-size: 300%; padding: 10px 0 10px 0; text-align: center; width: 100%; }
footer button:hover { background-color: #d0d0d0; box-shadow: 0 5px 5px #aaaaaa; }
footer button:active { box-shadow: 0 4px 4px #aaaaaa; position: relative; top: 1px; }
</style>
</head>
<body>
<header>
<h1>jQuery DialogExtend Test Tool</h1>
<ul>
<li><strong>DialogExtend</strong> {version 2.0.0}</li>
<li><strong>jQuery</strong> {version 1.9.1}</li>
<li><strong>jQueryUI</strong> {version 1.10.2}</li>
</ul>
</header>
<section>
<form id="my-form">
<h2>Configuration</h2>
<div style="float: left;">
<fieldset id="config-button">
<legend>Buttons</legend>
<div>
<input type="checkbox" id="button-close" checked="checked" />
<label for="button-close">Close button</label>
</div>
<div>
<input type="checkbox" id="button-maximize" checked="checked" />
<label for="button-maximize">Maximize button</label>
</div>
<div>
<input type="checkbox" id="button-minimize" checked="checked" />
<label for="button-minimize">Minimize button</label>
</div>
<div>
<input type="checkbox" id="button-collapse" checked="checked" />
<label for="button-collapse">Collapse button</label>
</div>
</fieldset>
<fieldset id="config-icon">
<legend>Icons</legend>
<div class="wrapper">
<ins class="ui-state-default ui-corner-all"></ins>
<label for="icon-close">Close:</label>
<select id="icon-close" name="icon" rel="close">
<option value="ui-icon-closethick">(default)</option>
<option value="ui-icon-close">ui-icon-close</option>
<option value="ui-icon-cancel">ui-icon-cancel</option>
<option value="ui-icon-circle-close">ui-icon-circle-close</option>
</select>
</div>
<div class="wrapper">
<ins class="ui-state-default ui-corner-all"></ins>
<label for="icon-maximize">Maximize:</label>
<select id="icon-maximize" name="icon" rel="maximize">
<option value="ui-icon-extlink">(default)</option>
<option value="ui-icon-carat-1-ne">ui-icon-carat-1-ne</option>
<option value="ui-icon-arrow-4-diag">ui-icon-arrow-4-diag</option>
<option value="ui-icon-circle-plus">ui-icon-circle-plus</option>
</select>
</div>
<div class="wrapper">
<ins class="ui-state-default ui-corner-all"></ins>
<label for="icon-minimize">Minimize:</label>
<select id="icon-minimize" name="icon" rel="minimize">
<option value="ui-icon-minus">(default)</option>
<option value="ui-icon-carat-1-sw">ui-icon-carat-1-sw</option>
<option value="ui-icon-arrowstop-1-s">ui-icon-arrowstop-1-s</option>
<option value="ui-icon-circle-minus">ui-icon-circle-minus</option>
</select>
</div>
<div class="wrapper">
<ins class="ui-state-default ui-corner-all"></ins>
<label for="icon-restore">Restore:</label>
<select id="icon-restore" name="icon" rel="restore">
<option value="ui-icon-newwin">(default)</option>
<option value="ui-icon-carat-2-n-s">ui-icon-carat-2-n-s</option>
<option value="ui-icon-refresh">ui-icon-refresh</option>
<option value="ui-icon-circle-arrow-n">ui-icon-circle-arrow-n</option>
</select>
</div>
</fieldset>
</div>
<div style="float: left;">
<fieldset id="config-dblclick">
<legend>Double-click</legend>
<div>
<input type="radio" name="dblclick" id="dblclick-default" value="" />
<label for="dblclick-default">(none)</label>
</div>
<div>
<input type="radio" name="dblclick" id="dblclick-collapse" value="collapse" checked="checked" />
<label for="dblclick-collapse">collapse</label>
</div>
<div>
<input type="radio" name="dblclick" id="dblclick-maximize" value="maximize" />
<label for="dblclick-maximize">maximize</label>
</div>
<div>
<input type="radio" name="dblclick" id="dblclick-minimize" value="minimize" />
<label for="dblclick-minimize">minimize</label>
</div>
</fieldset>
<fieldset>
<legend>Minimize location</legend>
<div>
<input type="radio" name="minimizeLocation" id="minimizeLocation-left" value="left" checked="checked" />
<label for="minimizeLocation-left">left</label>
</div>
<div>
<input type="radio" name="minimizeLocation" id="minimizeLocation-right" value="right" />
<label for="minimizeLocation-left">right</label>
</div>
</fieldset>
<fieldset id="config-titlebar">
<legend>Title bar</legend>
<div>
<input type="radio" name="titlebar" id="titlebar-default" value="" checked="checked" />
<label for="titlebar-default">(default)</label>
</div>
<div>
<input type="radio" name="titlebar" id="titlebar-none" value="none" />
<label for="titlebar-none">none</label>
</div>
<div>
<input type="radio" name="titlebar" id="titlebar-transparent" value="transparent" />
<label for="titlebar-transparent">transparent</label>
</div>
</fieldset>
</div>
<div style="float: left;">
<fieldset id="config-event">
<legend>Events</legend>
<div>
<input type="checkbox" name="event" id="event-load" rel="load" checked="checked" />
<label for="event-load">load</label>
</div>
<div>
<input type="checkbox" name="event" id="event-b4collapse" rel="beforeCollapse" checked="checked" />
<label for="event-b4collapse">beforeCollapse</label>
</div>
<div>
<input type="checkbox" name="event" id="event-b4maximize" rel="beforeMaximize" checked="checked" />
<label for="event-b4maximize">beforeMaximize</label>
</div>
<div>
<input type="checkbox" name="event" id="event-b4minimize" rel="beforeMinimize" checked="checked" />
<label for="event-b4minimize">beforeMinimize</label>
</div>
<div>
<input type="checkbox" name="event" id="event-b4restore" rel="beforeRestore" checked="checked" />
<label for="event-b4restore">beforeRestore</label>
</div>
<div>
<input type="checkbox" name="event" id="event-collapse" rel="collapse" checked="checked" />
<label for="event-collapse">collapse</label>
</div>
<div>
<input type="checkbox" name="event" id="event-maximize" rel="maximize" checked="checked" />
<label for="event-maximize">maximize</label>
</div>
<div>
<input type="checkbox" name="event" id="event-minimize" rel="minimize" checked="checked" />
<label for="event-minimize">minimize</label>
</div>
<div>
<input type="checkbox" name="event" id="event-restore" rel="restore" checked="checked" />
<label for="event-restore">restore</label>
</div>
</fieldset>
</div>
<div style="float: left;">
<fieldset id="config-method">
<legend>Methods <small><em>(apply to last dialog)</em></small></legend>
<div>
<button type="button" id="method-collapse">collapse</button>
<button type="button" id="method-maximize">maximize</button>
<button type="button" id="method-minimize">minimize</button>
<button type="button" id="method-restore">restore</button>
<button type="button" id="method-state">state</button>
</div>
</fieldset>
<fieldset id="config-dialog">
<legend>Dialog</legend>
<div>
<input type="checkbox" id="is-modal" />
<label for="is-modal">Modal Dialog</label>
</div>
<div>
<input type="checkbox" id="button-cancel" checked="checked" />
<label for="button-cancel">Cancel Button</label>
</div>
<div>
<input type="checkbox" id="is-resizable" checked="checked" />
<label for="is-resizable">Resizable</label>
</div>
<div>
<input type="checkbox" id="is-draggable" checked="checked" />
<label for="is-draggable">Draggable</label>
</div>
</fieldset>
</form>
</section>
<br clear="both" />
<footer>
<button type="button" id="my-button">Click Me</button>
<div style="padding-top: 100em;">(demo dialogExtend features with page scroll)</div>
</footer>
<script id="jsbin-javascript">
$(function(){
// preview icon
$("#config-icon select")
.change(function(){
var icon = "<span class='ui-icon "+$(this).val()+"'></span>";
$(this).parents(".wrapper").find("ins").html(icon);
})
.trigger("change");
// click to open dialog
$("#my-button").click(function(){
//dialog options
var dialogOptions = {
"title" : "dialog@" + new Date().getTime(),
"width" : 400,
"height" : 300,
"modal" : $("#is-modal").is(":checked"),
"resizable" : $("#is-resizable").is(":checked"),
"draggable" : $("#is-draggable").is(":checked"),
"close" : function(){ $(this).remove(); }
};
if ( $("#button-cancel").is(":checked") ) {
dialogOptions.buttons = { "Cancel" : function(){ $(this).dialog("close"); } };
}
// dialog-extend options
var dialogExtendOptions = {
"closable" : $("#button-close").is(":checked"),
"maximizable" : $("#button-maximize").is(":checked"),
"minimizable" : $("#button-minimize").is(":checked"),
"minimizeLocation" : $("#my-form [name=minimizeLocation]:checked").val() || false,
"collapsable" : $("#button-collapse").is(":checked"),
"dblclick" : $("#my-form [name=dblclick]:checked").val() || false,
"titlebar" : $("#my-form [name=titlebar]:checked").val() || false
};
$("#my-form [name=icon]").each(function(){
if ( $(this).find("option:selected").html() != "(default)" ) {
dialogExtendOptions.icons = dialogExtendOptions.icons || {};
dialogExtendOptions.icons[$(this).attr("rel")] = $(this).val();
}
});
$("#my-form [name=event]").each(function(){
if ( $(this).is(":checked") ) {
dialogExtendOptions[$(this).attr("rel")] = function(evt, a,b,c) {
$(evt.target).prepend(evt.type+"@"+evt.timeStamp+"<br />");
};
}
});
// open dialog
$("<div />").dialog(dialogOptions).dialogExtend(dialogExtendOptions);
});
// click to invoke method
$("#config-method button").click(function(){
var command = $(this).text();
var dialog = $(".ui-dialog:last").find(".ui-dialog-content");
if ( $(dialog).length ) {
if ( command == 'state' ) {
alert( $(dialog).dialogExtend(command) );
} else {
$(dialog).dialogExtend(command);
}
}
});
});
</script>
<script id="jsbin-source-css" type="text/css">
body { color: #333333; font-family: Times, Helvetica, Arial; font-size: 16px; }
.ui-dialog { font-size: 12px; }
/***** HEADER *****/
header { background-color: #f0f0f0; border-radius: 1em; box-shadow: inset 0 0 10px gray; padding: 1em 1.5em 1.5em 1.5em; }
header h1 { margin: 0 0 0.5em 0; }
header ul { margin: 1em 0 0 0; }
/***** CONTENT *****/
section fieldset { margin: 5px; width: 200px; }
section label { cursor: pointer; }
#config-icon .wrapper { clear: both; }
#config-icon ins { float: left; margin: 0 5px 0 0; }
#config-icon label { float: left; }
#config-icon select { float: right; width: 100px; }
#config-method button { width: 48%; }
/***** FOOTER *****/
footer { clear: both; padding-top: 2em; }
footer button { background-color: #e0e0e0; border: none; border-radius: 1em; box-shadow: 0 5px 5px silver; cursor: pointer; font-size: 300%; padding: 10px 0 10px 0; text-align: center; width: 100%; }
footer button:hover { background-color: #d0d0d0; box-shadow: 0 5px 5px #aaaaaa; }
footer button:active { box-shadow: 0 4px 4px #aaaaaa; position: relative; top: 1px; }</script>
<script id="jsbin-source-javascript" type="text/javascript">$(function(){
// preview icon
$("#config-icon select")
.change(function(){
var icon = "<span class='ui-icon "+$(this).val()+"'></span>";
$(this).parents(".wrapper").find("ins").html(icon);
})
.trigger("change");
// click to open dialog
$("#my-button").click(function(){
//dialog options
var dialogOptions = {
"title" : "dialog@" + new Date().getTime(),
"width" : 400,
"height" : 300,
"modal" : $("#is-modal").is(":checked"),
"resizable" : $("#is-resizable").is(":checked"),
"draggable" : $("#is-draggable").is(":checked"),
"close" : function(){ $(this).remove(); }
};
if ( $("#button-cancel").is(":checked") ) {
dialogOptions.buttons = { "Cancel" : function(){ $(this).dialog("close"); } };
}
// dialog-extend options
var dialogExtendOptions = {
"closable" : $("#button-close").is(":checked"),
"maximizable" : $("#button-maximize").is(":checked"),
"minimizable" : $("#button-minimize").is(":checked"),
"minimizeLocation" : $("#my-form [name=minimizeLocation]:checked").val() || false,
"collapsable" : $("#button-collapse").is(":checked"),
"dblclick" : $("#my-form [name=dblclick]:checked").val() || false,
"titlebar" : $("#my-form [name=titlebar]:checked").val() || false
};
$("#my-form [name=icon]").each(function(){
if ( $(this).find("option:selected").html() != "(default)" ) {
dialogExtendOptions.icons = dialogExtendOptions.icons || {};
dialogExtendOptions.icons[$(this).attr("rel")] = $(this).val();
}
});
$("#my-form [name=event]").each(function(){
if ( $(this).is(":checked") ) {
dialogExtendOptions[$(this).attr("rel")] = function(evt, a,b,c) {
$(evt.target).prepend(evt.type+"@"+evt.timeStamp+"<br />");
};
}
});
// open dialog
$("<div />").dialog(dialogOptions).dialogExtend(dialogExtendOptions);
});
// click to invoke method
$("#config-method button").click(function(){
var command = $(this).text();
var dialog = $(".ui-dialog:last").find(".ui-dialog-content");
if ( $(dialog).length ) {
if ( command == 'state' ) {
alert( $(dialog).dialogExtend(command) );
} else {
$(dialog).dialogExtend(command);
}
}
});
});</script></body>
</html>
Raw
jsbin.xaxaqeh.css
body { color: #333333; font-family: Times, Helvetica, Arial; font-size: 16px; }
.ui-dialog { font-size: 12px; }
/***** HEADER *****/
header { background-color: #f0f0f0; border-radius: 1em; box-shadow: inset 0 0 10px gray; padding: 1em 1.5em 1.5em 1.5em; }
header h1 { margin: 0 0 0.5em 0; }
header ul { margin: 1em 0 0 0; }
/***** CONTENT *****/
section fieldset { margin: 5px; width: 200px; }
section label { cursor: pointer; }
#config-icon .wrapper { clear: both; }
#config-icon ins { float: left; margin: 0 5px 0 0; }
#config-icon label { float: left; }
#config-icon select { float: right; width: 100px; }
#config-method button { width: 48%; }
/***** FOOTER *****/
footer { clear: both; padding-top: 2em; }
footer button { background-color: #e0e0e0; border: none; border-radius: 1em; box-shadow: 0 5px 5px silver; cursor: pointer; font-size: 300%; padding: 10px 0 10px 0; text-align: center; width: 100%; }
footer button:hover { background-color: #d0d0d0; box-shadow: 0 5px 5px #aaaaaa; }
footer button:active { box-shadow: 0 4px 4px #aaaaaa; position: relative; top: 1px; }
Raw
jsbin.xaxaqeh.js
$(function(){
// preview icon
$("#config-icon select")
.change(function(){
var icon = "<span class='ui-icon "+$(this).val()+"'></span>";
$(this).parents(".wrapper").find("ins").html(icon);
})
.trigger("change");
// click to open dialog
$("#my-button").click(function(){
//dialog options
var dialogOptions = {
"title" : "dialog@" + new Date().getTime(),
"width" : 400,
"height" : 300,
"modal" : $("#is-modal").is(":checked"),
"resizable" : $("#is-resizable").is(":checked"),
"draggable" : $("#is-draggable").is(":checked"),
"close" : function(){ $(this).remove(); }
};
if ( $("#button-cancel").is(":checked") ) {
dialogOptions.buttons = { "Cancel" : function(){ $(this).dialog("close"); } };
}
// dialog-extend options
var dialogExtendOptions = {
"closable" : $("#button-close").is(":checked"),
"maximizable" : $("#button-maximize").is(":checked"),
"minimizable" : $("#button-minimize").is(":checked"),
"minimizeLocation" : $("#my-form [name=minimizeLocation]:checked").val() || false,
"collapsable" : $("#button-collapse").is(":checked"),
"dblclick" : $("#my-form [name=dblclick]:checked").val() || false,
"titlebar" : $("#my-form [name=titlebar]:checked").val() || false
};
$("#my-form [name=icon]").each(function(){
if ( $(this).find("option:selected").html() != "(default)" ) {
dialogExtendOptions.icons = dialogExtendOptions.icons || {};
dialogExtendOptions.icons[$(this).attr("rel")] = $(this).val();
}
});
$("#my-form [name=event]").each(function(){
if ( $(this).is(":checked") ) {
dialogExtendOptions[$(this).attr("rel")] = function(evt, a,b,c) {
$(evt.target).prepend(evt.type+"@"+evt.timeStamp+"<br />");
};
}
});
// open dialog
$("<div />").dialog(dialogOptions).dialogExtend(dialogExtendOptions);
});
// click to invoke method
$("#config-method button").click(function(){
var command = $(this).text();
var dialog = $(".ui-dialog:last").find(".ui-dialog-content");
if ( $(dialog).length ) {
if ( command == 'state' ) {
alert( $(dialog).dialogExtend(command) );
} else {
$(dialog).dialogExtend(command);
}
}
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment