帮助Jquery通知

帮助Jquery通知

关注
发信
关注(28)粉丝(399)

帮助Jquery通知

本文介绍了帮助Jquery通知的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 嘿伙计们，我只是想知道你是否可以帮助我解决我遇到的一个小问题。我为我的ASP.NET应用程序创建了一个通知，它一切都很好但是当我尝试从.js文件中的屏幕捕获用户交互事件时，我遇到了一个小问题。出于某种原因，当屏幕上有多个通知时，无论用户点击哪一个，它总是返回队列中的最后一个。下面是js文件中的相关代码，所以如果有人能发现我做错了什么，我将非常感激。当我调试代码时，我只是在用户单击关闭按钮时正确设置它.base.options.ClientNotificationId始终是呈现给屏幕的最后一个。 整个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 = 功能（选项）{ 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（' 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 == ' 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' || 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有超时选项 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 = 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：' swing'， text：' '， url：' ' ，类型：' alert'， speed： 500 ， // 超时：5000， isCustomNotification： false ， closeButton： false ， closeOnSelfClick： true ， closeOnSelfOver： 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 ; // 用于捕获事件类型的枚举 var eventType = {closeButtonClick： 1 ，userClick： 2 ，mouseOver： 3 ，timeOut： 4 }; 此 .init = 功能（选项）{ 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);//Helperfunction notification(options) { return jQuery.notification(options); // returns an id} 解决方案 ) {.notification = function (options, customContainer) { //var this = this; varnotification = 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通知的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
10-23 05:46
Powered by LMLPHP ©2024 帮助Jquery通知 0.005172