帮助Jquery通知 [英] Help with Jquery notification
本文介绍了帮助Jquery通知的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
整个Js文件
（ function （$）{
$ .notification = function （options，customContainer）{
// var this = this;
var $ notification = null ;
var isCustom = false ;
// 用于捕获事件类型的枚举
var eventType = {closeButtonClick： 1 ，userClick： 2 ，mouseOver： 3 ，timeOut： 4 };
此 .init = 功能（选项）{
< span class =code-keyword> this .options = $ .extend（{}，$ .notification.defaultOptions，options）;
此 .options.type = 此 .options.cssPrefix + 此 .options.type;
此 .options.id = 此 .options.type + ' _' + new 日期（）的getTime（）;
此 .options.layout = 此 .options.cssPrefix + ' layout _' + this .options.layout;
this .options.event = ' ' ;
if （ this .options.custom.container）customContainer = 此 .options.custom.container;
isCustom =（$ .type（customContainer）=== ' object'）？ true ： false ;
return this .addQueue（）;
};
// 将通知推送到队列
此 .addQueue = function （）{
var isGrowl =（$ .inArray（ this .options.layout，$ .notification.growls）== -1）？ false ： true ;
if （！isGrowl）（ this .options.force）？ $ .notification.queue.unshift（{options： this .options}）：$ .notification.queue.push（{options：这个 .options}）;
return 此 .render（isGrowl）;
};
// 呈现通知
this .render = function （isGrowl，url）{
// 布局特定容器设置
var container =（isCustom） ？ customContainer.addClass（ this .options.theme + ' ' + 此 .options.layout + ' noty_custom_container'）：$（' body'）;
if （isGrowl）{
if （$（' ul.noty_cont。' + this .options.layout） .length == 0 ）
container.prepend（$（' < ul />'）。addClass（' noty_cont' + this .options.layout））;
container = $（' ul.noty_cont。' + 此 .options.layout）;
} 其他 {
如果（$ .notification.available）{
var fromQueue = $ .notification.queue.shift（）; // 从队列中获取
如果（$ .type（fromQueue）=== ' object'）{
$ .notification.available = false ;
此 .options = fromQueue.options;
} 其他 {
$ .notification.available = true ; // 队列已结束
return this .options.id;
}
} 其他 {
return 此 .options.id;
}
}
此 .container = container;
// 生成noty bar
this .bar = $（' < div class =noty_bar/> ;'）。attr（' id'， this .options.id）。addClass（ this .options.theme + ' ' + 此 .options.layout + ' ' + this .options.type）;
$ notification = 此 .bar;
$ notification.append（ this .options.template）.find（' 。noty_text'）。html（ this .options.text）;
$ notification.data（' noty_options'，此可供选项）;
alert（' 生成' + 此 .options.ClientNotificationId）;
// 关闭按钮显示
（这个 .options.closeButton）？ $ notification.addClass（' noty_closable'）。find（ ' 。noty_close'）。show（）：$ notification.find（' noty_close'）除去（）。;
// 将关闭事件绑定到按钮
$通知。 find（' 。noty_close'）。unbind（' 点击'）。bind（' click' ， function （）{
// $ notification.find（'。noty_close'）。bind（'click'，function（）{
// 如果我们按下关闭按钮，我们需要取消绑定close事件并创建我们自己的事件。
// $ notification.unbind（'click'）;
$ notification.fadeOut（' 慢'）;
// if（this.options.ClientNotificationId == 0）{
// alert（this.options.ClientNotificationId）;
// UpdateCustomClientNotification（eventType.closeButtonClick）;
// }
// else {
// 记录是否点击了关闭按钮
// alert（this.options.ClientNotificationId）;
alert（$ （ this ）。options.ClientNotific ationId）;
UpdateClientNotificationEntry（$（ this ）。options.ClientNotificationId，eventType.closeButtonClick）;
return false ;
// }
}）;
// 如果我们有一个按钮，我们必须禁用closeOnSelfClick和closeOnSelfOver选项
if （ this .options.buttons）这 .options.closeOnSelfClick = this .options.closeOnSelfOver = false ;
if （ this .options.closeOnSelfClick）$ notification.bind（< span class =code-string>' click'， function （）{
$ notification.trigger（' noty.close'）;
alert（' Click Method' + ClientNotificationId）;
if （ this .options.url）{
window . location = this .options.url;
}
// if（this.options.ClientNotificationId == 0） {
// alert（this.options.ClientNotificationId）;
// UpdateCustomClientNotification（eventType.userClick）;
// }
// else
// {
// alert（this.options.ClientNotificationId）;
UpdateClientNotificationEntry（ this .options.ClientNotificationId，eventType.userClick）;
// }
}）;
// 关闭自我鼠标悬停
if （ this .options.closeOnSelfOver）$ notification.bind（' mouseover'， function （）{
$ notification.animate（ 5000 ）;
$ notification.trigger（' noty.close'）;
// 如果设置了鼠标悬停，则更新客户端通知。
UpdateClientNotificationEntry（ this .options.ClientNotificationId，eventType.mouseOver）;
}）。css （' cursor'，' pointer'）;
// 设置按钮（如果有）
if （ this .options.buttons）{
$ buttons = $（' < div />'）。addClass（' noty_buttons' ）;
$ notification.find（' 。noty_message'）。append（$ buttons）;
$ .each（ this .options.buttons， function （i，button）{
bclass =（button.type）？button.type：' grey';
$ button = $（' < button />'）。addClass（bclass）.html （button.text）.appendTo（$ notification.find（' 。noty_buttons'））
.bind（' 点击'，功能（）{
if （$ .isFunction（button.click））{
button.click.call（$ button，$ notification） ;
}
}）;
}）;
}
return this .show（isGrowl）;
};
此 .show = 功能（isGrowl）{
// 是模态？
if （ this .options.modal）$（' < div />'）。addClass（' noty_modal'） .addClass（ this .options.theme）.prependTo（$（' body'））。fadeIn（' fast'）;
$ notification.close = function （）{ return 此 .trigger（' noty.close'）; };
// 在容器前加上
（isGrowl）？ this .container.prepend（$（' < li />').append($notification））： this .container.prepend（$ notification）;
// topCenter和中心特定选项
if （ this .options.layout == ' < span class =code-string> noty_layout_topCenter' || this .options.layout == ' noty_layout_center'）{
$ .notification.reCenter（$ notification）;
}
$ notification.bind（' noty.setText'， function （事件，文本）{
$ notification.find（' 。noty_text'）。html（text）;
if （ this .options.layout == ' noty_layout_topCenter' || < span class =code-keyword> this .options.layout == ' noty_layout_center'）{
$ .notification.reCenter（$ notification）;
}
}）;
$ notification.bind（' noty.getId'， function （event）{
return $ notification.data（ ' noty_options'）。id;
}）;
// 绑定关闭事件
$ notification.one（ ' noty.close'， function （事件）{
var options = $ notification.data（' noty_options'）;
// 模态清理
如果（options.modal）$（' 。noty_modal'）。fadeOut（' fast'， function （）{$（ this ）。remove（）;}）;
$ notification.clearQueue（）。stop（） .animate（
$ notification.data（' noty_options'）。animateClose，
$ notification.data（' noty_options'）。speed，
$ notification.data（ ' noty_options'）。easing，
$ notification.data（' noty_options'）。onClose）
.promise（）。done（功能（）{
// 布局特定清洁
if （$ .inArray（$ notification.data（' noty_options'）。layout，$ .notification.growls）> -1）{
$ notification.parent（）。remove（）;
} else {
$ notification.remove（）;
// queue render
$ .notification.available = true ;
此 .render（ false ）;
}
}）;
}）;
// 启动节目
$ notification.animate（ 此 .options.animateOpen，此 .options.speed，这 .options.easing， this .options.onShow）;
// 如果noty有超时选项
< span class =code-keyword> if （ this .options.timeout）$ notification.delay（这个 .options.timeout）.promise（）。done（ function （）{
$ notification.removeProp（ this .options.url）;
$ notification.trigger（' noty.close'）;
// 更新客户端通知超时
UpdateClientNotificationEntry（ this .options.notificationId，eventType.timeOut）;
}）;
return this .options.event;
};
// 运行初始化程序
return this .init（options）;
};
// API
$ .notification.get = < span class =code-keyword> function （id）{ return $（' ＃' + id）; };
$ .notification.close = function （id）{
$ .notification.get（id）.trigger（' noty.close'）;
};
$ .notification.setText = function （id，text）{
$ .notification.get（id）.trigger（' noty.setText'，text）;
};
$ .notification.closeAll = function （）{
$ .notification.clearQueue（）;
$（' 。noty_bar'）。trigger（' noty.close'）;
};
$ .notification.reCenter = function （通知）{
notification.css（{' left' :( $（ window ）。width（） - notification.outerWidth（）） / 2 + ' px'}） ;
};
$ .notification.clearQueue = function （）{
$ .notification.queue = [];
};
$ .notification.queue = [];
$ .notification.growls = [' noty_layout_topLeft'，' noty_layout_topRight'，' noty_layout_bottomLeft'，' noty_layout_bottomRight'];
$ .notification.available = true ;
$ .notification.defaultOptions = {
ClientNotificationId： 0 ，
layout：' top'，
主题：' noty_theme_default'，
animateOpen：{height：' toggle'} ，
animateClose：{height：' toggle'}，
easing：< span class =code-string>' swing'，
text：' '，
url：' ' ，
类型：' alert'，
speed：< span class =code-digit> 500 ，
// 超时：5000，
isCustomNotification： false ，
closeButton： false ，
closeOnSelfClick： true ，
closeOnSelfOver：< span class =code-keyword> false ，
force： false ，
onShow： false ，
onClose： false ，
按钮： false ，
modal： false ，
模板：' < div class =noty_message>< span class =noty_text>< / span>< div class =noty_close>< / div>< / div> ;'，
cssPrefix：' noty _'，
cu stom：{
容器： null
}
};
$ .fn.notification = function （options）{
return this .each（ function （）{
（ new $ .noty（options，$（ this ）））;
}）;
};
}）（jQuery）;
// 助手
功能通知（选项）{
return jQuery.notification（options）; // 返回ID
}
解决方案
）{
.notification = function （options，customContainer）{
// var this = this;
var
notification = null ;
var isCustom = false ;
// 用于捕获事件类型的枚举
< span class =code-keyword> var eventType = {closeButtonClick： 1 ，userClick： 2 ，mouseOver： 3 ，timeOut： 4 };
此 .init = 功能（选项）{
< span class =code-keyword> this .options =
Hey guys, I'm just wondering if you could help me with a little issue I'm having. I created a notification for my ASP.NET application it all works great but I have a minor problem when I try and catch the user interaction event from the screen in the .js file. For some reason when there are more than one notifications on screen, no matter which one the user clicks it always returns the last one in the queue. Below is the relevant code in the js file so if anyone can spot what I'm doing wrong I'd be very grateful. When I debug the code all the I'd are set correctly its just when the user clicks the close button the base.options.ClientNotificationId is always the last one rendered to the screen.
Entire Js File
(function($) {
$.notification = function (options, customContainer) {
//var this = this;
var $notification = null;
var isCustom = false;
//enum used to capture the event type
var eventType = { closeButtonClick: 1, userClick: 2, mouseOver: 3, timeOut: 4 };
this.init = function(options) {
this.options = $.extend({}, $.notification.defaultOptions, options);
this.options.type = this.options.cssPrefix + this.options.type;
this.options.id = this.options.type + '_' + new Date().getTime();
this.options.layout = this.options.cssPrefix + 'layout_' + this.options.layout;
this.options.event = '';
if (this.options.custom.container) customContainer = this.options.custom.container;
isCustom = ($.type(customContainer) === 'object') ? true : false;
return this.addQueue();
};
// Push notification to queue
this.addQueue = function() {
var isGrowl = ($.inArray(this.options.layout, $.notification.growls) == -1) ? false : true;
if (!isGrowl) (this.options.force) ? $.notification.queue.unshift({ options: this.options }) : $.notification.queue.push({ options: this.options });
return this.render(isGrowl);
};
// Render the notification
this.render = function(isGrowl, Url) {
// Layout spesific container settings
var container = (isCustom) ? customContainer.addClass(this.options.theme + ' ' + this.options.layout + ' noty_custom_container') : $('body');
if (isGrowl) {
if ($('ul.noty_cont.' + this.options.layout).length == 0)
container.prepend($('<ul/>').addClass('noty_cont ' + this.options.layout));
container = $('ul.noty_cont.' + this.options.layout);
} else {
if ($.notification.available) {
var fromQueue = $.notification.queue.shift(); // Get noty from queue
if ($.type(fromQueue) === 'object') {
$.notification.available = false;
this.options = fromQueue.options;
} else {
$.notification.available = true; // Queue is over
return this.options.id;
}
} else {
return this.options.id;
}
}
this.container = container;
// Generating noty bar
this.bar = $('<div class="noty_bar"/>').attr('id', this.options.id).addClass(this.options.theme + ' ' + this.options.layout + ' ' + this.options.type);
$notification = this.bar;
$notification.append(this.options.template).find('.noty_text').html(this.options.text);
$notification.data('noty_options', this.options);
alert('Generating ' + this.options.ClientNotificationId);
// Close button display
(this.options.closeButton) ? $notification.addClass('noty_closable').find('.noty_close').show() : $notification.find('.noty_close').remove();
// Bind close event to button
$notification.find('.noty_close').unbind('click').bind('click', function () {
//$notification.find('.noty_close').bind('click', function () {
//if we press the close button we need to unbind the close event and create our own.
//$notification.unbind('click');
$notification.fadeOut('slow');
// if (this.options.ClientNotificationId == 0) {
// alert(this.options.ClientNotificationId);
// UpdateCustomClientNotification(eventType.closeButtonClick);
// }
// else {
//record if the close button was clicked
// alert(this.options.ClientNotificationId);
alert($(this).options.ClientNotificationId);
UpdateClientNotificationEntry($(this).options.ClientNotificationId, eventType.closeButtonClick);
return false;
//}
});
// If we have a button we must disable closeOnSelfClick and closeOnSelfOver option
if (this.options.buttons) this.options.closeOnSelfClick = this.options.closeOnSelfOver = false;
if (this.options.closeOnSelfClick) $notification.bind('click', function() {
$notification.trigger('noty.close');
alert('Click Method' + ClientNotificationId);
if (this.options.url) {
window.location = this.options.url;
}
// if (this.options.ClientNotificationId == 0) {
// alert(this.options.ClientNotificationId);
// UpdateCustomClientNotification(eventType.userClick);
// }
// else
// {
// alert(this.options.ClientNotificationId);
UpdateClientNotificationEntry(this.options.ClientNotificationId, eventType.userClick);
//}
});
// Close on self mouseover
if (this.options.closeOnSelfOver) $notification.bind('mouseover', function() {
$notification.animate(5000);
$notification.trigger('noty.close');
//if mouse over is set update client notifications based on that.
UpdateClientNotificationEntry(this.options.ClientNotificationId, eventType.mouseOver);
}).css('cursor', 'pointer');
// Set buttons if available
if (this.options.buttons) {
$buttons = $('<div/>').addClass('noty_buttons');
$notification.find('.noty_message').append($buttons);
$.each(this.options.buttons, function(i, button) {
bclass = (button.type) ? button.type : 'gray';
$button = $('<button/>').addClass(bclass).html(button.text).appendTo($notification.find('.noty_buttons'))
.bind('click', function() {
if ($.isFunction(button.click)) {
button.click.call($button, $notification);
}
});
});
}
return this.show(isGrowl);
};
this.show = function(isGrowl) {
// is Modal?
if (this.options.modal) $('<div/>').addClass('noty_modal').addClass(this.options.theme).prependTo($('body')).fadeIn('fast');
$notification.close = function() { return this.trigger('noty.close'); };
// Prepend noty to container
(isGrowl) ? this.container.prepend($('<li/>').append($notification)) : this.container.prepend($notification);
// topCenter and center specific options
if (this.options.layout == 'noty_layout_topCenter' || this.options.layout == 'noty_layout_center') {
$.notification.reCenter($notification);
}
$notification.bind('noty.setText', function(event, text) {
$notification.find('.noty_text').html(text);
if (this.options.layout == 'noty_layout_topCenter' || this.options.layout == 'noty_layout_center') {
$.notification.reCenter($notification);
}
});
$notification.bind('noty.getId', function(event) {
return $notification.data('noty_options').id;
});
// Bind close event
$notification.one('noty.close', function(event) {
var options = $notification.data('noty_options');
// Modal Cleaning
if (options.modal) $('.noty_modal').fadeOut('fast', function() { $(this).remove(); });
$notification.clearQueue().stop().animate(
$notification.data('noty_options').animateClose,
$notification.data('noty_options').speed,
$notification.data('noty_options').easing,
$notification.data('noty_options').onClose)
.promise().done(function() {
// Layout spesific cleaning
if ($.inArray($notification.data('noty_options').layout, $.notification.growls) > -1) {
$notification.parent().remove();
} else {
$notification.remove();
// queue render
$.notification.available = true;
this.render(false);
}
});
});
// Start the show
$notification.animate(this.options.animateOpen, this.options.speed, this.options.easing, this.options.onShow);
// If noty is have a timeout option
if (this.options.timeout) $notification.delay(this.options.timeout).promise().done(function () {
$notification.removeProp(this.options.url);
$notification.trigger('noty.close');
//update client notifications timed out
UpdateClientNotificationEntry(this.options.notificationId, eventType.timeOut);
});
return this.options.event;
};
// Run initializer
return this.init(options);
};
// API
$.notification.get = function(id) { return $('#' + id); };
$.notification.close = function(id) {
$.notification.get(id).trigger('noty.close');
};
$.notification.setText = function(id, text) {
$.notification.get(id).trigger('noty.setText', text);
};
$.notification.closeAll = function() {
$.notification.clearQueue();
$('.noty_bar').trigger('noty.close');
};
$.notification.reCenter = function(notification) {
notification.css({ 'left': ($(window).width() - notification.outerWidth()) / 2 + 'px' });
};
$.notification.clearQueue = function() {
$.notification.queue = [];
};
$.notification.queue = [];
$.notification.growls = ['noty_layout_topLeft', 'noty_layout_topRight', 'noty_layout_bottomLeft', 'noty_layout_bottomRight'];
$.notification.available = true;
$.notification.defaultOptions = {
ClientNotificationId : 0,
layout: 'top',
theme: 'noty_theme_default',
animateOpen: { height: 'toggle' },
animateClose: { height: 'toggle' },
easing: 'swing',
text: '',
url: '',
type: 'alert',
speed: 500,
// timeout: 5000,
isCustomNotification : false,
closeButton: false,
closeOnSelfClick: true,
closeOnSelfOver: false,
force: false,
onShow: false,
onClose: false,
buttons: false,
modal: false,
template: '<div class="noty_message"><span class="noty_text"></span><div class="noty_close"></div></div>',
cssPrefix: 'noty_',
custom: {
container: null
}
};
$.fn.notification = function(options) {
return this.each(function() {
(new $.noty(options, $(this)));
});
};
})(jQuery);
//Helper
function notification(options) {
return jQuery.notification(options); // returns an id
} 解决方案
) {
.notification = function (options, customContainer) { //var this = this; var
notification = null; var isCustom = false; //enum used to capture the event type var eventType = { closeButtonClick: 1, userClick: 2, mouseOver: 3, timeOut: 4 }; this.init = function(options) { this.options =
这篇关于帮助Jquery通知的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
