开发者

Dojo Button is not center align, when it is inside dialog

in the below code, I have created a button inside the dialog box, but button is not center aligned, how to make it as center aligned?

var alert_dialog= new dijit.Di开发者_开发技巧alog({ 
        id: "mydialog, 
        title: "My Alert", 
        content: "Hai" 
        }, this.name); 

alert_dialog.set("class","claro"); 

//----------------------------------------------------------------- 
//---------------- Button Creation Start -------------------------- 
//----------------------------------------------------------------- 

var button = new dijit.form.Button({ 
        id: "Alert_Button_"+this.name, 
        label: "Close" 
}); 

button.set("class", "claro"); 


dojo.connect(button, "onClick", function(){ 
    alert_dialog.destroy(); 
}); 

alert_dialog.domNode.appendChild(button.domNode); 

//alert_dialog.containerNode.appendChild(button.domNode); 

//----------------------------------------------------------------- 
//---------------- Button Creation End -------------------------- 
//----------------------------------------------------------------- 


dijit.byId(alert_dialog.id).show(); 

alert_dialog._setStyleAttr('border : 1.5px solid #000000'); 
alert_dialog._setStyleAttr('background : #FFFFFF');


I'm sure there many are many other good ways to do this, but this worked well when I tested it.

var node, button;
node = dojo.create("div", {style: "margin: 0px auto 0px auto; text-align: center;"}, alert_dialog.domNode);
button = new dijit.form.Button({ 
      label: "Close",
      'class': "claro",
      onClick: alert_dialog.destroy
}).placeAt(node);

also placing your class and onClick into the declaration of the button is a little cleaner looking and saves you some typing. you could also do the same with style and class for the dialog.


This is a dojo AMD solution, I hope can help the discussion. It is a function that show an alert dialog with HTML content and a "Close" centered button.

require([
    "dojo/dom-construct",
    "dijit/Dialog",
    "dijit/form/Button",
], function(domConstruct, Dialog, Button){


function showAlertDialog(htmlmsg, title) {
    if(!title) title = "Alert";

    var saddlg = new Dialog({title: title, style: "width: 300px;"}); 

    saddlg.set('content', htmlmsg);

    var saddiv = domConstruct.create("div", { style: "text-align: center; background:  white;" }, saddlg.domNode);

    var sadbtn = new Button({ label: "Close",
                              onClick: function(){
                                saddlg.hide();
                                domConstruct.destroy(saddlg);
                              }
                         });

    sadbtn.placeAt(saddiv);        
    saddlg.show();
}


});
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