Jquery примеры toggle: Метод .toggle() | jQuery справочник

Leave a Comment / Разное / By /

Содержание

Оператор switch — Учебник JavaScript — Schoolsw3.com

❮ Назад Далее ❯

Оператор switch используется для выполнения различных действий, основанных на различных условиях.

JavaScript Оператор Switch

Используйте оператор switch, чтобы выбрать один из множества блоков кода для выполнения.

Синтаксис

switch(expression) {
  case x:
    // блок кода
    break;
  case y:
    // блок кода
    break;
  default:
    // блок кода
}

Вот как это работает:

  • Выражение switch (переключателя) вычисляется один раз.
  • Значение выражения сравнивается со значениями каждого случая.
  • Если есть совпадение, соответствующий блок кода выполняется.
  • Если совпадений нет, выполняется блок кода по умолчанию

Пример

Метод getDay() возвращает день недели как число между 0 и 6.

(Воскресенье=0, Понедельник=1, Вторник=2 . .)

В этом примере номер дня недели используется для вычисления названия дней недели:

switch (new Date().getDay()) {
  case 0:
    day = «Воскресенье»;
    break;
  case 1:
    day = «Понедельник»;
    break;
  case 2:
     day = «Вторник»;
    break;
  case 3:
    day = «Среда»;
    break;
  case 4:
    day = «Четверг»;
    break;
  case 5:
    day = «Пятница»;
    break;
  case 6:
    day = «Суббота»;
}

Результатом будет:

Попробуйте сами »

Ключевое слово break

Когда JavaScript достигает ключевого слова break, он выходит из блока switch.

Это остановит выполнение внутри блока.

Нет необходимости обрывать последний кейс в блоке switch. Блок всё равно обрывается (заканчивается).

Примечание: Если вы пропустите оператор break, следующий кейс будет выполнен, даже если оценка не соответствует кейсу.

Ключевое слово default

Ключевое слово default указывает код для запуска, если нет ни одного совпадения:

Пример

Метод getDay() возвращает день недели в виде числа от 0 до 6.

Если сегодня не Суббота (6) и не Воскресенье (0), напишите сообщение по умолчанию (default):

switch (new Date().getDay()) {
  case 6:
    text = «Сегодня суббота»;
    break;
  case 0:

    text = «Сегодня воскресенье»;
    break;
  default:
    text = «С нетерпением жду выходных»;
}

Результатом текста будет:

Попробуйте сами »

Случай default не должен быть последним случаем в блоке switch:

Пример

switch (new Date().getDay()) {
  default:
    text = «С нетерпением жду выходных»;
    break;
  case 6:
    text = «Сегодня суббота»;
    break;
  case 0:
    text = «Сегодня воскресенье»;
}

Попробуйте сами »

Если default не является последним кейсом в блоке switch, не забудьте завершить кейс default с помощью break.

Общие блоки кода

Иногда необходимо, чтобы разные варианты переключения (кейсы switch) использовали один и тот же код.

В этом примере 4 и 5 используют один и тот же блок кода, а 0 и 6 — другой блок кода:

Пример

switch (new Date().getDay()) {
  case 4:
  case 5:
    text = «Скоро выходные»;
    break;
  case 0:
  case 6:
    text = «Сейчас выходные»;
    break;
  default:
    text = «С нетерпением жду выходных»;
}

Попробуйте сами »

Детали переключения

Если нескольким кейсам соответствует значение кейса, выбирается первый кейс.

Если подходящих кейсов не найдено, программа переходит на ярлык default.

Если метка по умолчанию не найдена, программа переходит к оператору(ам) после switch.

Строгое сравнение

Switch кейсы используют строгое сравнение (===).

Значения должны быть одного типа, чтобы соответствовать.

Строгое сравнение может быть true, только если операнды имеют одинаковый тип.

В этом примере не будет совпадения для х:

Пример

var x = «0»;
switch (x) {
  case 0:
    text = «Выкл»;
    break;
  case 1:
    text = «Вкл»;
    break;
  default:
    text = «Значение не найдено»;
}

