Created
May 12, 2021 11:59
-
-
Save egstar/5d1448829d8db8781c4b70b52a2e0665 to your computer and use it in GitHub Desktop.
Sandbox - jQuery DialogExtend // source https://jsbin.com/xaxaqeh
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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(" ").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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(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