Эффект перехода
О последствиях перехода
Для простых эффектов перехода просто введите Transition.js и другие файлы JS вместе. Если вы используете скомпилированный (или сжатый) файл bootstrap.js, вам не нужно вводить его отдельно.
Что внутри
Transition.js является основным помощником для события TransitionEnd, а также является моделированием эффектов перехода CSS. Он используется другими плагинами для определения того, поддерживает ли текущий браузер эффекты перехода CSS.
складывать
Дайте базовый стиль и гибкую поддержку компонентам, которые поддерживают функции складывания, такие как акрологии и навигация.
Зависимости плагинов
Плагин коллапса зависит от плагина эффекта перехода.
Случай
Используя складной плагин, простой компонент Acron создается путем расширения компонента панели.
Давайте сначала посмотрим на эффект.
Далее, давайте посмотрим на реализацию кода.
<div style = "margin-top: 140px;"> <div id = "accordion"> <div> <div> <h4> <a data-toggle = "collapse" data-toggle = "collapse" data-parent = "#accorcdion" href = "#collapseone"> collpsible item </t hree nepase nму Cliche Drreeshenderit, Enim eiusmod Высокая жизнь обвиняемого Терри Ричардсона ad Quid. 3 Wolf Moon Officeaute, Non Cupidat Skateboard Dolor Brunch. Food Truck Quinoa nesciunt laborum eiusmod. Бранч 3 Волф-Луна Верхне, Sunt Aliqua положила на нее птицу с однооригеновым кофе Nulla Assumenda Shoreditch et. Nihil anim keffiyeh helvetica, Craft Beer Labor Wes Anderson Cred Nesciunt Sapiente EA Ad Vegan Excepteur Butcher Vice Lomo. Леггинсы ockaecat Craft Beer Farm-Toble, необработанное джинсовое эстетическое синтезатор. </a> </h4> </div> <div id = "collapsetwo"> <div> Anim Pariatur Cliche Drreeshenderit, Enim eiusmod Высокая жизнь обвиняем в Терри Ричардсоне и кальмаре. 3 Wolf Moon Officeaute, не купидатат скейтборд Долор Бранч. Food Truck Quinoa nesciunt laborum eiusmod. Бранч 3 Волф-Луна Верхне, Sunt Aliqua положила на нее птицу с однооригеновым кофе Nulla Assumenda Shoreditch et. Nihil anim keffiyeh helvetica, Craft Beer Labor Wes Anderson Cred Nesciunt Sapiente EA Ad Vegan Excepteur Butcher Vice Lomo. Леггинсы случаются крафтовое пиво с фермы до стола, сырой джинсовой эстетический синтезатор. </div> </div> <div> <div> <h4> <a data-toggle = "collapsse" data-toggle = "collapsse" data-parent = "#accorcleion" href = "#collapsethree"> Countable Group#3 </a> </h4> </div> <div id = "collapsethree"> <dive ainium pariatur Аксус Терри Ричардсон Ad Squid. 3 Wolf Moon Official Aute Aute, Non Cupidatat Skateboard Dolor Brunch. Food Truck Quinoa nesciunt laborum eiusmod. Бранч 3 Волф-Луна Верхне, Sunt Aliqua положила на нее птицу с однооригеновым кофе Nulla Assumenda Shoreditch et. Nihil anim keffiyeh helvetica, Craft Beer Labor Wes Anderson Cred Nesciunt Sapiente EA Ad Vegan Excepteur Butcher Vice Lomo. Леггинсы случаются крафтовое пиво с фермы до стола, сырой джинсовой эстетический синтезатор. </div> </div> </div> </div> </div>
Шаг 1: Во-первых, самый внешний слой группы панелей включает в себя несколько групп ниже.
Шаг 2: Посмотрите на некоторые простые группы
<div> <div> <h4> <a data-toggle = "collapsse" data-toggle = "collapse" data-parent = "#accordion" href = "#collapseOne"> пункт № 1 </a> </h4> </div> <div id = "collapseone"> <div> </div> </div> </div> <div id = "collapseone"
Структура панели можно четко увидеть через код.
Управление панели и кузовов, а затем заголовок панели может содержать заголовки и ссылки. Подключитесь с панелью-телом через ссылку.
Шаг 3: Вы можете обнаружить, что в группе панели есть id = "аккордеон", а затем в ссылке есть данные Data-parent = "#accordion" под каждым заголовком ниже.
В случае удаления эффект состоит в том, что после нажатия на другие ссылки исходная панель больше не будет сокращаться.
Вы можете показать эффект складывания по -другому.
<div style = "margin-top: 140px;"> <button type = "button" data-toggle = "collapse" data-target = "#demo"> простой коллапс </button> <div id = "demo"> Anim Pariatur Cliche Drrehenderit, Enim Eiusmod Accusamus Terry Richardson Ad. 3 Wolf Moon Official Aute Aute, Non Cupidat Skateboard Dolor Brunch. Food Truck Quinoa nesciunt laborum eiusmod. Бранч 3 Волф-Луна Верхне, Sunt Aliqua положила на нее птицу с однооригеновым кофе Nulla Assumenda Shoreditch et. Nihil anim keffiyeh helvetica, Craft Beer Labor Wes Anderson Cred Nesciunt Sapiente EA Ad Vegan Excepteur Butcher Vice Lomo. Леггинсы случайно-пиво
Использование
Плагин сгиба управляет стилями через несколько простых классов
.collapse скрыть контент
.collapse in Show Content
.collapssing. Он добавляется, когда переход запускается и удаляется, когда он закончит, вероятно, означает, что эффект перехода будет доступен после добавления сгиба, а затем, если он будет удален, он закончится.
Через атрибут данных
Просто добавление Data-toggle = "Couplapse" и направленность на данные в элемент страницы дает ему возможность управлять элементами складных страниц. Свойство Target Data принимает селектор CSS в качестве объекта управления. Обязательно добавьте класс коллапса в рухнувший элемент страницы. Если вы хотите, чтобы состояние по умолчанию было расширено, добавить в класс.
Чтобы добавить контроллер в набор складных элементов страницы, добавьте data-parent = "#selector". Пожалуйста, обратитесь к приведению выше.
через JavaScript
<button Type = "button" onclick = "open ()"> open </button> <button type = "button" onclick = "hide ()"> fold </button> <div id = "demo"> Anim pariatur cliche, dreshenderit, enim eiusmod accusamus terry Richardson ad squid. 3 Wolf Moon Official Aute Aute, Non Cupidat Skateboard Dolor Brunch. Food Truck Quinoa nesciunt laborum eiusmod. Бранч 3 Волф-Луна Верхне, Sunt Aliqua положила на нее птицу с однооригеновым кофе Nulla Assumenda Shoreditch et. Nihil anim keffiyeh helvetica, Craft Beer Labor Wes Anderson Cred Nesciunt Sapiente EA Ad Vegan Excepteur Butcher Vice Lomo. Леггингс occucaecat Craft Beer Farm-Toble, необработанное джинсовое эстетическое синтезирование. })}) function open () {$ ("#demo"). Collapsse ("show");} function hide () {$ ("#demo"). Collapsse ("hide");} </script>Взгляните на вышеупомянутый эффект
метод
Дайте элементы страницы складную функцию. Принимает дополнительный объект в качестве аргумента.
$ ("#demo"). коллапс ({toggle: false})
Таким образом, элементы будут расширены при инициативе.
1. Collapsse ('Toggle') отображает или скрывает складной элемент страницы.
2.collapse ('show') Отображает складной элемент страницы.
3.collapse ('Hide') скрывает складной элемент страницы.
событие
Плагин с коллапс в начальной загрузке раскрывает набор событий, которые можно слушать.
$ ('#demo'). On ('hidden.bs.collapse', function () {alert (1);})Это связывает скрытые события с элементом.