Self-expanding FINEUIMVC Notification dialog box (multiple side-by display does not overlap, support the latest display at the top)

Disclaimer: FINEUIMVC (Basic edition) is free software and this series of articles applies to the basic version.

In this article we will transform the FINEUIMVC default notification dialog so that multiple displays are not overlapped. And in advance out of a public JS file for everyone to use.

FINEUIMVC Notification dialog box

FINEUIMVC The default Notification dialog box is displayed by F.notify and can be displayed in 9 locations on the page, corresponding to the properties:

1. Posotionx = left, Positiony = Top
2. Posotionx = left, Positiony = Center
3. Posotionx = left, Positiony = Bottom
4. Posotionx = Center, Positiony = Top
5. Posotionx = center, Positiony = Center
6. Posotionx = Center, Positiony = Bottom
7. Posotionx = right, Positiony = Top
8. Posotionx = right, Positiony = Center
9. Posotionx = right, Positiony = Bottom

We have a dedicated sample page to demonstrate the effect:

Http://fineui.com/demo_mvc/#/demo_mvc/Message/Notify

In the ointment, if there are more than one Notification dialog box, there will be overlapping, as follows:

Customize Notification dialog box grouping

To solve this problem, we need to do a simple encapsulation of the f.notify to get the effect as shown:

It is very simple to call this encapsulated function and take a look at the implementation code for this page:

@ (F.button ()    . Text (" Pop-up Notification dialog box (multiple clicks)")    . ID ("btnOperation1" )    . Listener ("Click""onoperation1click" ))

<script src= "~/res/js/notify_group.js" ></script><script type= "Text/javascript" >var_ordernumber = 0; functionOnoperation1click (event) {//Create a message dialog box instance        varDisplayTime = + math.random () * 10000; varAllmessageicons = [' Information ', ' warning ', ' question ', ' error ', ' success ']; Shownotifygroup ({message:' This is <strong> ' + _ordernumber + ' </strong> message, show ' + Math.floor (displaytime/1000) + ' s ', Messageicon:allmessageicons[_ordernumber%Allmessageicons.length], header:false, displaymilliseconds:displaytime}); _ordernumber++; }</script>

The function that actually executes in this is Shownotifygroup, the parameter that needs to pass in is as follows:

1. Message: The body of messages displayed

2. Messgeicon: Icon in front of message body

3. Displaymilliseconds: The number of milliseconds to display (then automatically disappears)

In fact, we can pass in any parameter of f.notify, because Shownotifygroup inside is also the call to F.notify, just do a certain extension.

Here's a look at the specific implementation of the Shownotifygroup function:

//Notification dialog box grouping(function () {    //_notifyspace: Spacing between message boxes    //_notifies: Holds the list of dialog boxes currently being displayed    var_ordernumber = 1, _notifyspace = 5, _notifies = []; //dialog box Close handler function    functiononnotifyhide () {varnotify = This; varNotifyheight = Notify.el.outerHeight (true) +_notifyspace; varNotifyindex =$.inarray (notify, _notifies); _notifies.splice (Notifyindex,1); varCount =_notifies.length; if(count) { for(vari = Notifyindex; I < count; i++) {                varitem =_notifies[i]; Item.top-=Notifyheight; Item.el.animate ({' Top ': Item.top}); }            //Reorder by Notify.top_notifies.sort (function(A, b) {returnA.top-B.top;        }); }    }    //gets the top property of the dialog element    functionCalcnotifytop () {vartop =_notifyspace; if(_notifies.length) {varLastnotify = _notifies[_notifies.length-1]; Top+ = Lastnotify.top + lastNotify.el.outerHeight (true); }        returntop; }    //Public MethodsWindow.shownotifygroup =function(options) {//Create a message dialog box instance$.extend (Options, {top:calcnotifytop (), Positionx:' Right ', listeners: {hide:onnotifyhide}});    _notifies.push (f.notify (options)); }})();

First look at the implementation of the public Shownotifygroup method, need to pass in the f.notify has three parameters:

1. Top: The vertical coordinate of the upper left corner of the message box, because the latest in the last display, so every time to calculate this position

2. Posotionx: Fixed to right, which is displayed on the left side of the page

3. Hide: A message box is hidden when the processing function, which is mainly 3 processing:

------3.1: Remove message boxes from message box queues that need to be hidden

------3.2: Change the Top property of all message boxes that are being displayed

------3.3: Sort by top from small to large

Custom Notification dialog box grouping (latest display at top)

The above effect is the most recent display at the bottom, the code is also relatively concise. If you ask for the latest display at the top, you have control over the animation effect:

1. When the new message box is displayed, all existing message boxes need to be moved down and the new message box will be displayed until everyone has finished moving down

2. When the new message box is displayed, it is possible that the animation effect is being moved down, and the previous message box is not displayed (waiting for the animation to complete), you need to immediately terminate all animations, display the previous message box, and then process the new message box

3. When a message box is hidden, it is also possible to move the animation down, at which point the same processing

So, although the code logic of the package is complex, the calling method remains unchanged, and the effect is great:

The calling code for this example is simple, compared to the previous example, with only one true parameter:

<script src= "~/res/js/notify_group.js" ></script><script type= "Text/javascript" >var_ordernumber = 0; functionOnoperation1click (event) {//Create a message dialog box instance        varDisplayTime = + math.random () * 10000; varAllmessageicons = [' Information ', ' warning ', ' question ', ' error ', ' success ']; Shownotifygroup ({message:' This is <strong> ' + _ordernumber + ' </strong> message, show ' + Math.floor (displaytime/1000) + ' s ', Messageicon:allmessageicons[_ordernumber%Allmessageicons.length], header:false, displaymilliseconds:displaytime},true); _ordernumber++; }</script>

Now look at the full Notify_group.js code:

//Notification dialog box grouping(function () {    //_notifyspace: Spacing between message boxes    //_notifies: Holds the list of dialog boxes currently being displayed    var_ordernumber = 1, _notifyspace = 5, _notifies = []; //dialog box Close handler function    functiononnotifyhide () {//empty previously unfinished animations firstclearnotifiesanimation (); varnotify = This; varNotifyheight = Notify.el.outerHeight (true) +_notifyspace; varNotifyindex =$.inarray (notify, _notifies); _notifies.splice (Notifyindex,1); varCount =_notifies.length; if(count) { for(vari = Notifyindex; I < count; i++) {                varitem =_notifies[i]; Item.top-=Notifyheight; Item.el.animate ({' Top ': Item.top}); }            //Reorder by Notify.top_notifies.sort (function(A, b) {returnA.top-B.top;        }); }    }    //all dialog boxes Move Down    functionMovenotifiesdown (newnotify, fn) {//empty previously unfinished animations firstclearnotifiesanimation (); varCount = _notifies.length, finished = 0; if(!count)            {fn.apply (window); return; }        varNotifyheight = NewNotify.el.outerHeight (true) +_notifyspace;  for(vari = 0; I < count; i++) {            varitem =_notifies[i]; Item.top+=Notifyheight; Item.el.animate ({' Top ': Item.top},function () {                //functions executed after the animation is completedfinished++; if(Finished >=count)                {fn.apply (window);        }            }); }    }    //Stop the animation and callback    functionclearnotifiesanimation () {varCount =_notifies.length; if(count) { for(vari = 0; I < count; i++) {                varitem =_notifies[i]; varItemel =Item.el; if(Itemel.is (": Animated")) {itemel.stop (false,true); }            }        }    }    //gets the top property of the dialog element    functionCalcnotifytop () {vartop =_notifyspace; if(_notifies.length) {varLastnotify = _notifies[_notifies.length-1]; Top+ = Lastnotify.top + lastNotify.el.outerHeight (true); }        returntop; }    //Public MethodsWindow.shownotifygroup =function(options, newestontop) {//Create a message dialog box instance$.extend (Options, {positionx:' Right ', listeners: {hide:onnotifyhide}}); if(newestontop) {//The latest display at the top, need to be hidden, and so on before the Movenotifiesdown displayOptions.hidden =true; Options.top=_notifyspace; } Else{options.top=Calcnotifytop (); }        varnotify =f.notify (options); if(newestontop) {Movenotifiesdown (notify,function() {notify.show ();            }); _notifies.splice (0, 0, notify); } Else{_notifies.push (notify); }    }})();

If you want this effect, it's easy to throw notify_group.js into your project and call the Shownotifygroup function directly!

Summary

Although this article is about FINEUIMVC, it is a simple extension and encapsulation of internal JavaScript code, thus fineuimvc the flexibility of the front-end library. We can throw the notify_group.js directly into the project and call the Shownotifygroup function to achieve the above effect. You can also expand your own to display notification dialogs in different parts of the page for more complex animation effects.

"FINEUIMVC essay" catalogue: http://www.cnblogs.com/sanshi/p/6473592.html

Self-expanding FINEUIMVC Notification dialog box (multiple side-by display does not overlap, support the latest display at the top)