aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--demos/dialog/animated.html1
-rw-r--r--demos/dialog/default.html1
-rw-r--r--demos/dialog/modal-confirmation.html1
-rw-r--r--demos/dialog/modal-form.html7
-rw-r--r--demos/dialog/modal-message.html1
-rw-r--r--demos/dialog/modal.html1
-rw-r--r--tests/unit/dialog/dialog.html1
-rw-r--r--tests/unit/dialog/dialog_options.js8
-rw-r--r--tests/visual/dialog/animated.html1
-rw-r--r--tests/visual/dialog/complex-dialogs.html1
-rw-r--r--tests/visual/dialog/form.html1
-rw-r--r--tests/visual/dialog/performance.html1
-rw-r--r--themes/base/jquery.ui.dialog.css12
-rw-r--r--ui/jquery.ui.dialog.js26
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