切換和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>