Framework7學習筆記之 常用彈窗(Modal)
阿新 • • 發佈:2018-02-22
最簡 clas 信息 提示信息 函數 cli ... cal text
一:彈窗
Modal 是從App的主要內容區域上彈出的一小塊內容塊,經常被用來向用戶詢問信息,通知或警告用戶。
彈窗一般在js中定義,通過api,設定彈窗的標題、內容、點擊回調函數。
二:Alert
最簡單的彈窗,用於提示或警告,只有一個ok選項。
$$(‘.alert-text-title-callback‘).on(‘click‘, function () { myApp.alert(‘提示內容‘, ‘彈窗標題‘, function () { 選項點擊回調函數。 }); });
三:Confirm
確認彈窗,用於確認某些操作,有 ok、cancel兩個選項。
$$(‘.confirm-title-ok-cancel‘).on(‘click‘, function () { myApp.confirm(‘提示信息‘, ‘彈窗標題‘, function () { 點擊ok選項的回調函數 }, function () { 點擊cancel選項的回調函數 } ); });
四:Prompt
輸入彈窗,用於提醒用戶輸入一些數據。
$$(‘.prompt-title-ok-cancel‘).on(‘click‘, function () { myApp.prompt(‘彈窗信息‘, ‘彈窗標題‘, function (value) { ok選項回調函數,value是輸入值 }, function (value) { cancel選項回調函數,value是輸入值 } ); });
五:indicator
指示器,用於在執行一些耗時操作時作提示用。
$$(‘.open-indicator‘).on(‘click‘, function () { myApp.showIndicator();//顯示指示器 setTimeout(function () { myApp.hideIndicator(); }, 延時時間);//延時關閉 });
六:自定義彈窗
自定義彈窗可以:自定義標題、文本、按鈕數量以及各個按鈕的點擊函數。
【其中,標題、文本可以用html字符串來實現樣式,如:tab效果等】
$$(‘.open-3-modal‘).on(‘click‘, function () { myApp.modal({ title: ‘標題‘, text: ‘內容‘, buttons: [ { text: ‘按鈕文本‘, onClick: function() { 點擊事件函數 } }, ... ] }) });
Framework7學習筆記之 常用彈窗(Modal)