Меню
Спросить
???

Как сделать IPhone кнопку, переключатель?

23 октября 2017
Как сделать IPhone кнопку, переключатель?

Всем привет. Не знаю как правильно и точно он называется, но мы сделаем кнопку или переключатель как на IPhone. Смотрится классно, особенно если добавить свои стили. Использовать мы будет библиотеку JQuery, но можете и на нативном JavaScript. Так же я буду стилизовать input с типом range, но если вам нужна кроссбраузерная стилизация range, то вы найдете ее здесь.
Поехали =)
Для начала покажу код html, тут ни чего сложного. Я сделаю две кнопки, одна с использованием двух блоков, другая с помощью input.

Переключатель как на IPhone
  1. <!doctype html>
  2. <html>
  3. <head lang="ru">
  4. <link href="style.css" rel="stylesheet">
  5. <script type="text/javascript" src="jquery.js"></script>
  6. <script type="text/javascript" src="script.js"></script>
  7. <title></title>
  8. </head>
  9. <body>
  10. <div class="iphone">
  11. <div class="screen">
  12. <ul class="settings">
  13. <li>Включить интернет<div class="btn" data-val="0"><div class="slide"></div></div><li>
  14. <li>Включить WI-FI<input type="range" class="range" value="0" min="0" max="1" oninput="range()"></li>
  15. </ul>
  16. </div>
  17. </div>
  18. </body>
  19. </html>

Два блока = переключатель

Как я уже сказал выше, первый переключатель как на IPhone я буду делать с помощью двух блоков с классами .btn и .slide.
Сначала стили css для кнопок.
Тут все должно быть понятно. RELATIVE позиционирование я использую потому, что дочерний блок .slide будет с абсолютным позиционированием и это не даст выйти ему за рамки родителя. Дальше прижимаю к правому краю, ширина, высота, цвет фона, скругление углов и скрытие элементов которые вылезли за границы родителя.

  1. .btn{
  2. position:relative;
  3. float:right;
  4. width:60px;
  5. height:30px;
  6. background:#cecece;
  7. border-radius:20px;
  8. overflow:hidden;
  9. }

Теперь дочерний блок зеленого цвета.

  1. .slide{
  2. position:absolute;
  3. width:60px;
  4. height:30px;
  5. background:#27ae60;
  6. border-radius:20px;
  7. left:-50%;
  8. }

И осталась белая круглая кнопка. Ее я сделаю с помощью псевдоэлемента :before.

  1. .slide:before{
  2. position:absolute;
  3. content:'';
  4. right:0;
  5. cursor:pointer;
  6. height:30px;
  7. width:50%;
  8. background:white;
  9. border-radius:20px;
  10. }

Вот и все осталось запрограммировать данный переключатель.
Сначала напишем событие готовности документа.

  1. $(document).ready(function(){

  2. });

Дальше напишем обработчик нажатия на элемент .btn

  1. $(document).ready(function(){
  2.     $('.btn').on('click', function(){

  3.     });
  4. });

При нажатии будем получать значение атрибута data-val данного элемента и записывать в переменную val.

  1. $(document).ready(function(){
  2.     $('.btn').on('click', function(){
  3.         var
  4.         val = $(this).attr('data-val');
  5.     });
  6. });

Теперь нужно проверить, если переменная val равна нулю, тогда мы меняем атрибут data-val на единицу и анимированно передвигает элемент .slide, в противном случае делаем все наоборот.

  1. $(document).ready(function(){
  2.     $('.btn').on('click', function(){
  3.         var
  4.         val = $(this).attr('data-val');      
  5.         if (val == 0){
  6.     $(this).attr('data-val', 1);
  7.     $('.slide').animate({'left':'0'}, 500);
  8.         }
  9.         else if (val == 1){
  10.     $(this).attr('data-val', 0);
  11.     $('.slide').animate({'left':'-50%'}, 500);
  12.         }
  13.     });
  14. });

Можете проверить =)
Теперь придем к почти такому же результату с использованием input range. Почему почти? Потому что они будут не много отличаться. Главное отличие этих двух переключателей в том, что переключатель с помощью range еще можно будет переключать свайпом вправо или влево.
Сначала стилизуем input type range, делаем его похожим на переключатель как на IPhone.
Обнулим стили и уберет outline

  1. .range{
  2. -webkit-appearance:none;
  3. outline:none;
  4. }

Теперь зададим цвет фона по особому с помощью градиента. Я выделю жирным 4 места, первые два это зеленый цвет, а вторые два это серый цвет.

  1. .range{
  2. -webkit-appearance:none;
  3. outline:none;
  4. background:-webkit-linear-gradient(left, #27ae60 0%, #27ae60 0%, #cecece 0%, #cecece 100%);
  5. }

Сейчас нужно стили для класса .btn перенести ниже стилей класса .range и добавить туда .range

  1. .range{
  2. -webkit-appearance:none;
  3. outline:none;
  4. background:-webkit-linear-gradient(left, #27ae60 0%, #27ae60 0%, #cecece 0%, #cecece 100%);
  5. }
  6. .btn, .range{
  7. position:relative;
  8. float:right;
  9. width:60px;
  10. height:30px;
  11. background:#cecece;
  12. border-radius:20px;
  13. overflow:hidden;
  14. }

Остались стили для круглой кнопки.

  1. .range::-webkit-slider-thumb{
  2. -webkit-appearance:none;
  3. background:white;
  4. width:30px;
  5. height:30px;
  6. border-radius:30px;
  7. cursor:pointer;
  8. }

Теперь код JS.
Для начала создаем функцию, в коде она должна быть до события готовности документа.
Функция будет получать value инпута и умнажаться на сто, далее просто меняем css свойство с подстановкой значений.

  1. function range(){
  2. var
  3. val = $('.range').val();
  4. val *= 100;
  5. $('.range').css({'background':'-webkit-linear-gradient(left, #27ae60 '+val+'%, #27ae60 '+val+'%, #cecece 0%, #cecece 100%)'});
  6. }

Дальше, обработчик нажатия на .range, получаем валуе, проверяем его и меняем, а так же меняем стили css.

  1. $('.range').on('click', function(){
  2. var
  3. val = $(this).val();
  4. if (val == 0){
  5. val = 1;
  6. }
  7. else if(val == 1){
  8. val = 0;
  9. }
  10. $(this).val(val);
  11. val *= 100;
  12. $('.range').css({'background':'-webkit-linear-gradient(left, #27ae60 '+val+'%, #27ae60 '+val+'%, #cecece 0%, #cecece 100%)'});
  13.  });

Заключение

Вот и все, переключатели как на IPhone готовы. На самом деле способов сделать их множество, все зависит от вашей фантазии и умений. Всем спасибо, пока =)

Следующая статьяПредыдущая статья