Создаём уведомления на jQuery

Довольно часто происходит ситуация, когда нужно поделиться новостью со всеми пользователями на сайте. Подавляющее большинство администраторов используют модули для этих целей, ставят их, как правило, в верхней части сайта. Но установив на определённую позицию, они находятся там всё время неподвижно. Такой способ имеет право на существование, но он не очень красиво смотрится, к тому же анимации нет. Я предлагаю создать область уведомления на jQuery. При открытии страницы уведомление будет показано в шапке сайта, а кликнув по нему, плавно скроется. Там же будет располагаться кнопка, для того чтобы можно было вернуть уведомление назад. Такой вариант вполне устроит онлайн магазины, предлагающие всевозможные акции или скидки, но и для рядового администратора будет полезен. Перед тем как приступать, для начала создадим два уведомления на HTML, рассмотрим работу кода. После на основе этого примера, напишем новый код для шаблона Joomla. Почему новый напишем, а не внедрим? Потому что в примере с HTML мы будем использовать цельный вариант (два уведомления - Success! и Warning!), для того чтобы любой желающий мог его изменить и использовать по собственному желанию. А вот для Joomla будет всего одно уведомление - это скорее информер на том же скрипте. Для работы я использую стандартный шаблон protostar и Joomla 3.6 (скрипт без проблем запуститься и на поздних версиях движка, начиная с Joomla 3.2 и выше).

Уведомление на HTML

Уведомления Joomla

Открываем NotePad++ и создаём два файла - index.html и style.css. Оба файла размещаем в папке под названием notification.

Уведомления HTML

В index.html вставляем это:

HTML код:
  1. <!doctype html>
  2. <html lang="en-US">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  5.     <title>Notification</title>
  6.     <link rel="stylesheet" type="text/css" href="style.css">
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  8. </head>
  9.  
  10. <body>
  11. <div id="wrap">
  12.     <div id="content">
  13.         <div>
  14.             <h1>Success!</h1>
  15.             <p>Thanks so much for your message. We check e-mail frequently and will try our best to respond to your inquiry.</p>
  16.         </div>
  17.  
  18.         <div>
  19.             <h1>Warning!</h1>
  20.             <p>You did not set the proper return e-mail address. Please fill out the fields and then submit the form.</p>
  21.         </div>
  22.  
  23.         <div>
  24.             <a href="#" id="newSuccessBox">New Success</a>
  25.             <a href="#" id="newAlertBox">New Error</a>
  26.         </div>
  27.     </div>
  28. </div>
  29.  
  30. <script type="text/javascript">
  31. $(function(){
  32.     $('#content').on('click', '.notify', function(){
  33.         $(this).fadeOut(350, function(){
  34.         $(this).remove();
  35.         });
  36.     });
  37.     $('#newSuccessBox').on('click', function(e){
  38.         e.preventDefault();
  39.         var samplehtml = $('<div> <h1>Success!</h1> <p>You did not set the proper return e-mail address. Please fill out the fields and then submit the form.</p> </div>').prependTo('#content');
  40.     });
  41.     $('#newAlertBox').on('click', function(e){
  42.         e.preventDefault();
  43.         var samplehtml = $('<div> <h1>Warning!</h1> <p>You did not set the proper return e-mail address. Please fill out the fields and then submit the form.</p> </div>').prependTo('#content');
  44.     });
  45. });
  46. </script>
  47.  
  48. </body>
  49. </html>

Здесь мы подключаем jquery библиотеку и таблицу стилей, так же прописали две кнопки. Обратите внимание на текст уведомления внутри id="wrap" и сам скрипт, внутри него находиться точно такой же текст, обёрнутый в те же стили. Когда посетитель открывает страницу, уведомление показывается из id="wrap", если нажать на кнопку, то покажет написанное в скрипте. В моём варианте я вывожу то же самое сообщение, но вы можете изменить по своему усмотрению.

Эта функция отвечает за скрытие:

jQuery код:
  1. $('#content').on('click', '.notify', function(){
  2.     $(this).fadeOut(350, function(){
  3.     $(this).remove();
  4.     });
  5. });

Значение 350 - скорость исчезновения области уведомления после нажатия мышкой.

Теперь пишем стили для нашей страницы. В style.css необходимо вставить следующее:

