Модальные окна с Bootstrap

Данная заметка содержит небольшой пример создания простого модального окна средствами CSS-фрейморка Twitter Bootstrap и JQuery.

JQuery модальные окна

1. Подключение стилей и клиентских скриптов необходимых для работы будет выглядеть вот так:

<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="http://yandex.st/jquery/1.8.3/jquery.min.js">
</script>  
<script src="js/bootstrap-transition.js"></script>
<script src="js/bootstrap-modal.js"></script>

Небольшое примечание. Если подключите ещё и файл «bootstrap.min.js» или «bootstrap.js», тогда окно при всплытии будет через доли секунды исчезать. Причину проявления такого «бага» я не выяснял.

(далее…)

Опубликовано 20-03-2013 в 16:44

Bootstrap: подсказки на JQuery

Вторая заметка из серии, посвященной относительно детальному знакомству с CSS-фреймворком под названием Twitter Bootstrap. Сегодня я покажу вам о том, как подключать подсказки на JQuery.

Всплывающие подсказки на JQuery с Twitter Bootstrap

Итак, tooltips в бутстрапе могут быть четырех типов в зависимости от направления их появления — right, left, top и bottom. Задаются они атрибутом data-placement у гиперссылки. С помощью data-original-title можно задавать текст во всплывающей подсказке. Ну а data-toggle="tooltip" служит для указания скрипту, что здесь не просто линк, а tooltip, — задается свойством селектора в настройках.

К моему большому сожалению пример не работает в Internet Explorer 8, — выводится ошибка, связанная с JavaScript / JQuery. Разбираться с ней мне не захотелось. Тем более, что в официальной документации к фреймворку выводится тоже самое.

(далее…)

Опубликовано 18-03-2013 в 12:05

Twitter Bootstrap — вкладки

Первая заметка из серии, посвященной детальному знакомству с CSS-фреймворком под названием Twitter Bootstrap. Сегодня я покажу читателям, как можно создавать простые горизонтальные вкладки / табы.

Bootstrap JQuery табы
(далее…)

Опубликовано 18-03-2013 в 09:47

JQuery всплывающие окна — FancyBox

В заметке представлен наглядный пошаговый пример использования популярного JQuery-решения для быстрой и простой организации масштабируемых всплывающих изображений.

JQuery высплывающие окна с FancyBox
(далее…)

Опубликовано 27-02-2013 в 16:48

JQuery spoiler

JQuery в примерах, что называется. Привожу исходники реализации простого спойлера (раскрывающегося блока  с текстом, картинками и т.д.) с применением возможностей JQuery. (далее…)

Опубликовано 3-02-2013 в 14:35

Меню JQuery: несколько необычных решений — авторская подборка

Сегодня я представляю своим читателям небольшую авторскую подборку, которая состоит из пяти различных реализаций JQuery меню навигации на сайте с необычных анимационных и визуальных эффектов.

Разноцветное одноуровневое JQuery-Меню

Яркое меню для сайта с иконками

Примечательно тем, что каждый его элемент оформлен индивидуальным цветом (светло-зеленый, желтый, красный, голубой. фиолетовый), а при наведении на произвольный пункт, последний как бы выпадает и посетитель видит словосочетание-описание с небольшим графическим значком. (далее…)

Опубликовано 13-01-2013 в 19:23

JQuery табы и MooTools вкладки: 7 готовых решений

Далее вниманию читателей представлена необольшая подборка из семи различных реализаций вкладок на JavaScript с помощью популярных библиотек анимации JQuery и MooTools.
(далее…)

Опубликовано 7-01-2013 в 13:28



Свежие комментарии

  • Администратор: к записи Николай, посмотрите файл '.htaccess' в корне сайта »
  • Николай: к записи Простите если немного не по теме. Я сделал экспорт »
  • Эрик: к записи Спасибо, помогло) 20 минут мучался) »
  • steblo: к записи спаисбо »
  • Иван: к записи Привет всем, доброго времени суток! Я излазил весь »
  • Александер: к записи Потом пригляделся, вроде Вы не это имели в виду и »
  • Александер: к записи У Вас не русифицируется, потому что не везде включ »

Статистика спама

Последние твиты