單擊按鈕時切換狀態？

我遇到了我正在處理的設計/ UX問題。單擊按鈕時切換狀態？

我有一個按鈕說「沒有過濾器」，如果我點擊，我想它改變爲「重置」，點擊重置應該讓我回到舊狀態。（沒有過濾器）（此外，如果有幫助，我將更改下拉列表中的值）

我應該用什麼來表示這種行爲？（開關，按鈕？）有點困惑。

代碼：

 <button type="button" class="btn btn-sm" id="removeDwell"> 
      <i id="removeDwell"></i> No filter 
     </button>

來源

2017-02-02 TechnoCorner

如果你只有兩種狀態之間進行切換，你可能會發現，一個複選框是一個更好的選擇，並有Bootstrap插件風格的，如http://www.bootstraptoggle.com/ –

@TiesonT。 Yep同意了。我已經嘗試過這一點，但我不相信開關。無論如何用按鈕來做到這一點？（就像點擊按鈕會改變按鈕上的文本以「重置」不同的顏色？）。請在這裏輸入。 – TechnoCorner

我建議將兩個按鈕內部選在那裏開始。然後使用CSS和JS來切換隱藏/顯示相關內部的類。鑑於你提到你正在改變下拉內的值，我會假設你已經有了一個按鈕.on('click')綁定的地方，這段代碼只會擴展。

通過使用.btn-active-toggle和內部.when-active或.when-inactive類，你必須使用這個相同的邏輯在一些地方，你想切換按鈕的內屏（或者說任何與類選項的.btn-active-toggle）。在命名約定方面，如果您不希望使用這種開箱即用的樣式，那麼給定的引導包含任何.btn與.active類別的CSS，您可能需要考慮使用與.active不同的類名;只需更新下面的JS和CSS即可。

注意：從可訪問性的角度來看，這種解決方案並不是最好的，因爲屏幕閱讀器會讀取內部消息，而不知道哪個是活動的。如果這對你很重要，考慮同樣切換aria values to specify which is active

HTML

<button type="button" class="btn btn-sm btn-active-toggle" id="removeDwell"> 
    <span class="when-active"> 
     <i class="glyphicon glyphicon-remove"></i> No filter 
    </span> 
    <span class="when-inactive">  
     <i class="glyphicon glyphicon-refresh"></i> Reset 
    </span> 
</button>

CSS

.btn-active-toggle.active .when-active, 
.btn-active-toggle .when-inactive{ 
    display:inline-block; 
} 
.btn-active-toggle.active .when-inactive, 
.btn-active-toggle .when-active{ 
    display:none; 
}

$('#removeDwell').on('click', function(){ 
    $(this).toggleClass('active'); 
})

JSFIDDLE

來源

2017-02-02 01:49:09 haxxxton

我認爲你可以通過使用'.btn-active-toggle.active來縮短CSS。當無效時， .btn-active-toggle：無（.active）.when-active { \t display：none; }' –

@MichaelCoker，不過，對於節省的小空間來說，好點，而不必擔心[IE7/8支持'：not']（http://caniuse.com/#feat=css- SEL3）。如果OP不關心那些舊的瀏覽器（我不能指責他們），請鼓勵你的代碼:) – haxxxton

非常感謝你@haxxxton – TechnoCorner

下面是一個JavaScript的解決方案，不增加任何HTML開銷：

var defaultText, 
 
     substituteText, 
 
     btn; 
 

 
    /* Default text of the button */ 
 
    defaultText = 'No Filter'; 
 
    /* Alternate text for button */ 
 
    substituteText = 'Reset'; 
 
    /* Grab our button */ 
 
    btn = document.querySelector('.btn'); 
 

 
    /* Add a listener to the button instance so we can manipulate it */ 
 
    btn.addEventListener('click', function() { 
 
     changeText(this, defaultText, substituteText); 
 
    }, false); 
 

 
    /** 
 
    * Change the text of a button 
 
    * @param {el} object HTMLElement: button to change text of 
 
    * @param {dText} string: default text 
 
    * @param {nText} string: new text 
 
    **/ 
 
    function changeText(el, dText, nText) { 
 
     var content = '', 
 
      context = ''; 
 
    
 
     /** 
 
     * Set the text of a button 
 
     *  - dependant upon current text 
 
     **/ 
 
     function setText() { 
 
     return (content === dText) ? nText : dText; 
 
     } 
 
    
 
     /* Check to see if the browser accepts textContent */ 
 
     if ('textContent' in document.body) { 
 
     context = 'textContent'; 
 
     /* Get the current button text */ 
 
     content = el[context]; 
 
     /* Browser does NOT use textContent */ 
 
     } else { 
 
     /* Get the button text with fallback option */ 
 
     content = el.firstChild.nodeValue; 
 
     } 
 
    
 
     /* Set button text */ 
 
     if (context === 'textContent') { 
 
     el.textContent = setText(); 
 
     } else { 
 
     el.firstChild.nodeValue = setText(); 
 
     } 
 
    }

.btn { 
 
    position: relative; 
 
    width: 6em; 
 
    height: 2em; 
 
    padding: 0 0.2em 0.2em 0.2em ; 
 
    margin: 3% 0; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    font-size: 1.2em; 
 
    color: #eee; 
 
    background-color: #1B6CBD; 
 
    border: 1px solid #0E3A59; 
 
    border-radius: 0.2em; 
 
    box-shadow: 0 1px 0 #0E3A59, 
 
    0 0 2px rgba(#1B6CBD, 0.8); 
 
    text-shadow: 0.05em 0.05em 0 #555; 
 

 
} 
 

 
.btn, 
 
.btn:hover { 
 
    transition: background 150ms; 
 
} 
 

 
.btn:hover, 
 
.btn:active { 
 
    color: #eee; 
 
    background: #114C8F; 
 
    border-color: #0E3A59; 
 
}

<button class="btn" type="button">No Filter</button>

來源

2017-02-02 15:41:40 seantunwin

單擊按鈕時切換狀態？

回答

相關問題