CSS код:
  1. html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  2.     margin: 0;
  3.     padding: 0;
  4.     border: 0;
  5.     font-size: 100%;
  6.     vertical-align: baseline;
  7.     outline: none;
  8.     -webkit-font-smoothing: antialiased;
  9.     -webkit-text-size-adjust: 100%;
  10.     -ms-text-size-adjust: 100%;
  11.     -webkit-box-sizing: border-box;
  12.     -moz-box-sizing: border-box;
  13.     box-sizing: border-box;
  14. }
  15. html { height: 100%; }
  16. body { 
  17.     background: #c2d4ca;
  18.     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  19.     color: #808080;
  20.     font-size: 60%; 
  21.     line-height: 1; 
  22. }
  23. ::selection { background: #a4dcec; }
  24. ::-moz-selection { background: #a4dcec; }
  25. ::-webkit-selection { background: #a4dcec; }
  26. ::-webkit-input-placeholder { color: #ccc; font-style: italic; }
  27. :-moz-placeholder { color: #ccc; font-style: italic; }
  28. ::-moz-placeholder { color: #ccc; font-style: italic; }
  29. :-ms-input-placeholder { color: #ccc !important; font-style: italic; }
  30. br { display: block; line-height: 2.2em; } 
  31. article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
  32. ol, ul { list-style: none; }
  33. input, textarea { 
  34.     -webkit-font-smoothing: antialiased;
  35.     -webkit-text-size-adjust: 100%;
  36.     -ms-text-size-adjust: 100%;
  37.     -webkit-box-sizing: border-box;
  38.     -moz-box-sizing: border-box;
  39.     box-sizing: border-box;
  40.     outline: none; 
  41. }
  42. blockquote, q { quotes: none; }
  43. blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
  44. strong { font-weight: bold; } 
  45. table { border-collapse: collapse; border-spacing: 0; }
  46. img { border: 0; max-width: 100%; }
  47. h1 {
  48.     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  49.     font-size: 2.5em;
  50.     line-height: 1.5em;
  51.     letter-spacing: -0.05em;
  52.     margin-bottom: 20px;
  53.     padding: .1em 0;
  54.     color: #444;
  55.     position: relative;
  56.     overflow: hidden;
  57.     white-space: nowrap;
  58.     text-align: center;
  59. }
  60. h1:before,
  61. h1:after {
  62.     content: "";
  63.     position: relative;
  64.     display: inline-block;
  65.     width: 50%;
  66.     height: 1px;
  67.     vertical-align: middle;
  68.     background: #f0f0f0;
  69. }
  70. h1:before {    
  71.     left: -.5em;
  72.     margin: 0 0 0 -50%;
  73. }
  74. h1:after {    
  75.     left: .5em;
  76.     margin: 0 -50% 0 0;
  77. }
  78. h1 > span {
  79.     display: inline-block;
  80.     vertical-align: middle;
  81.     white-space: normal;
  82. }
  83. p {
  84.     display: block;
  85.     font-size: 1.35em;
  86.     line-height: 1.5em;
  87.     margin-bottom: 22px;
  88. }
  89. #wrap {
  90.     display: block;
  91.     width: 750px;
  92.     margin: 0 auto;
  93.     padding-top: 20px;
  94. }
  95. #content {
  96.     display: block;
  97.     width: 100%;
  98.     background: #fff;
  99.     padding: 25px 20px;
  100.     padding-bottom: 35px;
  101.     -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  102.     -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  103.     box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  104. }
  105. .flatbtn {
  106.     -webkit-box-sizing: border-box;
  107.     -moz-box-sizing: border-box;
  108.     box-sizing: border-box;
  109.     display: inline-block;
  110.     outline: 0;
  111.     border: 0;
  112.     color: #f9f8ed;
  113.     text-decoration: none;
  114.     background-color: #889d9e;
  115.     border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  116.     font-size: 1.2em;
  117.     font-weight: bold;
  118.     padding: 12px 22px 12px 22px;
  119.     line-height: normal;
  120.     text-align: center;
  121.     vertical-align: middle;
  122.     cursor: pointer;
  123.     text-transform: uppercase;
  124.     text-shadow: 0 1px 0 rgba(0,0,0,0.3);
  125.     -webkit-border-radius: 3px;
  126.     -moz-border-radius: 3px;
  127.     border-radius: 3px;
  128.     -webkit-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
  129.     -moz-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
  130.     box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
  131. }
  132. .flatbtn:hover {
  133.     color: #fff;
  134.     background-color: #717773;
  135. }
  136. .flatbtn:active {
  137.     -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);
  138.     -moz-box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.1);
  139.     box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.1);
  140. }
  141. .notify {
  142.     display: block;
  143.     background: #fff;
  144.     padding: 12px 18px;
  145.     max-width: 400px;
  146.     margin: 0 auto;
  147.     cursor: pointer;
  148.     -webkit-border-radius: 3px;
  149.     -moz-border-radius: 3px;
  150.     border-radius: 3px;
  151.     margin-bottom: 20px;
  152.     box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 10px 0px;
  153. }
  154. .notify h1 { margin-bottom: 5px; }
  155. .successbox h1 { color: #5ad83f; }
  156. .errorbox h1 { color: #d84a33; }
  157. .successbox h1:before, .successbox h1:after { background: #5ad83f; }
  158. .errorbox h1:before, .errorbox h1:after { background: #d84a33; }
  159. .notify { 
  160.     display: block;
  161.     text-align: center;
  162.     margin-bottom: 10px;
  163. }
  164.  
  165. .btns {
  166.     text-align: center;
  167.     margin: 20px 0 -15px 0;
  168. }

После всех проделанных действий нам остаётся открыть index.html в браузере и проверить результат. Вы должны увидеть два сообщения Success! и Warning!. Кнопка «NEW SUCCESS» добавляет сообщение зелёного цвета, а «NEW ERROR» красного. Для просмотра уведомлений вот ДЕМО.

Уведомление в шаблоне protostar от Joomla

Уведомления jQuery

Переместить полученный код в шаблон сразу не получиться. Во-первых, скрипт работать не будет из-за конфликта с переменными, а во-вторых, стоит отредактировать стили под внешний вид шаблона. Для начала займёмся стилями. Подгоним по размеру экрана, кнопку установим с правой стороны и расширим область с текстом.

1. Установка стилей

Используя FileZilla, находим на сервере файл template.css шаблона protostar (путь по умолчанию …/templates/protostar/css/template.css). Скачиваем на компьютер и запускаем через NotePad++. Далее переходим в самую нижнюю часть файла, делаем отступ и вставляем это:

CSS код:
  1. /* Notification */
  2. #wrap {
  3.     display: block;
  4.     margin: 0 auto;
  5.     padding: 0 0 10px 0;
  6. }
  7. #content-not {
  8.     display: block;
  9.     background: #fff;
  10.     padding: 25px 20px;
  11.     padding-bottom: 35px;
  12.     -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  13.     -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  14.     box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  15. }
  16. .flatbtn {
  17.     -webkit-box-sizing: border-box;
  18.     -moz-box-sizing: border-box;
  19.     box-sizing: border-box;
  20.     display: inline-block;
  21.     outline: 0;
  22.     border: 0;
  23.     color: #f9f8ed;
  24.     text-decoration: none;
  25.     background-color: #889d9e;
  26.     border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  27.     padding: 7px 10px 5px 10px;
  28.     box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
  29.     line-height: normal;
  30.     text-align: center;
  31.     vertical-align: middle;
  32.     cursor: pointer;
  33.     border-radius: 3px;
  34.     text-transform: uppercase;
  35.     text-shadow: 0 1px 0 rgba(0,0,0,0.3);
  36.     -webkit-border-radius: 3px;
  37.     -moz-border-radius: 3px;
  38.     -webkit-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
  39.     -moz-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
  40. }
  41. .flatbtn:hover {
  42.     color: #fff;
  43.     background-color: #717773;
  44.     text-decoration: none;
  45. }
  46. .flatbtn:focus {
  47.     color: #fff;
  48.     background-color: #717773;
  49.     text-decoration: none;
  50. }
  51. .flatbtn:active {
  52.     -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);
  53.     -moz-box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.1);
  54.     box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.1);
  55. }
  56. .notify {
  57.     display: block;
  58.     background: #fff;
  59.     padding: 12px 18px;
  60.     max-width: 550px;
  61.     margin: 0 auto;
  62.     cursor: pointer;
  63.     -webkit-border-radius: 3px;
  64.     -moz-border-radius: 3px;
  65.     border-radius: 3px;
  66.     margin-bottom: 20px;
  67.     box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 10px 0px;
  68. }
  69. .notify h1 { margin-bottom: 5px; }
  70. .successbox h1 { color: #5ad83f; }
  71. .successbox h1:before, .successbox h1:after { 
  72.     background: #5ad83f;
  73.     content: "";
  74.     position: relative;
  75.     display: inline-block;
  76.     width: 30%;
  77.     height: 1px;
  78.     vertical-align: middle;
  79. }
  80. .successbox h1:before{
  81.     left: -.5em;
  82.     margin: 0 0 0 -50%;
  83. }
  84. .successbox h1:after {
  85.     left: .5em;
  86.     margin: 0 -50% 0 0;
  87. }
  88. .notify { 
  89.     display: block;
  90.     text-align: center;
  91.     margin-bottom: 10px;
  92. }
  93. .btns {
  94.     text-align: right;
  95.     margin: -9px 0 -24px 0px;
  96. }

Сохраняем, возвращаем назад в папку css с заменой.

2. Вставляем уведомление в index.php

При помощи всё тех же программ, находим и открываем index.php (путь по умолчанию …/templates/protostar/index.php). Сразу после класса body (строчка 141) пишем код:

HTML код:
  1. <div id="wrap">
  2.     <div id="content-not">
  3.         <div>
  4.             <h1>Акция!</h1>
  5.             <p>Летний сезон наступил, время <b>скидок</b>! Купи три штанины и получи левый ботинок просто так, даже если он тебе не нужен. 
  6.             Подробности всех акций ищите в разделе <b>СКИДКИ</b> на нашем сайте.</p>
  7.         </div>
  8.  
  9.         <div>
  10.             <a href="#" id="newSuccessBox">Показать</a>
  11.         </div>
  12.     </div>
  13. </div>
  14. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  15. <script type="text/javascript">
  16. jQuery(function(){
  17.     jQuery('#content-not').on('click', '.notify', function(){
  18.         jQuery(this).fadeOut(350, function(){
  19.         jQuery(this).remove();
  20.         });
  21.     });
  22.     jQuery('#newSuccessBox').on('click', function(e){
  23.         e.preventDefault();
  24.         var samplehtml = jQuery('<div><h1>Акция!</h1><p>Летний сезон наступил, время <b>скидок</b>! Купи три штанины и получи левый ботинок просто так, даже если он тебе не нужен. Подробности всех акций ищите в разделе <b>СКИДКИ</b> на нашем сайте.</p></div>').prependTo('#content-not');
  25.     });
  26. });
  27. </script>

Если не понятно, вот картинка как ориентир:

Уведомления результат

Интересно тут то, что при использовании Joomla 3.6 подключение библиотеки jQuery не обязательно. Но если вы используете версию от 3.2 и выше, то библиотека необходима. У меня версия 3.6, я всё равно оставил jQuery подключённой. В любом случае многим из вас она не помешает, а если что удалите. В скрипте знак $ заменён на идентификатор jQuery, так не будет происходить конфликт. Если у вас свой шаблон, а не protostar, то убедитель что запускается «jQuery.noConflict()» в шапке сайта в противном случае работать не будет.

Здесь мы оставили всего одно сообщение и одну кнопку, остальное удалено. Сохраните изменения в index.php и положите файл обратно в папку protostar на сервере, проверяем результат.

Заключение

В принципе можно использовать этот код для чего угодно, не только в качестве уведомлений для сайта, но и как подсказку или предупреждения, если посетитель нажал на что-то не то. Конечно, многое здесь ещё предстоит поправить, если хотите подогнать под свой шаблон и свои нужды. Но благодаря этому небольшому скрипту вариантов для создания интересных объектов на сайте очень много.

 
4.36 1 1 1 1 1 (Оценок: 275)
4.36 275
Опубликовано: 19-07-2016

Соседние материалы

<Назад Вперёд>

Комментарии  

Денис
+1 #1 Денис 30.08.2016 06:44
Доброго времени суток!Очень интересная тема раскрыта для общего пользования!все доходчиво и понятно!Лично я смог по схеме сам создать уведомление!спа сибо!

Вы не зарегистрированы, чтобы оставлять комментарии.