Попробуйте сами »

Проверьте себя с помощью упражнений

Упражнение:

Создайте switch заявление, которая будет предупреждать «Привет», если fruits это «Банан», и «Добро пожаловать», если fruits это «Яблоко».

(fruits) {
 "Банан":
alert("Привет")
break;
 "Яблоко":
alert("Добро пожаловать")
break;    
}

Упражнение

❮ Назад Далее ❯

Сворачивание содержимого | WebReference

Легко добавляйте сворачиваемое содержимое с помощью .collapse и связанных классов. Вы можете сделать своё содержимое сворачиваемым, добавив data-toggle=»collapse» к кнопке или ссылке, которая указывает на идентификатор содержимого для сворачивания.

Использование ссылки

Используйте элемент <a>, у которого значение href задано как идентификатор сворачиваемого содержимого. В контейнер сворачиваемого содержимого добавьте класс .collapse и обязательно задайте для него идентификатор.

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»> <p><a data-toggle=»collapse» href=»#footwear» aria-expanded=»false» aria-controls=»footwear»>Обувь</a></p> <div> <p>Обувь относится к предметам одежды для ног, изначально служит для защиты от неблагоприятных воздействий окружающей среды, обычно в отношении поверхности и температуры.</p> </div> <script src=»https://code.jquery.com/jquery-3.2.1.slim.min.js»></script> <script src=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js»></script>

Использование кнопки

Используйте атрибут data-target со значением идентификатора сворачиваемого содержимого. В контейнер сворачиваемого содержимого добавьте класс .collapse и обязательно задайте для него идентификатор.

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»> <button type=»button» data-toggle=»collapse» data-target=»#footwear» aria-expanded=»false» aria-controls=»footwear»>Обувь</button> <div> <p>Обувь относится к предметам одежды для ног, изначально служит для защиты от неблагоприятных воздействий окружающей среды, обычно в отношении поверхности и температуры.</p> </div> <script src=»https://code.jquery.com/jquery-3.2.1.slim.min.js»></script> <script src=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js»></script>

Аккордеон

Сворачиваемое содержимое часто используется для создания «аккордеона», популярного для часто задаваемых вопросов, обзоров продуктов и др. Вы можете использовать карточки Bootstrap для оформления аккордеона, как показано ниже.

Добавьте класс .show к сворачиваемому содержимому, чтобы оно раскрывалось при загрузке страницы, кроме того используйте aria-extended=»true».

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»> <div role=»tablist» aria-multiselectable=»true»> <div> <div role=»tab»> <h5> <a data-toggle=»collapse» data-parent=»#faq» href=»#answerOne» aria-expanded=»true» aria-controls=»answerOne»> Что если ботинки большие для моих ног? </a> </h5> </div> <div role=»tabcard» aria-labelledby=»questionOne»> <div> Набейте ботинки газетами или салфетками. </div> </div> </div> <div> <div role=»tab»> <h5> <a data-toggle=»collapse» data-parent=»#faq» href=»#answerTwo» aria-expanded=»false» aria-controls=»answerTwo»> Могу я носить ботинки в помещении? </a> </h5> </div> <div role=»tabcard» aria-labelledby=»questionTwo»> <div> Нет.
Твоя мама должна была рассказать об этом. </div> </div> </div> <div> <div role=»tab»> <h5> <a data-toggle=»collapse» data-parent=»#faq» href=»#answerThree» aria-expanded=»true» aria-controls=»answerThree»> Что делать, если ботинки скользят при намокании? </a> </h5> </div> <div role=»tabcard» aria-labelledby=»questionThree»> <div> Храните ботинки в сухости. </div> </div> </div> </div> <script src=»https://code.jquery.com/jquery-3.2.1.slim.min.js»></script> <script src=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js»></script>
Bootstrap 4 против Bootstrap 3

