在对话框的标题部分添加按钮?

时间:2011-06-24 17:37:35

标签: jquery jquery-ui button header

我想在对话框的标题部分添加两个按钮以及'x'图标,但我只能在它底部添加按钮,即使搜索了几个小时后,我也没有得到任何添加的解决方案他们在顶部或从下到上改变他们的位置。请帮帮我。

$(function(){
   var winsize = ["width=400,height=500"];
   var newwin = function() {
      window.open("http://www.google.com", "New Window", winsize);
      $(this).dialog("close");
   }
   var hide = function() {}
   var btns = {
       buttons: {
         "+": newwin,
         "-": hide
      }
   };
   $( "#dialog" ).dialog(btns);
});

3 个答案:

答案 0 :(得分:3)

这很难看,但也许正朝着正确的方向发展......

http://jsfiddle.net/AjKFe/48/

//create dialog
$("#dialog2").dialog({
    height: 140,
    modal: true,
    autoOpen: false
});

//add a button
$("<a href='#' style='float:right; margin-right:1em;'></a>").button({icons:{primary: "ui-icon-plus"},text: false}).insertBefore('.ui-dialog-titlebar-close').click(function(e){
   e.preventDefault();
   alert("click");
});

答案 1 :(得分:0)

我通过在对话框的标题中放置常规按钮来解决这个问题。当然,你必须手动连接它们,所以这不是一个简单的解决方案。

答案 2 :(得分:0)

您还可以执行以下操作:

    var titlebar = dialog.parents('.ui-dialog').find('.ui-dialog-titlebar');
    $('<button>-</button>')
        .appendTo(titlebar)
        .click(function() {
            // smth here
    });         
    $('<button>+</button>')
        .appendTo(titlebar)
        .click(function() {
            //smth here
    }); 

或通过

替换“ - ”和“+”来使用jQuery图标
<span class="ui-icon ui-icon-minusthick">minimize</span>