diff options
-rw-r--r-- | demos/dialog/animated.html | 1 | ||||
-rw-r--r-- | demos/dialog/default.html | 1 | ||||
-rw-r--r-- | demos/dialog/modal-confirmation.html | 1 | ||||
-rw-r--r-- | demos/dialog/modal-form.html | 7 | ||||
-rw-r--r-- | demos/dialog/modal-message.html | 1 | ||||
-rw-r--r-- | demos/dialog/modal.html | 1 | ||||
-rw-r--r-- | tests/unit/dialog/dialog.html | 1 | ||||
-rw-r--r-- | tests/unit/dialog/dialog_options.js | 8 | ||||
-rw-r--r-- | tests/visual/dialog/animated.html | 1 | ||||
-rw-r--r-- | tests/visual/dialog/complex-dialogs.html | 1 | ||||
-rw-r--r-- | tests/visual/dialog/form.html | 1 | ||||
-rw-r--r-- | tests/visual/dialog/performance.html | 1 | ||||
-rw-r--r-- | themes/base/jquery.ui.dialog.css | 12 | ||||
-rw-r--r-- | ui/jquery.ui.dialog.js | 26 |
14 files changed, 32 insertions, 31 deletions
diff --git a/demos/dialog/animated.html b/demos/dialog/animated.html index 8e1daf131..061396548 100644 --- a/demos/dialog/animated.html +++ b/demos/dialog/animated.html @@ -11,6 +11,7 @@ <script src="../../ui/jquery.ui.draggable.js"></script> <script src="../../ui/jquery.ui.position.js"></script> <script src="../../ui/jquery.ui.resizable.js"></script> + <script src="../../ui/jquery.ui.button.js"></script> <script src="../../ui/jquery.ui.dialog.js"></script> <script src="../../ui/jquery.ui.effect.js"></script> <script src="../../ui/jquery.ui.effect-blind.js"></script> diff --git a/demos/dialog/default.html b/demos/dialog/default.html index 214f41d0d..777921e48 100644 --- a/demos/dialog/default.html +++ b/demos/dialog/default.html @@ -11,6 +11,7 @@ <script src="../../ui/jquery.ui.draggable.js"></script> <script src="../../ui/jquery.ui.position.js"></script> <script src="../../ui/jquery.ui.resizable.js"></script> + <script src="../../ui/jquery.ui.button.js"></script> <script src="../../ui/jquery.ui.dialog.js"></script> <link rel="stylesheet" href="../demos.css"> <script> diff --git a/demos/dialog/modal-confirmation.html b/demos/dialog/modal-confirmation.html index e73c9ea2b..04f5d93fb 100644 --- a/demos/dialog/modal-confirmation.html +++ b/demos/dialog/modal-confirmation.html @@ -11,6 +11,7 @@ <script src="../../ui/jquery.ui.button.js"></script> <script src="../../ui/jquery.ui.draggable.js"></script> <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.ui.button.js"></script> <script src="../../ui/jquery.ui.dialog.js"></script> <link rel="stylesheet" href="../demos.css"> <script> diff --git a/demos/dialog/modal-form.html b/demos/dialog/modal-form.html index a779494a4..b1d4e52cc 100644 --- a/demos/dialog/modal-form.html +++ b/demos/dialog/modal-form.html @@ -12,6 +12,7 @@ <script src="../../ui/jquery.ui.draggable.js"></script> <script src="../../ui/jquery.ui.position.js"></script> <script src="../../ui/jquery.ui.resizable.js"></script> + <script src="../../ui/jquery.ui.button.js"></script> <script src="../../ui/jquery.ui.dialog.js"></script> <script src="../../ui/jquery.ui.effect.js"></script> <link rel="stylesheet" href="../demos.css"> @@ -86,10 +87,10 @@ if ( bValid ) { $( "#users tbody" ).append( "<tr>" + - "<td>" + name.val() + "</td>" + - "<td>" + email.val() + "</td>" + + "<td>" + name.val() + "</td>" + + "<td>" + email.val() + "</td>" + "<td>" + password.val() + "</td>" + - "</tr>" ); + "</tr>" ); $( this ).dialog( "close" ); } }, diff --git a/demos/dialog/modal-message.html b/demos/dialog/modal-message.html index 60b7c3e15..19fc0e829 100644 --- a/demos/dialog/modal-message.html +++ b/demos/dialog/modal-message.html @@ -12,6 +12,7 @@ <script src="../../ui/jquery.ui.draggable.js"></script> <script src="../../ui/jquery.ui.position.js"></script> <script src="../../ui/jquery.ui.resizable.js"></script> + <script src="../../ui/jquery.ui.button.js"></script> <script src="../../ui/jquery.ui.dialog.js"></script> <link rel="stylesheet" href="../demos.css"> <script> diff --git a/demos/dialog/modal.html b/demos/dialog/modal.html index 886a3516c..a59358d53 100644 --- a/demos/dialog/modal.html +++ b/demos/dialog/modal.html @@ -11,6 +11,7 @@ <script src="../../ui/jquery.ui.draggable.js"></script> <script src="../../ui/jquery.ui.position.js"></script> <script src="../../ui/jquery.ui.resizable.js"></script> + <script src="../../ui/jquery.ui.button.js"></script> <script src="../../ui/jquery.ui.dialog.js"></script> <link rel="stylesheet" href="../demos.css"> <script> diff --git a/tests/unit/dialog/dialog.html b/tests/unit/dialog/dialog.html index cb74bb654..0022b42cf 100644 --- a/tests/unit/dialog/dialog.html +++ b/tests/unit/dialog/dialog.html @@ -19,6 +19,7 @@ "ui/jquery.ui.mouse.js", "ui/jquery.ui.draggable.js", "ui/jquery.ui.resizable.js", + "ui/jquery.ui.button.js", "ui/jquery.ui.dialog.js" ] }); diff --git a/tests/unit/dialog/dialog_options.js b/tests/unit/dialog/dialog_options.js index 899dc1df6..2df7196dc 100644 --- a/tests/unit/dialog/dialog_options.js +++ b/tests/unit/dialog/dialog_options.js @@ -35,7 +35,7 @@ test("buttons", function() { }, el = $('<div></div>').dialog({ buttons: buttons }); - btn = $("button", el.dialog('widget')); + btn = el.dialog( "widget" ).find( ".ui-dialog-buttonpane button" ); equal(btn.length, 2, "number of buttons"); i = 0; @@ -61,7 +61,7 @@ test("buttons", function() { el.dialog("option", "buttons", newButtons); deepEqual(el.dialog("option", "buttons"), newButtons, '.dialog("option", "buttons", ...) setter'); - btn = $("button", el.dialog('widget')); + btn = el.dialog( "widget" ).find( ".ui-dialog-buttonpane button" ); equal(btn.length, 1, "number of buttons after setter"); btn.trigger('click'); @@ -72,7 +72,7 @@ test("buttons", function() { }); el.dialog("option", "buttons", null); - btn = $("button", el.dialog('widget')); + btn = el.dialog( "widget" ).find( ".ui-dialog-buttonpane button" ); equal(btn.length, 0, "all buttons have been removed"); equal(el.find(".ui-dialog-buttonset").length, 0, "buttonset has been removed"); equal(el.parent().hasClass('ui-dialog-buttons'), false, "dialog wrapper removes class about having buttons"); @@ -97,7 +97,7 @@ test("buttons - advanced", function() { ] }); - buttons = el.dialog('widget').find("button"); + buttons = el.dialog( "widget" ).find( ".ui-dialog-buttonpane button" ); equal(buttons.length, 1, "correct number of buttons"); equal(buttons.attr("id"), "my-button-id", "correct id"); equal(buttons.text(), "a button", "correct label"); diff --git a/tests/visual/dialog/animated.html b/tests/visual/dialog/animated.html index d1f5acb10..07097fbfa 100644 --- a/tests/visual/dialog/animated.html +++ b/tests/visual/dialog/animated.html @@ -11,6 +11,7 @@ <script src="../../../ui/jquery.ui.draggable.js"></script> <script src="../../../ui/jquery.ui.position.js"></script> <script src="../../../ui/jquery.ui.resizable.js"></script> + <script src="../../../ui/jquery.ui.button.js"></script> <script src="../../../ui/jquery.ui.dialog.js"></script> <script src="../../../ui/jquery.ui.effect.js"></script> <script src="../../../ui/jquery.ui.effect-blind.js"></script> diff --git a/tests/visual/dialog/complex-dialogs.html b/tests/visual/dialog/complex-dialogs.html index 6399d8a4b..2b9a0d3a6 100644 --- a/tests/visual/dialog/complex-dialogs.html +++ b/tests/visual/dialog/complex-dialogs.html @@ -11,6 +11,7 @@ <script src="../../../ui/jquery.ui.draggable.js"></script> <script src="../../../ui/jquery.ui.position.js"></script> <script src="../../../ui/jquery.ui.resizable.js"></script> + <script src="../../../ui/jquery.ui.button.js"></script> <script src="../../../ui/jquery.ui.dialog.js"></script> <!-- stuff needed to make things complex --> diff --git a/tests/visual/dialog/form.html b/tests/visual/dialog/form.html index 867991911..ed70ec69b 100644 --- a/tests/visual/dialog/form.html +++ b/tests/visual/dialog/form.html @@ -11,6 +11,7 @@ <script src="../../../ui/jquery.ui.draggable.js"></script> <script src="../../../ui/jquery.ui.position.js"></script> <script src="../../../ui/jquery.ui.resizable.js"></script> + <script src="../../../ui/jquery.ui.button.js"></script> <script src="../../../ui/jquery.ui.dialog.js"></script> <script src="../../../ui/jquery.ui.effect.js"></script> <script src="../../../ui/jquery.ui.effect-blind.js"></script> diff --git a/tests/visual/dialog/performance.html b/tests/visual/dialog/performance.html index 937b9464f..8f63d6a69 100644 --- a/tests/visual/dialog/performance.html +++ b/tests/visual/dialog/performance.html @@ -11,6 +11,7 @@ <script src="../../../ui/jquery.ui.mouse.js"></script> <script src="../../../ui/jquery.ui.draggable.js"></script> <script src="../../../ui/jquery.ui.resizable.js"></script> + <script src="../../../ui/jquery.ui.button.js"></script> <script src="../../../ui/jquery.ui.dialog.js"></script> <script> $(function() { diff --git a/themes/base/jquery.ui.dialog.css b/themes/base/jquery.ui.dialog.css index f1b25c104..d278d9649 100644 --- a/themes/base/jquery.ui.dialog.css +++ b/themes/base/jquery.ui.dialog.css @@ -29,18 +29,10 @@ position: absolute; right: .3em; top: 50%; - width: 19px; + width: 21px; margin: -10px 0 0 0; padding: 1px; - height: 18px; -} -.ui-dialog .ui-dialog-titlebar-close span { - display: block; - margin: 1px; -} -.ui-dialog .ui-dialog-titlebar-close:hover, -.ui-dialog .ui-dialog-titlebar-close:focus { - padding: 0; + height: 20px; } .ui-dialog .ui-dialog-content { position: relative; diff --git a/ui/jquery.ui.dialog.js b/ui/jquery.ui.dialog.js index b860a8b18..055040b32 100644 --- a/ui/jquery.ui.dialog.js +++ b/ui/jquery.ui.dialog.js @@ -99,7 +99,6 @@ $.widget("ui.dialog", { uiDialog, // TODO should use this.uiDialogTitlebar instead uiDialogTitlebar, - uiDialogTitlebarClose, uiDialogTitle, uiDialogButtonPane; @@ -139,20 +138,21 @@ $.widget("ui.dialog", { }) .prependTo( uiDialog ); - uiDialogTitlebarClose = $( "<a href='#'></a>" ) - .addClass( "ui-dialog-titlebar-close ui-corner-all" ) - .attr( "role", "button" ) + this.uiDialogTitlebarClose = $( "<button></button>" ) + .button({ + label: options.closeText, + icons: { + primary: "ui-icon-closethick" + }, + text: false + }) + .addClass( "ui-dialog-titlebar-close" ) .click(function( event ) { event.preventDefault(); that.close( event ); }) .appendTo( uiDialogTitlebar ); - ( this.uiDialogTitlebarCloseText = $( "<span>" ) ) - .addClass( "ui-icon ui-icon-closethick" ) - .text( options.closeText ) - .appendTo( uiDialogTitlebarClose ); - uiDialogTitle = $( "<span>" ) .uniqueId() .addClass( "ui-dialog-title" ) @@ -183,10 +183,6 @@ $.widget("ui.dialog", { }); } - // TODO use button? or at least a button element, so that SPACE works? - this._hoverable( uiDialogTitlebarClose ); - this._focusable( uiDialogTitlebarClose ); - if ( options.draggable && $.fn.draggable ) { this._makeDraggable(); } @@ -575,7 +571,9 @@ $.widget("ui.dialog", { break; case "closeText": // ensure that we always pass a string - this.uiDialogTitlebarCloseText.text( "" + value ); + this.uiDialogTitlebarClose.button({ + label: "" + value + }); break; case "dialogClass": uiDialog |