jquery自定义对话框按钮

h22fl7wq  于 2023-03-07  发布在  jQuery
关注(0)|答案(4)|浏览(190)

x1c 0d1x我正在使用jquery对话框,查询ui为1.8.7.custom.min.js
我需要自定义对话框上的按钮和它们在对话框上显示的位置。我能够在大多数情况下自定义我的对话框,但自定义按钮和它的位置一直是坚韧的cookie到目前为止。请找到屏幕截图和下面的代码

HTML:

<style>
.ui-dialog, .ui-dialog-content {
 border:1px solid #cde68c;
 border-bottom:0px;
 background-color: white !important;
 color: #333;
 font: 12px/180% Arial, Helvetica, sans-serif;
}
.ui-dialog-titlebar {
 display:none;
}
#ui-dialog-title-dialog {
 color: yellow !important;
 text-shadow: none;
}
.ui-dialog-buttonpane {
 border:1px solid #cde68c;
 border-top:0px;
 margin-bottom: 1%;
}

</style>
        <div id="dialog">
            <p><span id="emailNotice"></span></p>
        </div>

Javascript:

$j(document).ready(function() {

    $j('#dialog').dialog('open');
    $j('#emailNotice').html('show some notice text abcd');  

    $j('#dialog').dialog({
        modal:true,
        autoOpen: false,
        width: 600,
        buttons: {
            "Ok": function() {
                $j(this).dialog("close");
            },
            "Cancel": function() {
                className: 'cancelButtonClass',
                $j(this).dialog("close");
            }
        }
    });
});

我希望能够将按钮定位在左侧、右侧、顶部/底部等位置

hwamh0ep

hwamh0ep1#

你可以给buttons属性传递一个空对象,然后直接在“dialog”div中添加按钮,当然,这意味着你必须手动处理按钮点击事件。

粗略示例:

<div id="dialog">
  <p><span id="emailNotice"></span></p>
  <button id="myButton">Submit</button>
</div>

Javascript:

$j('#dialog').dialog({
    modal:true,
    autoOpen: false,
    width: 600,
    buttons: {}
    }
});
ghhaqwfi

ghhaqwfi2#

<!-- language: lang-js -->
buttons: [
       {

            text: "Delete that",
            className: 'deleteButtonClass',
            click: function() {
                alert('foobar');                
            }
        }
kmpatx3s

kmpatx3s3#

在jquery-ui-1.10.0.custom.css中找到下面的类并删除float: right;

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
float: right;
}

在jquery-ui-1.10.0.custom.css中测试,而不是在jquery-ui-1.8.7.custom.css中测试

nc1teljy

nc1teljy4#

这可能不是您想要的,但是我已经完全放弃了配置JQueryUI对话框按钮的尝试,因为它们是一个非常难处理的东西。
所以我最后使用了我自己的定制HTML片段,我可以用普通的HTML和CSS来给一个按钮设计任何我喜欢的样式。按钮浮动:左,一些浮动:右。我可以使用字体Awesome在按钮上放置漂亮的图标,等等。
这需要做一点工作,但还不至于像拔出最后一根头发试图欺骗JQueryUI对话框那样麻烦。
基本上,它是通过3个步骤完成的:
1.配置对话框。
基本上是一个直接的$(“选择器”).对话框(...);
1.加载HTML片段。
我有一个“html fragments”文件夹,我在其中创建一些行或复杂的表单,然后在运行时使用$.get()加载这些片段,并执行$(“dialog”).parent.append(fragment);
1.找到按钮并对其进行配置。
将其附加到父项后,找到需要配置的每个按钮:$(“button 1”).按钮(...).点击(...);

$( "#dialog" ).dialog( ... );

 // -------------------------------------    
 // Get the button fragment and append to the dialog
 $.get
 (
     "/path/to/fragment/buttons.frag.html"
     , function( frag )
     {
         // Fragment appended to the dialog's parent.
         $( "#dialog" ).parent().append( frag );

         // Config the button
         $( "#button1" ).button().click
         (
             function()
             {
                 // do something here
             }
         );
     }
 );

相关问题