В предыдущем упражнении
мы видели, как мы можем использовать
элементы управления на основе JavaScript, которые предоставляются для
компонентов Bootstrap JavaScript,
чтобы контролировать поведение компонентов.
В частности, мы видели использование карусели и
как мы смогли ввести
две кнопки для управления
велосипедным поведением карусели.
Теперь я не полностью удовлетворен этой реализацией.
Я хотел бы теперь свернуть все это
в одну кнопку, которая может
указывать как
текущее поведение карусели, так и управлять каруселью.
Итак, давайте посмотрим, как мы можем использовать
дальнейший код jQuery,
чтобы достичь этого, в этом упражнении.
Чтобы добиться этого, мы вернемся к коду
в index.html, где мы определили две кнопки.
Теперь я собираюсь удалить этот div для
группы кнопок, потому что у нас будет
только одна кнопка вместо двух кнопок.
Поэтому я удалил div вокруг двух кнопок.
Я также удалю одну из кнопок,
потому что мы будем работать
только с одной кнопкой для этого упражнения.
Поэтому позвольте мне изменить отступ.
Так что теперь, эта конкретная кнопка, которая у нас есть,
я собираюсь переименовать эту кнопку как CarouselButton.
Мы начнем с этой кнопки,
являющейся кнопкой со значком паузы.
Мы собираемся перевернуть значок для
этой кнопки через код JavaScript.
Так как же нам это сделать?
Взглянув на нашу веб-страницу,
мы теперь увидим, что у нас есть одна кнопка здесь,
которая в настоящее время указывает на паузу там.
Теперь я надеюсь, что в конце этого упражнения
превратить эту кнопку в
единый элемент управления, при котором, если я
нажму на эту кнопку, он приостановит циклическое поведение карусели,
а затем одновременно превратит
эту кнопку в кнопку воспроизведения,
что означает, что эта иконка
будет заменена со значком воспроизведения.
Так что эта единственная кнопка указывает
на
текущее состояние циклического поведения моей карусели. Как нам это сделать?
Нам нужно пойти и отредактировать
код JavaScript, чтобы достичь этого.
Перейдя к коду JavaScript
в нижней части страницы index.html.
Итак, у нас был этот скрипт, который мы
включили ранее
, чтобы активировать две кнопки там.
Я собираюсь отредактировать этот код,
чтобы использовать ту единственную кнопку, которая у нас есть.
Поэтому, спускаясь сюда,
я собираюсь удалить
эту вторую часть, потому что
сейчас у нас есть только одна кнопка,
которая является CarouselButton,
и всякий раз, когда она нажата,
вам нужно что-то сделать в ответ на это.
Итак, если
нажата кнопка карусели, то что вы делаете?
Теперь, к счастью,
в зависимости от того, является ли кнопка «Воспроизведение» или «Пауза»,
мы сможем предпринять соответствующие действия.
Но как мы узнаем,
является ли это кнопка воспроизведения или кнопка паузы?
Таким образом, здесь мы собираемся использовать
некоторый код jQuery, чтобы
определить, является ли это кнопкой воспроизведения или кнопкой паузы.
Чтобы помочь нам определить это,
мы идем внутрь здесь, а затем использовать оператор if
, и внутри, я
собираюсь проверить, является ли это игрой или кнопкой паузы.
Так вот я говорю,
каруселButton. Дети простираются. Это
означает, что
для этой кнопки карусели,
внутри, где, если есть элемент с тегом span,
так что мы, очевидно, знаем, что в нашей кнопке карусели,
у нас был тег span, который
содержал значок Font Awesome там.
Поэтому для этого тега span
мы собираемся проверить HasClass.
Итак, мы собираемся проверить этот HasClass,
а затем класс, который мы собираемся
проверить, является fa-pause.
Это означает, что
если тег span имеет класс fa-pause,
то мы знаем, что эта кнопка в
настоящее время действует как кнопка паузы.
Таким образом, очевидно, когда кнопка
нажата, пользователь ожидает, что
циклическое поведение должно быть приостановлено.
Так вот, что мы здесь идентифицируем.
Таким образом, вы теперь видите, что мы пишем
более продвинутый код JavaScript
, используя синтаксис jQuery, чтобы сделать эту работу правильной.
Итак, внутри, так что мне нужно сделать?
Теперь, так что это означает, что если кнопка
в настоящее время является кнопкой Пауза
, то, очевидно, когда кнопка нажата,
вы хотите приостановить карусель.
Затем, кроме того, мы хотим теперь иметь возможность переворачивать
этот значок из значка паузы на значок воспроизведения.
Так что мы будем делать,
мы скажем прямо там после этого,
мы скажем $CarouselButton.Children span,
а затем мы скажем, removeClass.
Итак, мы удалим класс паузы.
Так что обратите внимание, как это работает.
Мы удалим класс паузы из этого,
а затем, мы добавим PlayClass.
Таким образом, значок кнопки теперь
будет перевернут с кнопки Пауза на кнопку Воспроизвести.
Итак, мы собираемся удалить PauseClass.
Я просто скопирую этот код, а
затем вставьте его прямо
там, а затем выполните редактирование этого кода.
То же самое, для CarouselButton для детей,
я собираюсь вместо RemoveClass,
я бы сказал addClass, а затем fa-play.
Таким образом, то, что мы делаем,
мы переворачиваем эту кнопку
с кнопки паузы на кнопку воспроизведения.
Кроме того, мы
приостанавливаем поведение карусели на велосипеде.
Теперь, если это не так, то
это должна быть кнопка Play, так что
должен быть введен противоположный эффект.
Затем я собираюсь просто скопировать этот код,
а затем сделать другие тесты для ситуации,
когда кнопка является PlayButton.
Так что я бы сказал, что теперь, очевидно,
мне это не нужно, если бы здесь, но чтобы быть вдвойне уверенным,
я собираюсь положить это туда.
Потому что есть только две возможности,
либо это кнопка паузы или кнопка воспроизведения,
но только для моей уверенности,
я собираюсь поставить это как fa-play там.
Теперь внутри, я собираюсь изменить
это с паузы на цикл.
Поскольку из предыдущего упражнения
вы помните, что если вы хотите,
чтобы поведение на велосипеде возобновилось,
вам придется установить действие карусели как цикл.
Затем аналогичным образом, для остальных двух операторов,
я собираюсь удалить PlayClass,
а затем добавить PauseClass.
Поэтому обратите внимание, как мы используем немного
продвинутого кода jQuery,
чтобы иметь возможность динамически изменять значок кнопок
и в то же время
вызывать соответствующее поведение велосипеда на нашей карусели.
Взглянув на нашу веб-страницу,
вы видите, что моя карусель ездит на велосипеде,
и вы видите, что эта кнопка в настоящее время является кнопкой паузы.
Когда я нажимаю на эту кнопку,
обратите внимание, как она меняется с паузы на кнопку воспроизведения
, а затем
одновременно мое поведение карусели приостанавливается.
Таким образом, на данный момент
моя карусель будет оставаться приостановленной в
этом месте, пока я не нажму кнопку.
Итак, если я снова
нажму эту кнопку, обратите внимание на изменение кнопки «Воспроизведение» на «
Пауза», а затем поведение
карусели на месте возобновится.
Таким образом, используя одну кнопку сейчас,
я могу управлять
поведением карусели, а также одновременно
отображать текущее состояние
поведения моей карусели на велосипеде.
Если это кнопка Пауза, это
означает, что моя карусель в настоящее время ездит на велосипеде.
Если это кнопка «Воспроизведение»,
то моя карусель приостанавливается.
Поэтому, чтобы возобновить его,
мне придется нажать на кнопку.
Таким образом, это еще одно дополнительное изменение
, которое вы можете сделать в упражнении.
Итак, теперь вы видите, как в нашем коде мы
использовали метод HasClass,
и мы также видели использование методов
RemoveClass и AddClass, методов
jQuery, которые мы применили,
чтобы манипулировать DOM, чтобы
отразить поведение как
уместное в этом конкретном случае.
С этим мы завершаем это упражнение.
Пришло время для вас сделать фиксацию Git с
сообщением больше Bootstrap и jQuery.