<MyRusakov.ru />

JavaScript, jQuery и Ajax с Нуля до Гуру

JavaScript, jQuery и Ajax с Нуля до Гуру

Видеокурс "JavaScript, jQuery и Ajax с Нуля до Гуру" научит Вас "вдыхать жизнь" в страницы, делая их с потрясающими эффектами и максимальным удобством для пользователя.

Курс научит Вас писать скрипты на JavaScript, а также обучит использованию библиотеки jQuery и технологии Ajax.

Практически любой красивый сайт (с красивыми галереями изображений, слайдерами, плавными переходами и так далее) использует jQuery. А практически на любом серьёзном сайте вовсю используется технология Ajax, которая делает работу с сайтом максимальной удобной.

Поэтому курс "JavaScript, jQuery и Ajax с Нуля до Гуру" Вам просто необходим, если Вы хотите создавать по-настоящему достойные сайты.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Как сделать красивое всплывающее окошко на JQuery, используя WebUI Popover.

Как сделать красивое всплывающее окошко на JQuery, используя WebUI Popover.

Сегодня я расскажу про то, как сделать красивое всплывающее окно на JQuery, используя плагин WebUI-Popover.

Это легкий и быстрый плагин, позволяющий сдеалать красивое всплывающее окно на JQuery.

У него есть достаточно много настроек, вы можете поиграться с ними и тут же посмотреть результат здесь.

Скачать же данный плагин вы можете тут.

Также вам будет нужен JQuery 1.7+.

Подключаем нужные файлы:

<link rel="stylesheet" href="jquery.webui-popover.css">
...
<script src="jquery.js"></script>
<script src="jquery.webui-popover.js"></script>

Использовать плагин так:

$('a').webuiPopover(options);

Создать самое простое окошко вы можете так:

$('a').webuiPopover({title:'Title',content:'Content'});

Здесь вы просто задаете заголовок и содержимое окошка.

Также, вы можете задать необходимые параметры прямо в атрибутах к ссылке:

<a href="#" data-title="Title" data-content="Contents..." data-placement="right"></a>
$('a').webuiPopover();

В настройках вы можете указывать следующее:

{
  placement:'auto',// Значения: auto,top,right,bottom,left,top-right,top-left,bottom-right,bottom-left
  width:'auto',// Ширина, числом
  height:'auto',// Высота, числом
  trigger:'click',// Значения: click, hover
  style:'',// Значения: '', inverse
  delay:300,// Время задержки окошка, работает только, когда trigger == hover
  cache:true,// Если кэш равен false, popover будет пересоздаваться каждый раз
  multi:false,// Разрешить показ сразу нескольких окошек одновременно
  arrow:true,// Показать стрелки или нет
  title:'',// Заголовок, если пустая строка, заголовок будет автоматически скрываться
  content:'',// Содержание, может быть функцией
  closeable:false,// Показывать крестик закрытия окна или нет
  padding:true,// Отступ у контента
  type:'html',// Тип контента, значения: 'html', 'iframe', 'async'
  url:''// Если не пустая строка, контент будет загружаться из указанного адреса
}

Очень легкий в использовании и позволяющий делать интересные вещи плагин. Используйте на здоровье и спасибо за внимание!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (3):

EvgeTrofi EvgeTrofi 19.04.2015 17:33:46

Михаил. Спасибо за статью, но непонятно. Не получается создать простейший код. что не так? <html> <head> <link rel="stylesheet" href="css/jquery.webui-popover.css"> <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <script src="js/jquery.webui-popover.js"></script> </head> <body> <a href="#" data-title="Title" data-content="Contents..." data-placement="right">тест</a> <script> $('a').webuiPopover(); </script> </body> </html>

Ответить

tikkiwiki tikkiwiki 28.04.2015 11:45:46

Отформатируйте пожалуйста код в читабельный вид.

Ответить

lubawa76 lubawa76 15.08.2015 09:17:36

Подскажите почему надо писать именно такие названия файлов jquery.webui-popover.css.. Если я захочу своё придумать имя то мне надо сохранять файлы css js как htm в кавычках в блокноте? И можно ваши все коды увидеть на примере. А точнее более подробно, непонятно что должно быть в этих папках, что должно быть в самом коде htm. мы же чайники.

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.