/
githubmirror
/
materialize
Обзор
Документация
Войти
/
githubmirror
/
materialize
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
v0.98.0
test/html/carousel.html
66 строк
2 KB
Chang Alan
Added onOpen and onClose callbacks to collapsible
25 июл 2016, 08:08
25 июл 2016, 08:08
171a9ef
Код
Авторство
О чём код?
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/> <title>Documentation - Materialize</title> <!-- CSS --> <link href="../../../bin/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> <body> <h3>Carousel within collapsible</h3> <ul class="collapsible" data-collapsible="accordion"> <li> <div class="collapsible-header active"><i class="material-icons">filter_drama</i>First</div> <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div> </li> <li> <div class="collapsible-header"><i class="material-icons">place</i>Second</div> <div class="collapsible-body"> <div class="carousel"> <a class="carousel-item" href="#one!"><img src="http://lorempixel.com/250/250/nature/1"></a> <a class="carousel-item" href="#two!"><img src="http://lorempixel.com/250/250/nature/2"></a> <a class="carousel-item" href="#three!"><img src="http://lorempixel.com/250/250/nature/3"></a> <a class="carousel-item" href="#four!"><img src="http://lorempixel.com/250/250/nature/4"></a> <a class="carousel-item" href="#five!"><img src="http://lorempixel.com/250/250/nature/5"></a> </div> </div> </li> <li> <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div> <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div> </li> </ul> <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="../../../bin/materialize.js"></script> <script type="text/javascript"> $( document ).ready(function() { $('.collapsible').collapsible({ onOpen: function(el) { console.log("OPEN", el); var carousel = el.find('.carousel'); if (carousel.length) { carousel.trigger('carouselNext', [0.000001]); } }, onClose: function(el) { console.log("CLOSE", el); } }); $('.carousel').carousel(); }); </script> </body> </html>