Переключение состояний при нажатии кнопки?

Я застреваю с проблемой дизайна/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. Да согласен. Я пробовал это, но не уверен с коммутатором. Есть ли способ сделать это с помощью кнопки? (Как нажатие кнопки изменит текст на кнопке, чтобы «сбросить» с другим цветом?) .. Здесь нужны входные данные. – TechnoCorner

Я хотел бы предложить размещение как кнопка внутренние параметры там в самом начале. Затем используйте CSS и JS для переключения класса, который скрывает/показывает соответствующие внутренние элементы. Учитывая, что вы упоминаете, что вы меняете значение внутри раскрывающегося списка, я бы предположил, что у вас уже есть кнопка .on('click') где-то, этот код просто расширит это.

Используя .btn-active-toggle и внутренние .when-active или .when-inactive классов, у вас есть возможность использовать эту же логику в ряде мест, которые вы хотели бы, чтобы переключить внутреннее отображение кнопки (или, вернее, что-нибудь с классом от .btn-active-toggle). В терминах соглашений об именах данный загрузочный экземпляр включает CSS для любого .btn с классом .active, вы можете захотеть использовать другое имя класса, чем .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

Я думаю, вы можете сократить CSS, используя '.btn-active-toggle.active.когда-неактивно, .btn-active-toggle: not (.active) .when-active { \t дисплей: нет; } ' –

@MichaelCoker, однако, для небольшого пространства, которое он сохраняет, id скорее не нужно беспокоиться о [IE7/8, поддерживающем': not'] (http://caniuse.com/#feat=css- ВЫБ3). Если OP не заботится о браузерах, которые старые (и я не могу их обвинить), id поощряют ваш код :) – 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

Переключение состояний при нажатии кнопки?

ответ

Смежные вопросы