Хороший Плагин Уведомлений Для Jquery?
Я смотрю на сосны уведомить (http://pines.sourceforge.net/pnotify/) и это выглядит хорошо, но, похоже, у него мало фактической документации, поэтому мне интересно, есть ли что-то более установленное и разработанное там?
как я не хочу тратить время, пытаясь выяснить, как использовать сосны, а затем узнать, что отсутствует какая-то функция, которая мне нужна через несколько месяцев, что мне нужно было изменить на другой плагин.
Это случилось со мной с tablesorter 2.0 я использовал его, тогда мне нужна была фильтрация, но их вид сосал, поэтому я нашел datatables, которые имели такой большой api и разработали больше.
поэтому мне интересно, есть ли что-то вроде datatables(с точки зрения разработки и функций) только для уведомлений.
редактировать
поэтому я смотрю на jgrowl и немного запутался с тем, как использовать тематический ролик с ним.
поэтому я взял один раз из примеров файлов и снял с него все, что я считал хламом.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml" debug="true">
<head>
<title>jGrowl meet Twitter</title>
<link rel="stylesheet" href="../jquery.jgrowl.css" type="text/css"/>
<link type="text/css" href="css/le-frog/jquery-ui-1.7.2.custom.css" rel="Stylesheet" />
<script type="text/javascript">
$(function(){
$('.ui-state-default').hover(
function(){$(this).addClass('ui-state-hover');},
function(){$(this).removeClass('ui-state-hover');}
)
.mousedown(function(){$(this).addClass('ui-state-active');})
.mouseup(function(){$(this).removeClass('ui-state-active');})
.mouseout(function(){$(this).removeClass('ui-state-active');});
});
</script>
<script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="../jquery-1.3.2.js"></script>
<script type="text/javascript" src="../jquery.jgrowl.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// This value can be true, false or a function to be used as a callback when the closer is clciked
$.jGrowl.defaults.closer = function() {
console.log("Closing everything!", this);
};
$.jGrowl("Sticky notification with a header",
{
header: 'A Header',
sticky: true,
});
});
</script>
</head>
<body>
<div id="trdevtool_contain" class="ui-widget ui-widget-content ui-corner-all">
<div class="ui-widget-header ui-corner-top">
<h1>jQuery UI ThemeRoller <span>Developer Tool</span></h1>
</div>
</div>
</body>
</html>
Я не понимаю, для чего это
<script type="text/javascript">
$(function(){
$('.ui-state-default').hover(
function(){$(this).addClass('ui-state-hover');},
function(){$(this).removeClass('ui-state-hover');}
)
.mousedown(function(){$(this).addClass('ui-state-active');})
.mouseup(function(){$(this).removeClass('ui-state-active');})
.mouseout(function(){$(this).removeClass('ui-state-active');});
});
</script>
похоже, это не имеет ничего общего с применением тем. Я забрал ее, и тема все еще была актуальна. Также, если вы посмотрите на мой jgrow
$.jGrowl("Sticky notification with a header",
{
header: 'A Header',
sticky: true,
});
Я не упоминаю тему, но все же некоторые из них использовали тему. Зачем это тема?
4 ответов
здесь Пучков из них я бы проверил сайт плагинов jQuery, в частности Плагины, классифицированные в категории уведомлений :)
лично я использую jGrowl. Но!--1-->вот еще несколько.
Edit: в ответ на комментарий ниже, Вот сайт jGrowl. Что он делает лучше? Он прост в использовании и хорошо работает. Другие могут достичь того же, но мой опыт такой же, как у Фанки: попробовал, сработало, было легко, сделано.
Я могу опоздать с этим ответом, но если кто-то приходит сюда в поисках простого, легкого, минималистского и ненавязчивого плагина уведомлений, я сделал плагин уведомлений с открытым исходным кодом jQuery, который может быть легко интегрирован с веб-приложениями, называемыми jNotifyOSD. Вы можете увидеть демо по этой ссылке. Я попытался сохранить API чистым и простым в использовании. Вот пример:
$.notify_osd.create({
'text' : 'Hi!', // notification message
'icon' : 'images/icon.png', // icon path, 48x48
'sticky' : false, // if true, timeout is ignored
'timeout' : 6, // disappears after 6 seconds
'dismissable' : true // can be dismissed manually
});
вы также можете установить глобальные значения по умолчанию для всех будущих уведомлений (может быть переопределено на основе каждого уведомления):
$.notify_osd.setup({
'icon' : 'images/default.png',
'sticky' : false,
'timeout' : 8
});
Он включает в себя очень хорошую тему по умолчанию с прозрачностью при наведении (это означает, что уведомления становятся все более полупрозрачными по мере приближения указателя мыши), но тема может быть изменена очень легко, просто поместив файл CSS, который определяет стили для некоторых определенных классов. Я работаю над тем, чтобы включить больше функций, поэтому вы должны следить за репозиторий GitHub.
обновление [13 декабря, 2012]:
прошло некоторое время, но я, наконец, реализовал поддержку нескольких видимых уведомлений с помощью системы очередей. Так например:
$.notify_osd.setup({
// ... config ...
'visible_max' : 5 // max 5 notifications visible simultaneously
'spacing' : 30 // spacing between consecutive notifications
});
вы можете увидеть демо здесь. Я думаю, что плагин теперь достаточно гибок, чтобы обрабатывать множество вариантов использования.