Различия

Показаны различия между двумя версиями страницы.

--- bootstrap_modal_window [2013/10/06 15:16] – admin
+++ bootstrap_modal_window [2013/10/06 17:44] (текущий) – admin
@@ Строка 5: / Строка 5: @@
 Сегодня мы продолжим разговор о Bootstrap. На этот раз затронем тему плагинов.
-Но сразу, [[http://ruseller.com/lessons/les1669/demo/index.html|демо]] и исходники
+Но сразу, [[http://ruseller.com/lessons/les1669/demo/index.html|демо]] и {{:demo.zip|исходники}}
 Как было отмечено в предыдущей статье, Bootstrap поставляется не только с готовыми CSS стилями, но также с целым набором jQuery плагинов. Таким образом, нам не нужно пользоваться какими-то сторонними плагинами.
@@ Строка 16: / Строка 16: @@
 Т.к. все Bootsrap плагины являются плагинами, работающими на jQuery, нам в первую очередь, нужно подключить данный фрэймворк:
-''<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>''
+<code php><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script></code>
 Теперь можем подключать Bootstrap:
-''<link rel="stylesheet" href="css/bootstrap.css">
+<code php><link rel="stylesheet" href="css/bootstrap.css">
-<script src="js/bootstrap.js" type="text/javascript"></script>''
+<script src="js/bootstrap.js" type="text/javascript"></script></code>
 ===== Модальное окно =====
@@ Строка 31: / Строка 31: @@
 Для того чтобы сделать обычный div блок модальным окном, ему нужно присвоить класс modal. Также мы можем контролировать наличия таких элементов, как заголовок и контент, путём добавления классов modal-body и modal-header.
-''<div id="modal" class="modal">
+<code php><div id="modal" class="modal">
     <div class="modal-header">
         <h2>Lorem Ipsum</h2>
@@ Строка 40: / Строка 40: @@
         tortor semper elit, eget rutrum purus nulla id quam.</p>
     </div>
-</div>''
+</div></code>
 Данный код - это просто html представление, которое вы можете увидеть ниже:
@@ Строка 49: / Строка 49: @@
 Предположим, что модальное окно должно появляться в результате нажатия кнопки. Для этого, в первую очередь, чтобы изначально скрыть блок окна, присвоим ему класс hide:
-''<div id="modal" class="modal hide">
+<code php><div id="modal" class="modal hide">
     <div class="modal-header">
         <h2>Lorem Ipsum</h2>
@@ Строка 59: / Строка 59: @@
         mollis, nibh tortor semper elit, eget rutrum purus nulla id quam.</p>
     </div>
-</div>''
+</div></code>
 Теперь можно добавить и кнопку:
-''<a href="#modal" role="button" class="btn" data-toggle="modal">Click Me</a>''
+<code php><a href="#modal" role="button" class="btn" data-toggle="modal">Click Me</a></code>
 Тут прошу обратить ваше внимание на HTML5 атрибут data-toggle, где мы прописываем id блока модального окна.
@@ Строка 69: / Строка 69: @@
 Ну а теперь, чтобы активировать плагин, добавляем js скрипт:
-''$('document').ready(function(){
+<code php>$('document').ready(function(){
     $('#modal').modal();
-});''
+});</code>
 Теперь, при нажатии на кнопку мы получим примерно такое отображение модального окна:
@@ Строка 81: / Строка 81: @@
 После того как наше модальное окно появилось, может возникнуть вопрос: как же его скрыть? Можно просто кликнуть за пределы окна, а можно добавить специальную кнопку, чем мы и займёмся. Для этого добавим элемент button в div модального окна:
-===== <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> =====
+<code php> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> </code>
 К данному элементу мы также добавили атрибут, начинающийся на data- для фокусирования кнопки на модальном окне. Это собственно всё, что нужно сделать, чтобы данная кнопка срабатывала.
 ===== Эффект затухания =====
@@ Строка 92: / Строка 91: @@
 Теперь давайте применим ещё одну фишку, а именно, эффект затухания. Для этого div-у модального окна припишем класс fade:
-''<div id="modal" class="modal hide fade">
+<code php><div id="modal" class="modal hide fade">
     <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
@@ Строка 103: / Строка 102: @@
         mollis, nibh tortor semper elit, eget rutrum purus nulla id quam.</p>
     </div>
-</div>''
+</div></code>
 Теперь открытие и закрытие нашего модального окна будет сопровождаться приятной для глаз анимацией. Данный эффект реализован в большей степень через CSS3.
@@ Строка 110: / Строка 109: @@
-Для того чтобы скачать только этот компонет Bootstrap-а, переходим на страницу скачивания и выбираем:
+Для того чтобы скачать только этот компонет Bootstrap-а, переходим на [[http://twitter.github.com/bootstrap/customize.html|страницу скачивания]] и выбираем:
 Buttons из Base CSS
 Modals из JS Components
 Modals из jQuery plugins
+~~DISCUSSION~~