切换和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()，按照here，只需切换元素的可见性，并且不会满足您的要求。

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>