Why jQuery UI Dialog has no minimize, maximize buttons?

StackOverflow https://stackoverflow.com/questions/16473270

Вопрос

I am using jQuery-1.9.1 and jQuery-ui-1.10.2 to popup a dialog, my code is below:

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jqueryUI/theme/redmond/jquery-ui-   1.10.2.custom.min.css" />
<script type="text/javascript">
$(function(){
    $("#dialog").dialog();
});
</script>
 </head>
  <body>
<div id="dialog">
     hello, this is a dialog
</div>
</body>

the dialog has only close button, no minimize and maximize buttons, but I want to show them. I find in this page, its dialog has minimize and maximize buttons, I don't find any special settings about dialog in author's javascript code, and the jQuery-ui version s/he used is 1.8.16, does jQuery-ui of my version has removed this functionality?

PS: my jQuery-1.9.1.min.js and jQuery-ui-1.10.2.min,js are downloaded from official website, no any customization change.

Это было полезно?

Решение

Looking at the source of jQuery UI in that example it looks like the guy that runs that blog site added customization for minimize and maximize support. You can find the following comment in the code.

/*
 * jQuery UI Dialog 1.8.16
 * w/ Minimize & Maximize Support
 * by Elijah Horton (fieryprophet@yahoo.com)
*/

You will need to add customization's for the dialog to support this or include a library that extends the jQuery UI dialog. It looks like this site has a plugin called jquery-dialogextend that will do what you are asking for.

Другие советы

If you look towards the middle of the jquery-ui.js file linked in that page there is a section of unminified code from line 366 up to around line 1429 where he has added custom code to handle the minimize/maximize functionality.

Just note that there is no guarantee that section of code will work correctly (or at all) in any version of jQuery UI other than 1.8.16.

Also Check out jQuery Dialogr. I think this can help.

I made a little plugin with the widget factory that extends the jquery ui dialog.

I use the jquery widget factory to add new functionnalities

$.widget('fq-ui.extendeddialog', $.ui.dialog, {
...
})(jQuery);

In the Jquery UI dialog code, there is a _createTitlebar method. I override it and add a maximize and minimize button

_createTitlebar: function () {
    this._super();
    // Add the new buttons
    ...        
    },
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top