Главная » Файлы » Прочие скрипты » jQuery

Стильные функциональные уведомлялки через jQuery Notty plugin для uCoz
24.06.14, 10:08:59

Скачать файл




Данный плагин позволит создавать замечательные уведомления на вашем сайте. Скрипт отличается полной стилизацией на css3, компактным кодом и простотой использования

Для начала посмотрите ДЕМО

Установка:

После /head на нужных страницах:
Код
<script type="text/javascript" src="/js/jquery.notty.js"></script>  
  <link rel="stylesheet" type="text/css" href="/css/jquery.notty.css" />  

  <script type="text/javascript">  
  $(document).ready(function() {  
$('#sample1').click(function() {  
$.notty({  
content: "This is a <strong>text notification</strong>."  
});  
return false;  
});  
$('#sample2').click(function() {  
$.notty({  
title: "2011 England riots",  
content: "Widespread public disturbances, including looting, arson attacks, burglary, robbery and some rioting, are ongoing in some cities and towns in England."  
});  
return false;  
});  
$('#sample3').click(function() {  
$.notty({  
title: "Juno (spacecraft)",  
content: "Juno is a NASA New Frontiers mission to the planet Jupiter. It was originally proposed at a cost of approximately US$700 million (FY03) for a June 2009 launch.",  
img: "images/demo/thumb.jpg",  
showTime: false  
});  
return false;  
});  
$('#sample4').click(function() {  
$.notty({  
content: 'This notification will disappear in <strong>five seconds</strong>.',  
timeout: 5000,  
showTime: false  
});  
return false;  
});  
$('#sample5').click(function() {  
$.notty({  
content: "Click on me to try the <strong>callback</strong> function",  
click:
function() {  
$.notty({  
content: 'This notification was just created.',  
title: 'Callback!'  
});  
}  
});  
return false;  
});  
$('#sample6').click(function() {
var title = prompt("Please enter the title of the notification","Just another title");  
var text = prompt("Please enter the the text of the notification","Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur enim massa, euismod id sollicitudin vitae, iaculis quis erat. Duis et ligula sapien, sed varius lectus. Sed quis urna orci.");  
var img = prompt("Please specify an image src","");  
if(img != '') {  
$.notty({  
content: text,  
title: title,  
img: img  
});  
} else {  
$.notty({  
content: text,  
title: title  
});  
}  
return false;  
});  
$('#sample7').click(function() {  
$.notty({  
content: 'I have been clicked, so my work here is complete. Elvi ... wait ... <strong>Superman</strong> has left the building.',  
img: "images/demo/thumb2.jpg",  
timeout: 5000,  
showTime: false  
});  
return false;  
});  
  });  
  </script>


Примеры вызова окон:
Код


<a id="sample1" href="#">Just a simple text notification.</a></p>  
   

<a id="sample2" href="#">Title + big chunk of text notification.</a></p>  
   

<a id="sample3" href="#">Title + big chunk of text + image notification and disabled time.</a></p>  
   

<a id="sample4" href="#">This notification has 5 seconds timeout.</a></p>  
   

<a id="sample5" href="#">A notification with a callback.</a></p>  
   

<a id="sample6" href="#">Custom notification for your heart's desire.</a></p>


Скрипт из прикреплённого архива залейте в папку js и стиль в папку css

Материал подготовлен и адаптирован Apocalypse

Категория: jQuery | Добавил: Apocalypse | Теги: Plugin, Notty, Через, ucoz, JQuery, Стильные, Функциональные, уведомлялки, для
Просмотров: 230 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: