Переключатель (кнопка) [закрыт]

196

13 декабря 2018, 20:40

Можно ли как то реализовать подобный переключатель с помощью каких то готовых решений jquery? Существуют ли такие? При переключении кнопки (переключателя), блоки справа должны выделяться соответствующим образом. Как можно такое реализовать?

Answer 1

Держи. Вот вариант на SASS, там можно все детально и удобно настроить.

body { 
  padding: 30px; 
} 
 
.can-toggle { 
  position: relative; 
} 
.can-toggle *, .can-toggle *:before, .can-toggle *:after { 
  box-sizing: border-box; 
} 
.can-toggle input[type=checkbox] { 
  opacity: 0; 
  position: absolute; 
  top: 0; 
  left: 0; 
} 
.can-toggle input[type=checkbox][disabled] ~ label { 
  pointer-events: none; 
} 
.can-toggle input[type=checkbox][disabled] ~ label .can-toggle__switch { 
  opacity: 0.4; 
} 
.can-toggle input[type=checkbox]:checked ~ label .can-toggle__switch:before { 
  content: attr(data-unchecked); 
  left: 0; 
} 
.can-toggle input[type=checkbox]:checked ~ label .can-toggle__switch:after { 
  content: attr(data-checked); 
} 
.can-toggle label { 
  user-select: none; 
  position: relative; 
  display: flex; 
  align-items: center; 
} 
.can-toggle label .can-toggle__label-text { 
  flex: 1; 
  padding-left: 32px; 
} 
.can-toggle label .can-toggle__switch { 
  position: relative; 
} 
.can-toggle label .can-toggle__switch:before { 
  content: attr(data-checked); 
  position: absolute; 
  top: 0; 
  text-align: center; 
} 
.can-toggle label .can-toggle__switch:after { 
  content: attr(data-unchecked); 
  position: absolute; 
  z-index: 5; 
  text-align: center; 
  background: white; 
  transform: translate3d(0, 0, 0); 
} 
.can-toggle input[type=checkbox][disabled] ~ label { 
  color: rgba(119, 119, 119, 0.5); 
} 
.can-toggle input[type=checkbox]:focus ~ label .can-toggle__switch, .can-toggle input[type=checkbox]:hover ~ label .can-toggle__switch { 
  background-color: #777; 
} 
.can-toggle input[type=checkbox]:focus ~ label .can-toggle__switch:after, .can-toggle input[type=checkbox]:hover ~ label .can-toggle__switch:after { 
  color: #5e5e5e; 
} 
.can-toggle input[type=checkbox]:hover ~ label { 
  color: #6a6a6a; 
} 
.can-toggle input[type=checkbox]:checked ~ label:hover { 
  color: #55bc49; 
} 
.can-toggle input[type=checkbox]:checked ~ label .can-toggle__switch { 
  background-color: #70c767; 
} 
.can-toggle input[type=checkbox]:checked ~ label .can-toggle__switch:after { 
  color: #4fb743; 
} 
.can-toggle input[type=checkbox]:checked:focus ~ label .can-toggle__switch, .can-toggle input[type=checkbox]:checked:hover ~ label .can-toggle__switch { 
  background-color: #5fc054; 
} 
.can-toggle input[type=checkbox]:checked:focus ~ label .can-toggle__switch:after, .can-toggle input[type=checkbox]:checked:hover ~ label .can-toggle__switch:after { 
  color: #47a43d; 
} 
.can-toggle label .can-toggle__label-text { 
  flex: 1; 
} 
.can-toggle label .can-toggle__switch { 
  transition: background-color 0.3s cubic-bezier(0, 1, 0.5, 1); 
  background: #848484; 
} 
.can-toggle label .can-toggle__switch:before { 
  color: rgba(255, 255, 255, 0.5); 
} 
.can-toggle label .can-toggle__switch:after { 
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 1, 0.5, 1); 
  transition: transform 0.3s cubic-bezier(0, 1, 0.5, 1); 
  color: #777; 
} 
.can-toggle input[type=checkbox]:focus ~ label .can-toggle__switch:after, .can-toggle input[type=checkbox]:hover ~ label .can-toggle__switch:after { 
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4); 
} 
.can-toggle input[type=checkbox]:checked ~ label .can-toggle__switch:after { 
  transform: translate3d(65px, 0, 0); 
} 
.can-toggle input[type=checkbox]:checked:focus ~ label .can-toggle__switch:after, .can-toggle input[type=checkbox]:checked:hover ~ label .can-toggle__switch:after { 
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4); 
} 
.can-toggle label { 
  font-size: 14px; 
} 
.can-toggle label .can-toggle__switch { 
  height: 36px; 
  flex: 0 0 134px; 
  border-radius: 4px; 
} 
.can-toggle label .can-toggle__switch:before { 
  left: 67px; 
  font-size: 12px; 
  line-height: 36px; 
  width: 67px; 
  padding: 0 12px; 
} 
.can-toggle label .can-toggle__switch:after { 
  top: 2px; 
  left: 2px; 
  border-radius: 2px; 
  width: 65px; 
  line-height: 32px; 
  font-size: 12px; 
} 
.can-toggle label .can-toggle__switch:hover:after { 
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4); 
} 
.can-toggle.demo-rebrand-2 input[type=checkbox][disabled] ~ label { 
  color: rgba(68, 68, 68, 0.5); 
} 
.can-toggle.demo-rebrand-2 input[type=checkbox]:focus ~ label .can-toggle__switch, .can-toggle.demo-rebrand-2 input[type=checkbox]:hover ~ label .can-toggle__switch { 
  background-color: #444; 
} 
.can-toggle.demo-rebrand-2 input[type=checkbox]:focus ~ label .can-toggle__switch:after, .can-toggle.demo-rebrand-2 input[type=checkbox]:hover ~ label .can-toggle__switch:after { 
  color: #2b2b2b; 
} 
.can-toggle.demo-rebrand-2 input[type=checkbox]:hover ~ label { 
  color: #373737; 
} 
.can-toggle.demo-rebrand-2 input[type=checkbox]:checked ~ label:hover { 
  color: #6b99e8; 
} 
.can-toggle.demo-rebrand-2 input[type=checkbox]:checked ~ label .can-toggle__switch { 
  background-color: #8eb1ed; 
} 
.can-toggle.demo-rebrand-2 input[type=checkbox]:checked ~ label .can-toggle__switch:after { 
  color: #6293e7; 
} 
.can-toggle.demo-rebrand-2 input[type=checkbox]:checked:focus ~ label .can-toggle__switch, .can-toggle.demo-rebrand-2 input[type=checkbox]:checked:hover ~ label .can-toggle__switch { 
  background-color: #78a2ea; 
} 
.can-toggle.demo-rebrand-2 input[type=checkbox]:checked:focus ~ label .can-toggle__switch:after, .can-toggle.demo-rebrand-2 input[type=checkbox]:checked:hover ~ label .can-toggle__switch:after { 
  color: #4c84e3; 
} 
.can-toggle.demo-rebrand-2 label .can-toggle__label-text { 
  flex: 1; 
} 
.can-toggle.demo-rebrand-2 label .can-toggle__switch { 
  transition: background-color 0.3s cubic-bezier(0.86, 0, 0.07, 1); 
  background: #515151; 
} 
.can-toggle.demo-rebrand-2 label .can-toggle__switch:before { 
  color: rgba(255, 255, 255, 0.7); 
} 
.can-toggle.demo-rebrand-2 label .can-toggle__switch:after { 
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.86, 0, 0.07, 1); 
  transition: transform 0.3s cubic-bezier(0.86, 0, 0.07, 1); 
  color: #444; 
} 
.can-toggle.demo-rebrand-2 input[type=checkbox]:focus ~ label .can-toggle__switch:after, .can-toggle.demo-rebrand-2 input[type=checkbox]:hover ~ label .can-toggle__switch:after { 
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4); 
} 
.can-toggle.demo-rebrand-2 input[type=checkbox]:checked ~ label .can-toggle__switch:after { 
  transform: translate3d(108px, 0, 0); 
} 
.can-toggle.demo-rebrand-2 input[type=checkbox]:checked:focus ~ label .can-toggle__switch:after, .can-toggle.demo-rebrand-2 input[type=checkbox]:checked:hover ~ label .can-toggle__switch:after { 
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4); 
} 
.can-toggle.demo-rebrand-2 label { 
  font-size: 15px; 
} 
.can-toggle.demo-rebrand-2 label .can-toggle__switch { 
  height: 45px; 
  flex: 0 0 220px; 
  border-radius: 60px; 
} 
.can-toggle.demo-rebrand-2 label .can-toggle__switch:before { 
  left: 110px; 
  font-size: 15px; 
  line-height: 45px; 
  width: 110px; 
  padding: 0 12px; 
} 
.can-toggle.demo-rebrand-2 label .can-toggle__switch:after { 
  top: 2px; 
  left: 2px; 
  border-radius: 30px; 
  width: 108px; 
  line-height: 41px; 
  font-size: 15px; 
} 
.can-toggle.demo-rebrand-2 label .can-toggle__switch:hover:after { 
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4); 
}

<div class="can-toggle demo-rebrand-2"> 
  <input id="e" type="checkbox"> 
  <label for="e"> 
    <div class="can-toggle__switch" data-checked="Indivudual" data-unchecked="Company"></div> 
    <div class="can-toggle__label-text"></div> 
  </label> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Прочитать структуру как массив байт

Не уверен что такое возможно, но есть ли хоть что-то что может помочь прочитать структуру данных как массив байт? Допустим в си/c++ проблем с таковым...

217

C# AspNetCore WebApp. Настройка байндинга для POST запроса

Если у меня есть модель данных в которой есть св-во представленное абстрактным классомЕсли я возвращаю ответ GET запросом, то JSON сериализатор...

187

ReactiveUI синхронный вызов ReactiveCommand вызывает System.InvalidOperationException

Предположим у меня есть Button с привязкой к команде ViewModelВо ViewModel я пишу:

184

Из Visual Studio не создается бд FireBird

Не получается из VS подключиться к бд

170