Bootstrap 3 использует .in для раскрытия содержимого при загрузке страницы, Bootstrap 4 в этом случае использует .show.

Автор: Йен Диксон

Последнее изменение: 12.03.2020

25+ jQuery Toggle Switches — Free Code + Demos

1.

Elastic Volume Toggle — JQuery

Автор: Aaron Iker (aaroniker)

Ссылки: Исходный код / ​​Демо, Dribbble Shot

18 октября 2019 г.

Сделано с: HTML, SCSS, JS

Теги: громкость, переключатель, Switch, Greensock, Tween

2. Анимация 3D 2

Автор: Aaron Iker (Aaroniker 2

Автор: Aaron Iker (Aaroniker 2 )

Ссылки: Исходный код / ​​Демо, Dribbble Shot

Создано: 1 сентября 2019 г.

Сделано с: HTML, SCSS, JS

, Tags: , toggle animation, 30005 ThreeJS

3. Анимация 3D -переключателя

Автор: Аарон Икер (Аароникер)

Ссылки: Исходный код / ​​Демо, Dribbble Shot

Создано: 28 августа 2019

.0006 HTML, SCSS, JS

Метки: переключатель, переключатель, 3d, threejs, webgl

4.

Плюс/минус переключатель CSS

Автор: Адам Кун (cobra_winfrey) Код

/

Демо, Dribbble Shot, Dribbble.com

Создан: 30 июля 2018 г.

Сделано с: HAML, SCSS

CSS Preprocessor: SCSS

JS Pre-Processor: None

JS: None

JS.

HTML Precessor: HAML

5. Animated SVG Radio Button

Автор: Abhisek Dutta (0xfa1l)

Ссылки: Исходный код / ​​Демо

Созданы на: декабря 20 000

. Сделано с: HTML, CSS, JS

6. Кнопка включения/выключения — скользящая кнопка

Кнопка включения/выключения — скользящая кнопка

Автор: Diego Cadena (dcadev)

Ссылки:

0006 Исходный код / ​​Демо

Создано: 4 ноября 2018 г.

Сделано с: HTML, Меньше, JS

Теги: кнопка скользящая, вкл, выкл, скользящая, кнопка

7.900 Batman | Кнопка переключения «Супермен»

Выберите своего любимого супергероя: Бэтмена или Супермена. Я иду с Бэтменом 🙂 Кнопки переключения. Вдохновился этим снимком Dribbble: https://dribbble.com/shots/4917998-Radio-buttons-interaction, но я использовал свою собственную концепцию переключения кнопок в этом ручке.

Автор: Himalaya Singh (Himalayasingh)

Ссылки: Исходный код / ​​демонстрация, Dribbble.com

Созданы на: 12 октября 2018 г.

.

Теги: переключатели, микровзаимодействия, радиокнопки, переключатели, переключатели

8. Smiley Switch Animation

Автор: Аарон Икер (aaroniker)

Код:

Ссылки6 Демонстрация, Дрибббл Шот

Создан: 22 сентября 2018 г.

Сделано с: HTML, SCSS, JS

Теги: Смайли Aaron Iker (Aaroniker)

Ссылки: Исходный код / ​​демонстрация, Dribbble Shot

Созданы: 1 июля 2018 г.

Сделано с: HTML, SCSS, JS

. анимация, чекбокс, ввод, загрузчик

10. Кнопка переключения

Автор: Ravi Dhiman (Ravid7000)

Ссылки: Исходный код / ​​демонстрация

Создана на: 11 марта 2017

CSS Препроцессор: SCSS

JS Pre-Processor: NOT

HTML Preprocessor: PUG

TAGS: CSS-Button, CSS Toggle Button, Button Toggle

11. Анимация SVG/CSS — флажок

Чувствуйте удовольствие с некоторым путем анимации SVG

Автор: Тимоти Гинжир (Timguignard)

Ссылки: исходный код / ​​демонстрация

Создано: 5 февраля 2017

. HTML, SCSS, JS

Метки: svg, анимация, флажок, путь, css

0007

Создано: 16 июля 2019 г.

Сделано с: HTML, CSS, JS

Теги: css, jquery, кнопка включения/выключения, кнопка ios, кнопка переключения W

1 90. / Jquery and css animations

Автор: Martin (Mpennock)

Ссылки: Исходный код / ​​демонстрация

Создано по адресу: 13 марта 2016

Сделано с: HTML, CSS, JS

. 14. UI 004: Компонент ценообразования

Автор: TheCalicoder (TheCalicoder)

Связанные лица: Исходный код / ​​демонстрация

Создано: 17 декабря 2019

Сделано с: Pug, SCSS, Babel

CSS Procor. : SCSS

Препроцессор JS: Babel

Препроцессор HTML: Pug

Теги: ценовой компонент, css, basscss, Day And sass, Day And sass, toggle-switch 90. 07 90.07 Toggle-switch 90.07

Эта ручка изготовлена ​​в рамках еженедельного соревнования по программированию. По материалам: https://dribbble.com/shots/4419357-Day-Night-Mode-Switcher?utm_source=Clipboard_Shot&utm_campaign=Mikhail-Gribkov&utm_content=Day%2FNight%20Mode%20Switcher&utm_medium=Social_Share

0 Автор: Raqun Chawhan _Raunaq_)

Ссылки: Исходный код / ​​Демо

Создано: 31 мая 2019 г.

Сделано с: HTML, CSS, JS

Теги: HTML, JavaScript, еженедельный кодирование, переключатель, переключатель, CSS

16. Простая пуговица

Toggle между днем ​​и ночью с использованием SCSS

Автор: Divakar (divakar_107

.

Ссылки: Исходный код / ​​демонстрация

Создано: 20 мая 2019 г.

Сделано с: HTML, SCSS, JS

Теги: Toggle-Switch

17.

Sleek Toggle Switch.0003

Изящный тумблер. Вы можете найти учебник здесь: https://www.youtube.com/watch?v=Qw325O6El5Y

Автор: Кент Хефли (Kryan74)

Ссылки: Исходный код / ​​Демо

Создано на: 9 мая 2019 г.

Сделано с: HTML, CSS, JS

Теги: тумблер, css-переходы, псевдоклассы

скользящая кнопка. вы можете использовать его везде, где хотите, особенно в форме, я надеюсь, вам понравится 🙂

Автор: Elyasmotazedy (Elyasmotazedy)

Ссылки: Исходный код / ​​демонстрация

Создано: март 25,

. ползунок, анимированная кнопка, выбор формы, анимированная форма, тумблер

19. Тумблер с блоком отображения раздела и без него

Тумблер с блоком отображения раздела и без блока

Автор: Venkatesh Pataballa (venkateshpataballa)

Ссылки: Исходный код / ​​демонстрация

Создано: 28 января 2019

TATS: HTML, CSS, JS

. -переключатель, переключатель, вкладки с тагглом

20. Тумблер с перетаскиванием

Простой тумблер с перетаскиваемым/сенсорным переключателем. (Пока не работает в Firefox)

Автор: Хидде Эртман (HiddeDeRidder)

Ссылки: Исходный код / ​​Демо

Дата создания: 10 января 2019 г.

21. Toggle Open Dyslexic

Переключатель для изменения пользователем шрифта страницы на Open Dyslexic0007

Дата создания: 23 января 2018 г.

Сделано с помощью: HTML, CSS, JS

Теги: доступность, тумблер, тумблер, веб-доступность:

2 2 Машины!

Конечные автоматы для переключателя? Вы держите пари! Дэвид Хуршид и Стивен Шоу воссоздали этот прекрасный пример анимации на основе конечного автомата с использованием CSS и JavaScript. 💡 Вдохновение: https://dribbble.com/shots/9841408-Загрузка-переключение-взаимодействие 📺 Видео: https://youtu. be/0Wx9QbRQYuI 💻 Код: h…

Подробнее

Автор: @keyframers (keyframers)

Код:

5 Ссылки: 6 / Демонстрация

Создано: 3 февраля 2020 г.

Сделано с: HTML, SCSS, JS

TAG: KeyFramer

Установка

Вы можете загрузить последнюю версию Bootstrap Toggle или использовать CDN для загрузки библиотеки.

Предупреждение. Если вы используете Bootstrap v2.3.2, используйте вместо него bootstrap2-toggle.min.js и bootstrap2-toggle.min.css .

Установка Bower

Установка Bower Bootstrap-Toggle

Использование

Простой пример

Просто добавьте data-toggle="toggle" , чтобы преобразовать флажки в переключатели.

Флажки с накоплением

См. документацию Bootstrap Form Controls для создания флажков с накоплением. Просто добавьте

data-toggle="toggle" , чтобы преобразовать флажки в переключатели.

Первый вариант включен

Второй вариант отключен

Встроенные флажки

См. документацию Bootstrap Form Controls для создания встроенных флажков. Просто добавьте data-toggle="toggle" , чтобы преобразовать флажки в переключатели.

Первый Второй Третий

API

Инициализировать с помощью JavaScript

Инициализировать переключатели с идентификатором toggle-one с помощью одной строки JavaScript.

Параметры

Параметры могут быть переданы через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя опции к data-, как в data-on="Enabled" .

906:40 Стиль переключателя с .

Возможные значения: по умолчанию , первичный , успех , информация , предупреждение , опасность
Дополнительные сведения см. в документации по параметрам кнопок Bootstrap.
Имя Тип По умолчанию Описание
на строка | html "Вкл. " Текст переключателя на
с строка | html «Выкл.» Текст переключателя
off
размер строка "нормальный" Размер переключателя. Возможные значения: большой , нормальный , маленький , мини
Дополнительные сведения см. в документации по кнопкам размера Bootstrap.
в стиле строка "основной" Стиль переключателя на .
Возможные значения: по умолчанию , первичный , успех , информация , предупреждение , опасность
Дополнительные сведения см. в документации по параметрам кнопок Bootstrap.
нестандартный строка "по умолчанию"
стиль строка Добавляет значение к атрибуту класса переключателя. Это можно использовать для применения пользовательских стилей. См. Пользовательские стили для справки.
ширина целое число ноль Устанавливает ширину переключателя. если установлено значение null , будет рассчитана ширина.
высота целое число ноль Устанавливает высоту переключателя. если установлено значение null , будет рассчитана высота.

Методы

Методы можно использовать для непосредственного управления переключателями.

Метод Пример Описание Демо
инициализировать $('#toggle-demo').bootstrapToggle() Инициализирует плагин переключения с параметрами
уничтожить $('#toggle-demo').bootstrapToggle('уничтожить') Уничтожает переключатель
на $('#toggle-demo').bootstrapToggle('вкл') Устанавливает переключатель в положение «Вкл.»
от $('#toggle-demo').bootstrapToggle('off') Устанавливает переключатель в положение «Выкл.»
тумблер $('#toggle-demo').bootstrapToggle('toggle') Переключает состояние тумблера
включить $('#toggle-demo').bootstrapToggle('enable') Включает переключатель
отключить $('#toggle-demo'). bootstrapToggle('отключить') Отключает переключатель

События

Распространение событий

Примечание. Все события распространяются на элемент ввода и от него к переключателю.

Вы должны прослушивать события из напрямую, а не искать пользовательские события.

API vs Input

Это также означает, что использование API или Input для запуска событий будет работать в обоих направлениях.

Демонстрации

Размеры

Переключатель Bootstrap доступен в различных размерах. Дополнительные сведения см. в документации по размерам кнопок Bootstrap.

Нестандартные размеры

Переключатель Bootstrap может обрабатывать нестандартные размеры на data-width и data-height вариантов.

Colors

Bootstrap Toggle поддерживает различные цвета. Дополнительные сведения см. в документации по параметрам кнопок начальной загрузки.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *