FineUIMvc隨筆(7)擴充套件通知對話方塊(顯示多個不重疊)
宣告:FineUIMvc(基礎版)是免費軟體,本系列文章適用於基礎版。
這篇文章我們將改造 FineUIMvc 預設的通知對話方塊,使得同時顯示多個也不會重疊。並提前出一個公共的JS檔案,供大家使用。
FineUIMvc 的通知對話方塊
FineUIMvc預設的通知對話方塊通過 F.notify 來顯示,可以在頁面上的 9 個位置顯示,分別對應於屬性:
- PosotionX = Left, PositionY = Top
- PosotionX = Left, PositionY = Center
- PosotionX = Left, PositionY = Bottom
- PosotionX = Center, PositionY = Top
- PosotionX = Center, PositionY = Center
- PosotionX = Center, PositionY = Bottom
- PosotionX = Right, PositionY = Top
- PosotionX = Right, PositionY = Center
- PosotionX = Right, PositionY = Bottom
我們有專門的示例頁面來演示相應的效果:
美中不足的時,如果同時有多個通知對話方塊時,就會出現重疊,如下所示:
自定義通知對話方塊分組
為了解決這個問題,我們需要對 F.notify 進行一個簡單的封裝,得到的效果如下圖所示:
呼叫這個封裝好的函式非常簡單,來看下這個頁面的實現程式碼:
@(F.Button() .Text("彈出通知對話方塊(多次點選)") .ID("btnOperation1") .Listener("click", "onOperation1Click") )
<script src="~/res/js/notify_group.js"></script> <script type="text/javascript"> var _orderNumber = 0; function onOperation1Click(event) {// 建立一個訊息對話方塊例項 var displayTime = 2000 + Math.random() * 10000; var allMessageIcons = ['information', 'warning', 'question', 'error', 'success']; showNotifyGroup({ message: '這是第 <strong>' + _orderNumber + '</strong> 條提示資訊,顯示' + Math.floor(displayTime / 1000) + '秒', messageIcon: allMessageIcons[_orderNumber % allMessageIcons.length], header: false, displayMilliseconds: displayTime }); _orderNumber++; } </script>
這裡面實際執行的函式就是 showNotifyGroup,需要傳入的引數如下:
1. message:顯示的訊息正文
2. messgeIcon:訊息正文前面的圖示
3. displayMilliseconds:顯示的毫秒數(然後會自動消失)
其實,我們可以傳入 F.notify 的任何引數,因為 showNotifyGroup 內部也是對 F.notify 的呼叫,只不過做了一定的擴充套件。
下面就來看下 showNotifyGroup 函式的具體實現:
// 通知對話方塊分組 (function () { // _notifySpace: 訊息框之間的間距 // _notifies: 存放當前正在顯示的對話方塊列表 var _orderNumber = 1, _notifySpace = 5, _notifies = []; // 對話方塊關閉處理函式 function onNotifyHide() { var notify = this; var notifyHeight = notify.el.outerHeight(true) + _notifySpace; var notifyIndex = $.inArray(notify, _notifies); _notifies.splice(notifyIndex, 1); var count = _notifies.length; if (count) { for (var i = notifyIndex; i < count; i++) { var item = _notifies[i]; item.top -= notifyHeight; item.el.animate({ 'top': item.top }); } // 按照 notify.top 重新排序 _notifies.sort(function (a, b) { return a.top - b.top; }); } } // 獲取對話方塊元素的top屬性 function calcNotifyTop() { var top = _notifySpace; if (_notifies.length) { var lastNotify = _notifies[_notifies.length - 1]; top += lastNotify.top + lastNotify.el.outerHeight(true); } return top; } // 公開方法 window.showNotifyGroup = function (options) { // 建立一個訊息對話方塊例項 $.extend(options, { top: calcNotifyTop(), positionX: 'right', listeners: { hide: onNotifyHide } }); _notifies.push(F.notify(options)); } })();
首先看下公開的 showNotifyGroup 方法的實現,需要傳入 F.notify 的有三個引數:
1. top:訊息框左上角的垂直座標,由於最新的在最後面顯示,所以每次都要計算這個位置
2. posotionX:固定為 right,也就是在頁面右側顯示
3. hide:訊息框隱藏時的處理函式,裡面主要是 3 個處理:
------3.1:從訊息框佇列中刪除需要隱藏的訊息框
------3.2:改變正在顯示的所有訊息框的 top 屬性
------3.3:按照 top 由小到大的順序排序
自定義通知對話方塊分組(最新的顯示在最上方)
上面實現的效果是最新的顯示在最下方,程式碼還比較簡潔。而如果要求最新的顯示在最上方,則面臨對動畫效果的控制:
1. 顯示新訊息框時,需要將現有的所有訊息框下移,並且等到大家都完成下移動作後,再顯示新訊息框
2. 顯示新訊息框時,有可能正在進行下移動畫效果,並且上一個訊息框還沒顯示(正在等動畫完成),此時需要立即終止所有動畫,並顯示上一個訊息框,之後再處理新的訊息框
3. 某個訊息框隱藏時,也有可能正在進行下移動畫,此時也要做相同的處理
所以,雖然封裝的程式碼邏輯複雜了,不過呼叫方法依然沒變,效果也是很讚的:
這個示例的呼叫程式碼很簡單,和上例相比,只多了一個 true 的引數:
<script src="~/res/js/notify_group.js"></script> <script type="text/javascript"> var _orderNumber = 0; function onOperation1Click(event) { // 建立一個訊息對話方塊例項 var displayTime = 2000 + Math.random() * 10000; var allMessageIcons = ['information', 'warning', 'question', 'error', 'success']; showNotifyGroup({ message: '這是第 <strong>' + _orderNumber + '</strong> 條提示資訊,顯示' + Math.floor(displayTime / 1000) + '秒', messageIcon: allMessageIcons[_orderNumber % allMessageIcons.length], header: false, displayMilliseconds: displayTime }, true); _orderNumber++; } </script>
現在來看下完整的 notify_group.js 的程式碼:
// 通知對話方塊分組 (function () { // _notifySpace: 訊息框之間的間距 // _notifies: 存放當前正在顯示的對話方塊列表 var _orderNumber = 1, _notifySpace = 5, _notifies = []; // 對話方塊關閉處理函式 function onNotifyHide() { // 先清空之前尚未完成的動畫 clearNotifiesAnimation(); var notify = this; var notifyHeight = notify.el.outerHeight(true) + _notifySpace; var notifyIndex = $.inArray(notify, _notifies); _notifies.splice(notifyIndex, 1); var count = _notifies.length; if (count) { for (var i = notifyIndex; i < count; i++) { var item = _notifies[i]; item.top -= notifyHeight; item.el.animate({ 'top': item.top }); } // 按照 notify.top 重新排序 _notifies.sort(function (a, b) { return a.top - b.top; }); } } // 所有對話方塊下移 function moveNotifiesDown(newNotify, fn) { // 先清空之前尚未完成的動畫 clearNotifiesAnimation(); var count = _notifies.length, finished = 0; if (!count) { fn.apply(window); return; } var notifyHeight = newNotify.el.outerHeight(true) + _notifySpace; for (var i = 0; i < count; i++) { var item = _notifies[i]; item.top += notifyHeight; item.el.animate({ 'top': item.top }, function () { // 動畫完成後執行的函式 finished++; if (finished >= count) { fn.apply(window); } }); } } // 停止動畫,並回調 function clearNotifiesAnimation() { var count = _notifies.length; if (count) { for (var i = 0; i < count; i++) { var item = _notifies[i]; var itemEl = item.el; if (itemEl.is(":animated")) { itemEl.stop(false, true); } } } } // 獲取對話方塊元素的top屬性 function calcNotifyTop() { var top = _notifySpace; if (_notifies.length) { var lastNotify = _notifies[_notifies.length - 1]; top += lastNotify.top + lastNotify.el.outerHeight(true); } return top; } // 公開方法 window.showNotifyGroup = function (options, newestOnTop) { // 建立一個訊息對話方塊例項 $.extend(options, { positionX: 'right', listeners: { hide: onNotifyHide } }); if (newestOnTop) { // 最新的顯示在最上方,需要先隱藏,等 moveNotifiesDown 之後再顯示 options.hidden = true; options.top = _notifySpace; } else { options.top = calcNotifyTop(); } var notify = F.notify(options); if (newestOnTop) { moveNotifiesDown(notify, function () { notify.show(); }); _notifies.splice(0, 0, notify); } else { _notifies.push(notify); } } })();
如果你也想要這樣的效果,很簡單,把 notify_group.js 丟到你的專案中,直接呼叫 showNotifyGroup 函式即可!
小結
雖然本篇講的是 FineUIMvc ,其實是對內部 JavaScript 程式碼的一個簡單擴充套件和封裝,由此可見 FineUIMvc 前端庫的靈活性。我們可以直接把 notify_group.js 丟到專案中,呼叫 showNotifyGroup 函式即可實現上述效果。你也可以自行擴充套件來在頁面的不同地方顯示通知對話方塊,實現更復雜的動畫效果。
相關推薦
FineUIMvc隨筆(7)擴充套件通知對話方塊(顯示多個不重疊)
宣告:FineUIMvc(基礎版)是免費軟體,本系列文章適用於基礎版。 這篇文章我們將改造 FineUIMvc 預設的通知對話方塊,使得同時顯示多個也不會重疊。並提前出一個公共的JS檔案,供大家使用。 FineUIMvc 的通知對話方塊 FineUIMvc預設的通知對話方塊通過 F.notify 來顯示
MFC開啟檔案對話方塊,選擇多個檔案
size_t index; CString cstrsucstring; CFileDialog filedlg(TRUE,NULL,NULL,OFN_HIDEREADONLY | OFN_OVERWRITEPROMPT |OFN_ALLOWMUL
QT學習 之 對話方塊 (一) 可擴充套件對話方塊
QT中的對話方塊是QDialog類 下面是三個主要的視窗的區別: QWidget類是所有使用者介面物件的基類。 視窗部件是使用者介面的一個基本單元:它從視窗系統接收滑鼠、鍵盤和其它事件,並且在螢幕上繪製自己。每一個視窗部件都是矩形的,並且它們按Z軸順序排列。一個視窗部件可以
C# WPF MVVM QQ密碼管家項目(7,對QQ登錄界面的自動輸入思路分析)
gdi qq密碼 分享圖片 進行 技術 實現 密碼 窗體 rdquo 7 - 對QQ登錄界面的自動輸入思路分析 在開始寫代碼之前我們得好好研究一下QQ的登錄界面。本項目中操作的QQ版本號為:8.9.5(22062) 自動輸入在c#開發上方法有二:1是獲取輸入框控件句柄然
四種對話方塊(dialog)的簡單使用方法
有普通對話方塊,單選對話方塊,複選對話方塊,進度條的兩種實現方法話不多說,直接上程式碼 activity_main.xml: 1 <?xml version="1.0" encoding="utf-8"?> 2 <android.support.constra
Android中的對話方塊(AlertDialog)
建立android中分體式對話方塊需要四個步驟: 第一:獲得AlertDialog的靜態內部類Builder物件,有該類建立對話方塊。 第二:通過Builder物件設定對話方塊的標題,按鈕UI及將要響應的事件。、 第三:呼叫Builder的Create()方法建立對對話方塊 第四
Qt5建立標準字型對話方塊(QFontDialog類)
接續上節:https://blog.csdn.net/xunye_dream/article/details/83003316 標頭檔案: #ifndef DIALOG_H #define DIALOG_H #include <QDialog> class QPushBu
QFileDialog關於選擇檔案對話方塊中的幾個訊號的說明(currentChanged,directoryEntered,fileSelected,filterSelected)
QFileDialog關於選擇檔案對話方塊中的幾個訊號 例項: openFile::openFile(QWidget *parent) :QWidget(parent),ui(new Ui::openFile){ui->setupUi(this);fDialog = new QFileDialog(t
編寫一個Java應用程式,當用戶在輸入對話方塊中輸入兩個日期後(日期格式為YYYYMMDD,如1999年1月12日應輸入為19990112),程式將判斷兩個日期的先後順序,以及兩個日期之間的間隔天數(例
編寫一個Java應用程式,當用戶在輸入對話方塊中輸入兩個日期後(日期格式為YYYYMMDD, 如1999年1月12日應輸入為19990112), 程式將判斷兩個日期的先後順序, 以及兩個日期之間的間隔天數(例如1999年1月1日和1999年1月2日之間的間隔是1天。
Qt之標準對話方塊(字型對話方塊)
字型對話方塊 1、包含標頭檔案 #include < QFontDialog> void Widget::on_FontButton_clicked() { //ok 用
Swing學習(七)——系統預設對話方塊
package com.xyzx.swing; import java.awt.Event; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.awt.
android模式進度對話方塊(ProgressDialog)的呼叫方法
public class MainActivity extends AppCompatActivity { @BindView(R.id.button2) Button button2; @BindView(R.id.button1) TextView
PyQt5 筆記6 -- 對話方塊(QDialog)
PyQt5 筆記6 – 對話方塊(QDialog) 1、主視窗彈出對話方塊 import sys from PyQt5.QtWidgets import QApplication, QMainWin
GUI之練習——列出指定目錄下的內容和對話方塊(Dialog)
package myclass; import java.awt.; import java.awt.event.; import java.io.*; class MyWindowDemo { private Frame f; private TextFiel
android 實現點選輸入框彈出日期選擇對話方塊(DatePickerDialog)
前言 這裡我們實現一個功能,點選日期輸入框(EditText),即可彈出日期選擇對話方塊(DatePickerDialog),等使用者選擇日期後,將使用者選擇的日期顯示在日期輸入框。 1.activity_main.xml 這裡只有一個TextView和EditText。
C# 待使用者確認對話方塊(確定/quxiao)
winform,典型需求,刪除資料之前彈出對話方塊讓使用者確認: DialogResult result = MessageBox.Show("確定刪除嗎?","刪除",MessageBoxButtons.YesNo,MessageBoxIcon.Question);
Java-記事本程式、檔案選擇對話方塊(JFileChooser)
基本的GUI基礎和IO基礎 核心程式碼 JFileChooser jfc = new JFileChooser(); jfc.setDialogTitle("另存為..."); // jfc.showOpenDialog(null); // 顯示開啟檔案
html5+css實現六位數字密碼輸入對話方塊(類似支付寶,微信)
先來看看原型圖:直接上程式碼:html<div class="common-part pay-part"> <div class="common-dialog pay-dialog"> <div class
MFC介面程式設計基礎(10):基於對話方塊的MFC應用程式
上一篇:MFC介面程式設計基礎(09):選單(二) 下一篇:MFC介面程式設計基礎(11):靜態文字框、命令按鈕和編輯框 MFC程式設計 MFC 是 Visual C++ 的核心。雖然在 Windows 應用程
VS2013/MFC程式設計入門之七(對話方塊:建立對話方塊類和新增控制元件變數)
前兩講中為大家講解了如何建立對話方塊資源。建立好對話方塊資源後要做的就是生成對話方塊類了。再宣告下,生成對話方塊類主要包括新建對話方塊類、新增控制元件變數和控制元件的訊息處理函式等。 因為給大家的例程Addition是基於對話方塊的程式,所以程式自動建立了