jquery - 切换和 jQuery UI 按钮

Question

我想让我的用户选择使用两种编辑器之一：

• HTML 编辑器
• MCE 编辑器

在选择编辑器并使其工作时，我可以处理这个编码。但是我在 UI 方面遇到了问题。起初我给用户一个复选框，但现在我想一个更好的方法是使用 jQuery UI 按钮并切换它以显示文本“HTML 编辑器”或“MCE 编辑器”。有没有人编写过类似的代码？我查看了按钮的文档，但我仍然不清楚如何在两种状态之间切换。

Answer 1

只需确保您toggleButton的 HTML 中有一个 id 的按钮。

var isMCE = false;

$("#toggleButton").click(function() {
    if(isMCE) {
        // change your editor back to normal here
        isMCE = false;
    } else {
        // change your editor to MCE here
        isMCE = true;
    }
});

toggle()，根据这里，只是切换元素的可见性，不适合您的目的。

Answer 2

    $( "#controls #html" ).button({
                text: 'Edit',
                })
                .click(function() {
                     var btn = $("#controls #html");
                     btn.button('option', 'text', 'MCE');
                     if (btn[0].checked) {
                           btn.button('option', 'text', 'HTML');
                           doMCE();
                     } else { 
                           btn.button('option', 'text', 'MCE');
                           doHTML();
                     }
                });

    <div id="controls">
         <input type="checkbox" id="html" name="html"><label for="html"></label>
    </div>