I want to add extra buttons to jQuery Dialog Title Bar. I want to add minimum 5 Buttons to jQuery Dialog Title Bar. Maximum "N".
Buttons like as listed below:
$( ".dialog" ).dialog({
autoOpen: false,
buttons: [
{
text: "Minimize",
icon: "ui-icon-minimize",
click: function( e ) {
//function
}
},
{
text: "Maximize",
icon: "ui-icon-maximize",
click: function( e ) {
//function
}
}
]
});
to reach better similarity with the dialog close button. I see pumpkinzzz's answer and other code around including CSS/JS code on JQuery UI and I came to this.
In your dialog definition add a dialog class property, for example:
$("#yourDlg").dialog({
autoOpen: false,
height: 400,
width: 800,
modal: true,
dialogClass: 'yourDialogClass', // any name works
...
});
In your CSS file/section add this:
.ui-dialog .ui-dialog-titlebar-help{
position:absolute;
right:2em; // This puts the help button along the close one, so change it accordingly
top:50%;
width:20px;
margin:-10px 0 0 0;
padding:1px;
height:20px
}
In your javascript file or section add this (remember to use the same class name as in the dialogClass property):
$(".yourDialogClass").children(".ui-dialog-titlebar").append("<button id='btnHelp' class='ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-help' type='button' role='button' title='Help'><span class='ui-button-icon-primary ui-icon ui-icon-help'></span><span class='ui-button-text'>Help</span></button>");
$("#btnHelp")
.hover(function () {
$(this).addClass('ui-state-hover');
}, function () {
$(this).removeClass('ui-state-hover');
})
.click(function (e) {
// your click code here
alert('Help');
return false; // to avoid submit if any form
});
With all this you can have a nicer help button. Hoping this meet your expectations and save time to others.
just use the jquery-ui api
// create the dialog
$("div#google").dialog({
"title": "Google",
});
// find the titlebar
var dlgtb = $("div#google").dialog("instance").uiDialogTitlebar;
// add the button to titlebar
dlgtb.append("<button id='btnExternal'>M</button>");
// make it an button
$("#btnExternal").button({
icon: "ui-icon-extlink",
showLabel: false,
});
// add click handler
$("#btnExternal").click(function () {
window.open("https://www.google.com", "google");
});
To add more buttons, just add'em in the buttons
array
$( ".dialog" ).dialog({
autoOpen: false,
buttons: [
{
text: "Help",
icon: "ui-icon-help",
click: function( e ) {
//function
}
},
{
text: "Minimize",
icon: "ui-icon-minimize",
click: function( e ) {
//function
}
},
{
text: "Maximize",
icon: "ui-icon-maximize",
click: function( e ) {
//function
}
},
{
text: "About",
icon: "ui-icon-about",
click: function( e ) {
//function
}
}
]
});
see an example HERE
--- EDIT ---
now i see what are you trying to do.. i think there is no clean way to do that, so i suggest this:
$( ".dialog" ).dialog({
autoOpen: true,
buttons: [
{
text: "Minimize",
icon: "ui-icon-minimize",
click: function( e ) {
//function
}
},
{
text: "Maximize",
icon: "ui-icon-maximize",
click: function( e ) {
//function
}
}
],
create: function( event, ui ) {
$('.ui-dialog-buttonset').prependTo('.ui-dialog-titlebar');
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.