Question

所以我是Jquery和Jquery UI的新手。我的对话框正常工作，但我要找的一件事是如何将对话框中的一个按钮更改为一个复选框。

我的情景：用户将发布信息，如新闻等。但我想让他们有能力不向公众发布它。草案，如果你愿意的话。所以复选框就在“ok”和“cancel”按钮旁边。

我已尝试在对话框功能之前创建一个数组并将其放在那里，但我似乎无法找到将按钮声明为复选框的方法。

提前感谢你的帮助，

编辑：这是我尝试过的一些代码。我现在的问题是，我尝试设置按钮窗格的样式，它会消失。

var dialog = $('<div title="Create News Post">' +
                    '<form method="POST" action="index.php?controller=posts&action=add">' +
                        '<div id="tabs" class="form">' +
                            '<ul>' +
                                '<li><a href="#tabs-1">English</a></li>' +
                                '<li><a href="#tabs-2">French</a></li>' +
                            '</ul>' +
                            '<div id="tabs-1">' +
                                '<label class="first">' +
                                    '<span>English Title:</span>' +
                                    '<input type="text" name="en_title" />' +
                                '</label>' +
                                '<label>' +
                                    '<span>English Text:</span>' +
                                    '<textarea name="en_text">' +
                                    '</textarea>' +
                                '</label>' +
                            '</div>' +
                            '<div id="tabs-2">' +
                                '<label class="first">' +
                                    '<span>French Title:</span>' +
                                    '<input type="text" name="fr_title" />' +
                                '</label>' +
                                '<label>' +
                                    '<span>French Text:</span>' +
                                    '<textarea name="fr_text">' +
                                    '</textarea>' +
                                '</label>' +
                            '</div>' +
                        '</div>' +
                        '<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">' +
                            '<div class="ui-dialog-buttonset">' +
                                '<input type="checkbox" id="isDraft" /><label for="isDraft">Publish?</label>' +
                                '<button id="btnSave" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button" role="button" aria-disabled="false">' +
                                    '<span class="ui-button-text">Save</span>' +
                                '</button>' +
                                '<button id="btnCancel" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button" role="button" aria-disabled="false">' +
                                    '<span class="ui-button-text">Cancel</span>' +
                                '</button>' +
                            '</div>' +
                        '</div>' +
                    '</form>' +
                '</div>'
            )
            .dialog({autoOpen: false,closeOnEscape: true,draggable:false,modal:true,resizable: false,width: 600});

Answer 1

1）您可以将按钮和复选框添加到创建对话框的HTML中，而不是为您生成按钮的使用对话框属性。创建对话框后，您可以设置处理程序使用选择器中的对话框对象：

dialog = $('<div>' +
           '...' +
           '<input type="submit" id="btnCancel" value="Ok" />' +
           '<button id="btnCancel">Cancel</button>' +
           '<input type="checkbox" id="chkIsDraft" name="chkIsDraft" value="Is Draft" />' +
           '</div>')
            .dialog(autoOpen: false,closeOnEscape: true,draggable:false,modal:true,resizable: false});

$('#btnCancel', dialog).click(function(){
 //...
});

dialog.dialog('open');

编辑：在不阅读jQuery UI代码的情况下，似乎将从对话框html中删除具有类属性（如'ui-dialog-buttonpane'）的div。所以，如果你选择这种方法你必须避免重用jQuery UI对话框类。

2）其他方法可以使用对话框的属性添加第三个按钮，并将第三个按钮html替换为您的复选框：

//Again use the dialog object as the scope for the selector.
$('.ui-dialog-buttonpane button:eq(1)',dialog.parent()).replaceWith('<input type="checkbox" id="chkIsDraft" name="chkIsDraft">Is Draft</input>');

编辑：对话框返回的对象正确引用了在创建对话框时使用的DOM元素，而不是使对话框工作的所有机制。那是你的方式将需要使用dialog.parent（）作为上述选择器的范围。

3）第三个选项：使用一个常规按钮，提供相同的选中/取消选中语义，一个复选框（我的意思是视觉上，制作一些CSS），当点击此按钮时，请确保一些对话框标记中的隐藏字段（我想在按下“确定”后将发布的形式）会更新以反映检查状态。

$("<div>...</div>").dialog({
    modal: true /..
    },
    buttons: {
        //...
        'IsDraft': function() {
            $(this).toggleClass('checked')
            $("input[name='is_draft']",$(this).parent('form')).val($(this).hasClass('checked'));
        }
    }
});

示例（基于您的代码）：

var dialog = $('<div title="Create News Post">' +
                    '<form method="POST" action="index.php?controller=posts&action=add">' +
                        '<div id="tabs" class="form">' +
                            '<ul>' +
                                '<li><a href="#tabs-1">English</a></li>' +
                                '<li><a href="#tabs-2">French</a></li>' +
                            '</ul>' +
                            '<div id="tabs-1">' +
                                '<label class="first">' +
                                    '<span>English Title:</span>' +
                                    '<input type="text" name="en_title" />' +
                                '</label>' +
                                '<label>' +
                                    '<span>English Text:</span>' +
                                    '<textarea name="en_text">' +
                                    '</textarea>' +
                                '</label>' +
                            '</div>' +
                            '<div id="tabs-2">' +
                                '<label class="first">' +
                                    '<span>French Title:</span>' +
                                    '<input type="text" name="fr_title" />' +
                                '</label>' +
                                '<label>' +
                                    '<span>French Text:</span>' +
                                    '<textarea name="fr_text">' +
                                    '</textarea>' +
                                '</label>' +
                            '</div>' +
                        '</div>' +
                    '</form>' +
                '</div>'
            )
            .dialog({autoOpen: false,closeOnEscape: true,draggable:false,modal:true,resizable: false,width: 600,height:400,
                buttons: {
                    IsDraft: function(){alert('draft');},
                    Save: function(){alert('saving');},
                    Cancel: function(){alert('cancel');}
                }
            });
         //lets do a replacement to get a checkbox in the button pane.     
        $('.ui-dialog-buttonset button:eq(0)',dialog.parent()).replaceWith('<input type="checkbox" id="chkIsDraft" name="chkIsDraft">Is Draft</input>');
        dialog.dialog('open');

Answer 2

也许它会有所帮助：看看JQuery UI button。它可以作为一个复选框。您可以在对话框中为您的目的创建单独的按钮。

如何将jquery ui对话框按钮变为复选框？

2 个答案: