倒計時訊息提示框

1.1 預期效果

FineReport 自帶的提示框樣式比較單一，例如填報校驗的提示框，如下圖所示：

可以透過引入一些 JS 和 CSS 來做出個性化的效果，如下圖所示：

1.2 實現思路

• 如果是 cpt 報表，直接在範本 Web 屬性中引入外部 JavaScript 和 CSS 。

• 如果是 frm 報表，需要在 body 初始化事件中寫外部 JavaScript 和 CSS 引用。

2.1 下載檔案

1）點選下載 JavaScript 和 CSS 檔案：

notice.js

animate.css

noticejs.css

2）將 3 個檔案放到%FR_HOME%\webroot\help\css目錄下，如下圖所示：

2.2 引用檔案

1）建立普通報表，設計器菜單欄點選範本>範本Web屬性，開啟的頁面點選引用JavaScript，將上面的 1 個 JavaScript 檔案引用到報表中，如下圖所示：

2）點選引用CSS，將上面的 2 個 CSS 檔案引用到報表中，如下圖所示：

2.3 設計表格

B2、D2、F2、H2 儲存格都新增按鈕元件，按鈕名稱分別設定為：success、info、warning、error，如下圖所示：

2.4 新增事件

分別給表格中的 4 個按鈕新增點選事件，觸發彈出提示框的操作，如下圖所示：

1）B2 儲存格按鈕點選事件 JavaScript 程式碼如下：

new NoticeJs({
	title: '',
	type: 'success',
	text: '填報成功',
	position: 'topCenter',
	closeWith: ['button','click'],
	timeout: 30,
	modal: false,
	progressBar: true,
	callbacks: {
		beforeShow: [],
		onShow: [],
		afterShow: [],
		onClose: [],
		afterClose: [],
		onClick: [],
		onHover: [function() {
			console.log("success");
		}]
	},
	animation: {
		open: 'animated bounceInRight',
		close: 'animated bounceOutLeft'
	}
}).show()

2）D2 儲存格按鈕點選事件 JavaScript 程式碼如下：

new NoticeJs({
	type: 'info',
	text: '填報進行中，暫時不可操作',
	position: 'topCenter',
	timeout: 30,
	modal: true,
	animation: {
		open: 'animated bounceInRight',
		close: 'animated bounceOutLeft'
	}
}).show()

3）F2 儲存格點選事件 JavaScript 程式碼如下：

new NoticeJs({
	type: 'warning',
	text: '重複提交',
	timeout: 30,
	animation: {
		open: 'animated bounceIn',
		close: 'animated bounceOut'
	}
}).show()

4）H2 儲存格點選事件 JavaScript 程式碼如下：

new NoticeJs({
	type: 'error',
	text: '填報失敗',
	position: 'topCenter',
	timeout: 30,
	animation: {
		open: 'animated flipInX',
		close: 'animated flipoutX'
	}
}).show()

2.5 效果預覽

儲存報表，點選填報預覽，效果如下圖所示：

注：不支援行動端。

已完成範本可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填報預覽JS實體\倒計時訊息提示框.cpt

點選下載範本：

倒计时消息提示框.cpt

點選下載JavaScript 和CSS 檔案：

animate.css

notice.js

noticejs.css

4.1 frm 報表實現方法

frm 報表需要在 body 初始化事件中寫 JavaScript 引入，其他操作同上面 cpt 報表的實現方法，如下圖所示：

JavaScript 程式碼如下：

function dynamicLoadCss(url) {
    var head = document.getElementsByTagName('head')[0];
    var link = document.createElement('link');
    link.type = 'text/css';
    link.rel = 'stylesheet';
    link.href = url;
    head.appendChild(link);
}
 
function dynamicLoadJs(url) {
    var oHead = document.getElementsByTagName('head').item(0);
    var oScript = document.createElement("script");
    oScript.type = "text/javascript";
    oScript.src = url;
    oHead.appendChild(oScript);
}
 
dynamicLoadCss("/webroot/help/css/noticejs.css");
dynamicLoadCss("/webroot/help/css/animate.css");
//引入css
dynamicLoadJs("/webroot/help/css/notice.js");
//引入js

4.2 Notice.js 參數說明

4.3 動畫效果

open	close	效果圖
animated bounceInRight	animated bounceOutLeft
animated bounceIn	animated bounceOut
animated fadeIn	animated fadeOut
animated lightSpeedIn	animated lightSpeedOut
animated zoomIn	animated zoomOut
animated flipInX	animated flipOutX
animated rollIn	animated rollOut