Перейти к содержимому



Купить ссылку здесь
Фотография
- - - - -

[МАНУАЛ] Уведомления jQuery

Форум ZiSMO.biz
1
В теме одно сообщение

OFFLINE Отправлено

Gos.Alex
группа пользователя

    https://vk.com/alex__brin

  • Cообщений: 67
  • Друзей:3
  • Поинты: 15
  • Предупреждений: 0
  • Онлайн:13ч 45м
0

Прошу прощения, если не туда, направьте в нужный раздел, если имеется

!!!ВНИМАНИЕ!!!

Данный метод НЕ РАБОТАЕТ в браузере IE9 (в остальных не проверялся)

Анимация НЕ РАБОТАЕТ в Safari

Упор на Opera, Chrome, FireFox

 

Для создания уведомлений, имхо, понадобится HTML, CSS, jQuery. Весь код прокомментирован, дабы у новичков не возникло вопросов

Работает при помощи анимации на CSS

Верстка:

<!DOCTYPE html>
<html lang="ru">
<head> 
	<meta charset="UTF-8">
	<title>Уведомления jQuery</title> 
	<link rel="stylesheet" href="style/main.css"> <!-- Подключаем основные стили -->
	<link rel="stylesheet" href="style/font-awesome.css"> <!-- Подключаем Font Awesome -->
	<script src="js/jquery-2.1.4.js"></script> <!-- Подключаем библиотеку jQuery !ОБЯЗАТЕЛЬНО! -->
	<script src="js/notice.js"></script> <!-- Подключаем сам скрипт (проще некуда, не правда ли?) -->
</head>
<body>
        <!-- Далее без комментариев -->
	<div class="notice hide">
		<i class="fa fa-exclamation-circle notice_img"></i>
		<span></span>
	</div>

	<div align="center" style="margin: 200px 0;">
		<input type="text" id="text" value="Какое-то уведомление"> <br>
		На сколько миллисекунд вывести (исчисляется в миллисекундах) <input type="number" id="time" value="3000" placeholder="1000 = 1 секунде"> <br>
		<input type="submit" id="go">
	</div>
</body>
</html>

CSS. Тут, думаю, не нужно комментировать smile.png

Код:

.notice {
	width: 100%;
	height: 32px;
	padding: 18px 0;
	top: 0;
	left: 0;
	position: fixed;
	background-color: #71A4C6;
	font-size: 24px;
	text-align: center;
	color: #fff;
	text-shadow: 1px 1px 0 #3B5566;
	z-index: 99999;
	cursor: pointer;
	/* кроме этого, конечно */ transition: top .5s;  /* анимация на CSS. transition: что_анимируем(можно анимировать все - all) время(s,ms); */
}
.hide {
	top: -70px;
}
.notice:after {
	content: "X";
	width: 69px;
	height: 32px;
	padding: 18px 0;
	top: 0;
	right: 0;
	position: absolute;
	background-color: #7faecc;
	display: block;
	cursor: pointer;
}
.notice_img {
	width: 69px;
	height: 32px;
	display: block;
	padding: 18px 0;
	background-color: #7faecc;
	position: absolute;
	top: 0;
	left: 0;
}

Дальше самое интересное, хоть и невероятно простое. Сам JavaScript:

function notice(text, time) { // Функция для вызова (Вы будете использовать это на каких-либо движках, верно? Не нужно плодить код напрасно)
	$(".notice span").html(text); // Записываем в дочерний .notice элемент span текст с замещением (вставляем его как html код)
	$(".notice").removeClass("hide"); // Удаляем ненужный класс, дабы увидеть наш блок с уведомлением
	setTimeout(function() { // Тайм-аут перед исчезновением блока
		$(".notice").addClass("hide"); // Возвращаем удаленный класс
	}, time); // время исчисляется в миллисекундах 
}
$(document).ready(function() { // Код ниже выполняется ТОЛЬКО после загрузки DOM дерева (то-бишь страницы)
  $(".notice").on('click', function() { // Отслеживаем клик на форму уведомления. При клике на блок с уведомлением - он исчезает немедленно
    $(".notice").addClass('hide');
  });
  $("#go").on('click', function() { // Отслеживаем клик на кнопку
  	notice($("#text").val(), $("#time").val()); // Подставляем значения и вызываем функцию
  })
});
Результат:
bandicam 2015-07-26 15-47-19-194.jpg
bandicam 2015-07-26 15-47-21-140.jpg
 

Элементарно, не правда ли?

Естественно, работает в связке со всеми серверными языками программирования

 

Исходники: Ссылка

Онлайн просмотр: Ссылка

 

P.S. Пишу подобное впервые. Прошу судить по всей строгости

P.S.S. Нужно ли делать новые мануалы/туториалы? Если да, то подайте идей. HTML/CSS, jQ, PHP

Прикрепленные изображения

  • bandicam 2015-07-26 15-47-19-194.jpg
  • bandicam 2015-07-26 15-47-21-140.jpg




    • 0
  • Наверх
  • Ответить

OFFLINE Отправлено

maksDJab
группа пользователя

    Уровень 1

  • Cообщений: 81
  • Поинты: 10
  • Предупреждений: 0
  • Онлайн:4д 9ч 1м
0

Если твое то 5+.  Сразу б сделал под разные уведомления (ерор, инфо, обычная)


    • 0
  • Наверх
  • Ответить



Напишите свое сообщение