UI · Html5+參考

# [ui]() UI模塊管理應用界面，用于操作加載HTML頁面的原生窗口，調用系統原生控件等。由于此模塊功能太多，現已根據功能分拆更新為Key、NativeUI、Navigator、Webview等，并對接口和功能做了一些優化調整，請使用新API。 ### 方法： - [alert](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.alert): 彈出系統提示框 - [closeSplashscreen](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.closeSplashscreen): 關閉程序啟動界面 - [closeWindow](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.closeWindow): 關閉原生窗口 - [confirm](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.confirm): 彈出系統確認對話框 - [createView](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.createView): 創建新的原生控件對象 - [createWaiting](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.createWaiting): 創建等待對話框 - [createWindow](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.createWindow): 創建新的原生窗口 - [enumWindow](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.enumWindow): 枚舉所有原生窗口 - [findWindowByName](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.findWindowByName): 查找指定名稱的窗口 - [getSelfWindow](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.getSelfWindow): 獲取自身窗口 - [isFullscreen](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.isFullscreen): 判斷應用當前是否全屏模式運行 - [pickDate](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.pickDate): 彈出日期選擇界面 - [pickTime](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.pickTime): 彈出時間選擇界面 - [prompt](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.prompt): 彈出系統輸入框 - [setFullscreen](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.setFullscreen): 設置應用是否全屏模式運行 - [toast](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.toast): 顯示自動消失的消息 ### 對象： - [AnimationTypeShow](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.AnimationTypeShow): 一組用于定義頁面或控件顯示動畫效果 - [AnimationTypeClose](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.AnimationTypeClose): 一組用于定義頁面或控件關閉的動畫效果 - [DateOption](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.DateOption): JSON對象，選擇日期界面設置的參數 - [Metrics](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.Metrics): JSON對象，窗口實際度量信息 - [NView](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NView): 原生控件對象，用于操作頁面中顯示的原生控件 - [NViewDock](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NViewDock): 原生控件在窗口中停靠的方式 - [NViewOption](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NViewOption): JSON對象，原生控件元素要設置的參數 - [NViewPosition](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NViewPosition): 原生控件在窗口中顯示的位置 - [NWaiting](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NWaiting): NWaiting是等待控件對象，用于在界面中顯示原生等待窗口 - [NWaitingOption](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NWaitingOption): JSON對象，原生等待控件要設置的參數 - [NWindow](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NWindow): NWindow是窗口對象，用于操作加載html頁面的原生窗口 - [NWindowEvent](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NWindowEvent): 窗口事件對象 - [NWindowOption](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NWindowOption): JSON對象，原生窗口設置參數的對象 - [PullToRefreshOption](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.PullToRefreshOption): JSON對象，原生窗口設置參數的對象 - [TimeOption](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.TimeOption): JSON對象，選擇時間界面設置的參數 - [ToastOption](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.ToastOption): JSON對象，系統提示消息框要設置的參數 - [Transform](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.Transform): 一組用于定義頁面或控件變形的屬性，暫不支持 - [Transition](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.Transition): 一組用于定義頁面或控件轉換效果的屬性 ### 回調方法： - [AlertCallback](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.AlertCallback): 系統提示框確認的回調函數 - [ConfirmCallback](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.ConfirmCallback): 系統確認框操作的回調函數 - [PromptCallback](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.PromptCallback): 系統輸入框操作的回調函數 - [ToastCallback](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.ToastCallback): 系統消息框消失時的回調函數 - [PickDatetimeSuccessCallback](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.PickDatetimeSuccessCallback): 選擇日期或時間操作成功的回調函數 - [PickDatetimeErrorCallback](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.PickDatetimeErrorCallback): 選擇日期或時間操作失敗的回調函數 - [MetricsCallback](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.MetricsCallback): 獲取控件或窗口實際度量信息回調函數 - [EventCallback](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.EventCallback): 窗口事件的回調函數 - [HistoryQueryCallback](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.HistoryQueryCallback): 歷史記錄記錄查詢的回調函數 - [PullToRefreshCallback](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.PullToRefreshCallback): 窗口刷新操作的回調函數 ### 權限： permissions ~~~ "UI": { "description": "訪問系統原生窗口" } ~~~ # [alert]() 彈出系統提示框 ~~~ void plus.ui.alert( message, alertCB, title, buttonCapture ); ~~~ ### 說明：彈出系統樣式提示對話框，可設置彈出對話框的標題、內容、按鈕文字。此API非阻塞模式，用戶點擊提示框上的按鈕需通過alertCB回調函數返回。 ### 參數： - message: *( DOMString ) 必選 *提示對話框上顯示的內容 - alertCB: *( [AlertCallback](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.AlertCallback) ) 可選 *點擊提示對話框上按鈕后的回調函數 - title: *( DOMString ) 可選 *提示對話框上顯示的標題 - buttonCapture: *( DOMString ) 必選 *提示對話框上按鈕的名稱 ### 返回值： void : 無 ### 平臺支持： - Android - 2.2+ (支持) - iOS - 4.3+ (支持) ### 示例： ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>UI Example</title> <script type="text/javascript"> // 擴展API加載完畢后調用onPlusReady回調函數 document.addEventListener( "plusready", onPlusReady, false ); // 擴展API加載完畢，現在可以正常調用擴展API function onPlusReady() { // 彈出提示信息框 plus.ui.alert( "Plus is ready!", function () { alert( "User pressed OK!" ); }, "Hell0", "OK" ); } </script> </head> <body> Message notification </body> </html> ~~~ # [closeSplashscreen]() 關閉程序啟動界面 ~~~ void plus.ui.closeSplashscreen(); ~~~ ### 說明：在某些情況下，程序啟動后需要較長時間加載數據，為了避免界面顯示空白內容，提高用戶體驗效果，這時可顯示啟動界面，直到數據加載完成后再關閉啟動界面，通常在應用的首界面加載完成并更新顯示內容后調用。 ### 參數：無 ### 返回值： void : 無 ### 示例： ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>UI Example</title> <script type="text/javascript"> // 擴展API加載完畢后調用onPlusReady回調函數 document.addEventListener( "plusready", onPlusReady, false ); // 擴展API加載完畢，現在可以正常調用擴展API function onPlusReady() { // 頁面內容加載完成，關閉程序啟動界面 plus.ui.closeSplashscreen(); } </script> </head> <body> Message notification </body> </html> ~~~ # [closeWindow]() 關閉原生窗口 ~~~ void plus.ui.closeWindow( win, aniClose, duration ); ~~~ ### 說明：關閉已經打開的原生窗口。 ### 參數： - win: *( DOMString ) 必選 *要關閉的原生窗口可以是窗口對象，也可以是窗口的name值。 - aniClose: *( [AnimationTypeClose](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.AnimationTypeClose) ) 可選 *關閉原生窗口的動畫效果 - duration: *( Number ) 可選 *關閉原生窗口的動畫持續時間單位為ms，默認為窗口show方法設定的動畫時間。 ### 返回值： void : 無 ### 平臺支持： - Android - 2.2+ (支持) - iOS - 4.3+ (支持) ### 示例： ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>UI Example</title> <script type="text/javascript"> // 擴展API加載完畢后調用onPlusReady回調函數 document.addEventListener( "plusready", onPlusReady, false ); // 擴展API加載完畢，現在可以正常調用擴展API function onPlusReady() { } function winAutoClose() { // 打開新窗口 var nw = plus.ui.createWindow( "http://www.baidu.com" ); // 百度主頁 nw.show(); // 顯示窗口 // 十秒后自動關閉 setTimeout( function () { plus.ui.closeWindow( nw ); }, 10000 ); } </script> </head> <body> <input id="create" type="button" value="Open Window And Close" onclick="winAutoClose();"></input> </body> </html> ~~~ # [confirm]() 彈出系統確認對話框 ~~~ void plus.ui.confirm( message, confirmCB, title, buttons ); ~~~ ### 說明：彈出系統樣式確認對話框，可設置彈出對話框的標題、內容、按鈕數目及其文字。彈出的提示對話框為非阻塞模式，用戶點擊確認框上的按鈕通過confirmCB回調函數返回。 ### 參數： - message: *( DOMString ) 必選 *確認對話框上顯示的內容 - confirmCB: *( [ConfirmCallback](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.ConfirmCallback) ) 可選 *點擊確認對話框上按鈕后的回調函數 - title: *( DOMString ) 可選 *確認對話框上顯示的標題 - buttons: *( DOMString[] ) 可選 *確認對話框上顯示的按鈕數組 ### 返回值： void : 無 ### 平臺支持： - Android - 2.2+ (支持) - iOS - 4.3+ (支持) ### 示例： ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>UI Example</title> <script type="text/javascript"> // 擴展API加載完畢后調用onPlusReady回調函數 document.addEventListener( "plusready", onPlusReady, false ); // 擴展API加載完畢，現在可以正常調用擴展API function onPlusReady() { // 彈出提示信息框 plus.ui.confirm( "Are you sure ready?", function ( i ) { alert( (i==0)?"Yes!":"No!" ); }, "Confirm", ["Yes","No"] ); } </script> </head> <body> Message notification </body> </html> ~~~ # [createView]() 創建新的原生控件對象 ~~~ NView plus.ui.createView( identity, options ); ~~~ ### 說明：創建原生窗口顯示元素，用于加載新的顯示元素。可通過options設置原生窗口顯示元素的屬性。 ### 參數： - identity: *( DOMString ) 必選 *新創建顯示元素的標識，需通過原生UI擴展注冊 - options: *( [NViewOption](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NViewOption) ) 可選 *新打開原生窗口顯示元素的參數（如元素寬、高、位置等信息） ### 返回值： [NView](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NView) : NView對象 ### 平臺支持： - Android - 2.2+ (支持) - iOS - 4.3+ (支持) ### 示例： ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>UI Example</title> <script type="text/javascript"> // 擴展API加載完畢后調用onPlusReady回調函數 document.addEventListener( "plusready", onPlusReady, false ); // 擴展API加載完畢，現在可以正常調用擴展API function onPlusReady() { } function createViewTest() { // 打開新窗口 var nv = plus.ui.createView('Navigator',{position:'dock',dock:'top'}); plus.ui.getSelfWindow().append( nv ); // 顯示窗口 } </script> </head> <body> <input id="create" type="button" value="Create New View" onclick="createViewTest();"></input> </body> </html> ~~~ # [createWaiting]() 創建等待對話框 ~~~ NWaiting plus.ui.createWaiting( title, options ); ~~~ ### 說明：在程序中創建并顯示等待對話框。 ### 參數： - title: *( DOMString ) 可選 *等待框上顯示的提示文字 - options: *( [NWaitingOption](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NWaitingOption) ) 可選 *等待框的顯示參數 ### 返回值： [NWaiting](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NWaiting) : NWaiting對象 ### 平臺支持： - Android - 2.2+ (支持) - iOS - 4.3+ (支持) ### 示例： ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>UI Example</title> <script type="text/javascript"> // 擴展API加載完畢后調用onPlusReady回調函數 document.addEventListener( "plusready", onPlusReady, false ); // 擴展API加載完畢，現在可以正常調用擴展API function onPlusReady() { // 打開新窗口 var w = plus.ui.createWaiting( "等待中..." ); } </script> </head> <body> 等待對話框。 </body> </html> ~~~ # [createWindow]() 創建新的原生窗口 ~~~ NWindow plus.ui.createWindow( url, options ); ~~~ ### 說明：創建原生窗口，用于加載新的系統原生窗口。可通過options設置原生窗口的屬性。 ### 參數： - url: *( DOMString ) 必選 *創建窗口要打開的頁面地址新打開原生窗口要加載html頁面地址，可支持本地地址和網絡地址。 - options: *( [NWindowOption](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NWindowOption) ) 可選 *新打開原生窗口的參數（如窗口寬、高、位置等信息） ### 返回值： [NWindow](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NWindow) : NWindow對象 ### 平臺支持： - Android - 2.2+ (支持) - iOS - 4.3+ (支持) ### 示例： ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>UI Example</title> <script type="text/javascript"> // 擴展API加載完畢后調用onPlusReady回調函數 document.addEventListener( "plusready", onPlusReady, false ); // 擴展API加載完畢，現在可以正常調用擴展API function onPlusReady() { } function createWinTest() { // 打開新窗口 var nw = plus.ui.createWindow( "http://www.baidu.com" ); // 百度主頁 nw.show(); // 顯示窗口 } </script> </head> <body> <input id="create" type="button" value="Create New Window" onclick="createWinTest();"></input> </body> </html> ~~~ # [enumWindow]() 枚舉所有原生窗口 ~~~ Array[NWindow] plus.ui.enumWindow(); ~~~ ### 說明：枚舉所有未關閉的原生窗口。返回窗口對象數組中按窗口打開先后順序排列，即數組中第一個窗口對象用通常是應用默認開啟的窗口。 ### 參數：無 ### 返回值： [NWindow](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NWindow) : NWindow數組對象 ### 平臺支持： - Android - 2.2+ (支持) - iOS - 4.3+ (支持) ### 示例： ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>UI Example</title> <script type="text/javascript"> // 擴展API加載完畢后調用onPlusReady回調函數 document.addEventListener( "plusready", onPlusReady, false ); // 擴展API加載完畢，現在可以正常調用擴展API function onPlusReady() { } function enumWindow() { // 打開新窗口 var winary = plus.ui.enumWindow(); var mwin = winary[0]; // 獲取主窗口 alert( "Main URL: " + mwin.url ); } </script> </head> <body> <input id="enum" type="button" value="Enumerate Window" onclick="enumWindow();"></input> </body> </html> ~~~ # [findWindowByName]() 查找指定名稱的窗口 ~~~ NWindow plus.ui.findWindowByName( name ); ~~~ ### 說明：在已打開的窗口列表中查找指定名稱的窗口并返回。若沒有查找到指定名稱的窗口則返回null。對于應用的首頁面，其窗口名稱默認為應用的%APPID%。 ### 參數： - name: *( DOMString ) 必選 *要查找的窗口名稱 ### 返回值： NWindow : NWindow對象 ### 平臺支持： - Android - 2.2+ (支持) - iOS - 4.3+ (支持) ### 示例： ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>UI Example</title> <script type="text/javascript"> // 擴展API加載完畢后調用onPlusReady回調函數 document.addEventListener( "plusready", onPlusReady, false ); // 擴展API加載完畢，現在可以正常調用擴展API function onPlusReady() { // 查找“test”窗口對象 var tw = plus.ui.findWindowByName( "test" ); if ( tw != null ) { alert( "Finded! " ); } // 查找應用首頁窗口對象 var home = plus.ui.findWindowByName( plus.runtime.appid ); } </script> </head> <body> Find "test" Window </body> </html> ~~~ # [getSelfWindow]() 獲取自身窗口 ~~~ NWindow plus.ui.getSelfWindow(); ~~~ ### 說明：獲取當前運行腳本所屬的原生窗口。 ### 參數：無 ### 返回值： [NWindow](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NWindow) : NWindow對象 ### 平臺支持： - Android - 2.2+ (支持) - iOS - 4.3+ (支持) ### 示例： ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>UI Example</title> <script type="text/javascript"> // 擴展API加載完畢后調用onPlusReady回調函數 document.addEventListener( "plusready", onPlusReady, false ); // 擴展API加載完畢，現在可以正常調用擴展API function onPlusReady() { // 打開新窗口 var sw = plus.ui.getSelfWindow(); alert( "I'am: " + sw.url ); } </script> </head> <body> Self Window </body> </html> ~~~ # [isFullscreen]() 判斷應用當前是否全屏模式運行 ~~~ boolean plus.ui.isFullscreen( fullscreen ); ~~~ ### 參數：無 ### 返回值： Boolean : 當應用在全屏模式下運行時返回true，否則返回false。 # [pickDate]() 彈出日期選擇界面 ~~~ void plus.ui.pickDate( successCB, errorCB, options ); ~~~ ### 說明：彈出系統日期選擇界面，用于選擇日期。用戶完成選擇后通過successCB回調函數返回，若用戶取消選擇則通過errorCB回調。 ### 參數： - successCB: *( [PickDatetimeSuccessCallback](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.PickDatetimeSuccessCallback) ) 必選 *日期選擇操作成功的回調函數 - errorCB: *( [PickDatetimeErrorCallback](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.PickDatetimeErrorCallback) ) 可選 *日期選擇操作失敗的回調函數 - options: *( [DateOption](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.DateOption) ) 可選 *日期選擇操作界面的參數 ### 返回值： void : 無 ### 平臺支持： - Android - 2.2+ (支持) - iOS - 4.3+ (支持) ### 示例： ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>UI Example</title> <script type="text/javascript"> // 擴展API加載完畢后調用onPlusReady回調函數 document.addEventListener( "plusready", onPlusReady, false ); // 擴展API加載完畢，現在可以正常調用擴展API function onPlusReady() { // 輸入提示信息框 plus.ui.pickDate( function ( d ) { alert( d.getFullYear() + "-" + (d.getMonth()+1) + "-" + d.getDate() ); }, function ( e ) { }, {startYear:2010,endYear:} ); } </script> </head> <body> Pick Date </body> </html> ~~~ # [pickTime]() 彈出時間選擇界面 ~~~ void plus.ui.pickTime( successCB, errorCB, options ); ~~~ ### 說明：彈出系統時間選擇界面，用于選擇時間。用戶完成選擇后通過successCB回調函數返回，若用戶取消選擇則通過errorCB回調。 ### 參數： - successCB: *( [PickDatetimeSuccessCallback](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.PickDatetimeSuccessCallback) ) 必選 *時間選擇操作成功的回調函數 - errorCB: *( [PickDatetimeErrorCallback](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.PickDatetimeErrorCallback) ) 可選 *時間選擇操作失敗的回調函數 - options: *( [TimeOption](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.TimeOption) ) 可選 *時間選擇操作界面的參數 ### 返回值： void : 無 ### 平臺支持： - Android - 2.2+ (支持) - iOS - 4.3+ (支持) ### 示例： ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>UI Example</title> <script type="text/javascript"> // 擴展API加載完畢后調用onPlusReady回調函數 document.addEventListener( "plusready", onPlusReady, false ); // 擴展API加載完畢，現在可以正常調用擴展API function onPlusReady() { // 輸入提示信息框 plus.ui.pickTime( function ( d ) { alert( d.getHours()() + ":" + d.getMinutes() ); }, function ( e ) { alert( "Pick time error: " + e.message ); }, {is24Hour:true} ); } </script> </head> <body> Pick time </body> </html> ~~~ # [prompt]() 彈出系統輸入框 ~~~ void plus.ui.confirm( message, promptCB, title, tip, buttons ); ~~~ ### 說明：彈出系統樣式輸入對話框，可設置彈出對話框的標題、內容、提示輸入信息、按鈕數目及其文字。彈出的提示對話框為非阻塞模式，用戶點擊確認框上的按鈕通過promptCB回調函數返回。 ### 參數： - message: *( DOMString ) 必選 *輸入對話框上顯示的內容 - promptCB: *( [PromptCallback](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.PromptCallback) ) 可選 *點擊輸入對話框上按鈕后的回調函數 - title: *( DOMString ) 可選 *輸入對話框上顯示的標題 - tip: *( DOMString ) 可選 *輸入對話框上顯示的提示文字 - buttons: *( DOMString[] ) 可選 *輸入對話框上顯示的按鈕數組 ### 返回值： void : 無 ### 平臺支持： - Android - 2.2+ (支持) - iOS - 4.3+ (支持) ### 示例： ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>UI Example</title> <script type="text/javascript"> // 擴展API加載完畢后調用onPlusReady回調函數 document.addEventListener( "plusready", onPlusReady, false ); // 擴展API加載完畢，現在可以正常調用擴展API function onPlusReady() { // 輸入提示信息框 plus.ui.confirm( "Please input your name:", function ( i, v ) { alert( (i==0)?"Name:"+v:"No input!" ); }, "Input", ["Yes","No"] ); } </script> </head> <body> Message notification </body> </html> ~~~ # [setFullscreen]() 設置應用是否全屏模式運行 ~~~ void plus.ui.setFullscreen( fullscreen ); ~~~ ### 說明：當應用在全屏模式下運行時，將隱藏系統狀態欄。通常游戲類應用在這種模式下運行。 ### 參數： - fullscreen: *( Boolean ) 必選 *是否全屏模式運行，true表示全屏模式運行，false表示非全屏模式運行 ### 返回值： void : 無 # [toast]() 顯示自動消失的消息 ~~~ void plus.ui.toast( message, options ); ~~~ ### 說明：彈出系統樣式提示消息框。彈出的提示對話框為非阻塞模式，顯示指定時間后自動消失。 ### 參數： - message: *( DOMString ) 必選 *提示消息框上顯示的文字內容 - options: *( [ToastOption](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.ToastOption) ) 可選 *提示消息框的設置參數 ### 返回值： void : 無 ### 平臺支持： - Android - 2.2+ (支持) - iOS - 4.3+ (支持) ### 示例： ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>UI Example</title> <script type="text/javascript"> // 擴展API加載完畢后調用onPlusReady回調函數 document.addEventListener( "plusready", onPlusReady, false ); // 擴展API加載完畢，現在可以正常調用擴展API function onPlusReady() { // 輸入提示信息框 plus.ui.toast( "I'am toast information!", {duration:"long"} ); } </script> </head> <body> Message notification </body> </html> ~~~ # [AnimationTypeShow]() 一組用于定義頁面或控件顯示動畫效果 ### 常量： - "none": *(DOMString 類型 )*無動畫效果立即顯示頁面，無任何動畫效果，頁面顯示默認的動畫效果。對應關閉動畫"none"。 ### 平臺支持 - Android - 2.2+ (支持) - iOS - 4.3+ (支持) - "slide-in-right": *(DOMString 類型 )*從右側橫向滑動效果頁面從屏幕右側外向內橫向滑動顯示。對應關閉動畫"slide-out-right"。 ### 平臺支持 - Android - 2.2+ (支持) - iOS - 4.3+ (支持) - "slide-in-left": *(DOMString 類型 )*從上側豎向滑動效果頁面從屏幕上側向內豎向滑動顯示。對應關閉動畫"slide-out-top"。 ### 平臺支持 - Android - 2.2+ (支持) - iOS - 4.3+ (支持) - "slide-in-bottom": *(DOMString 類型 )*從下側豎向滑動效果頁面從屏幕下側向內豎向滑動顯示。對應關閉動畫"slide-out-bottom"。 ### 平臺支持 - Android - 2.2+ (支持) - iOS - 4.3+ (支持) - "fade-in": *(DOMString 類型 )*從透明到不透明逐漸顯示效果頁面從完全透明到不透明逐漸顯示。對應關閉動畫"fade-out"。 ### 平臺支持 - Android - 2.2+ (支持) - iOS - 4.3+ (支持) - "zoom-out": *(DOMString 類型 )*從小到大逐漸放大顯示效果頁面在屏幕中間從小到大逐漸放大顯示。對應關閉動畫"zoom-in"。 ### 平臺支持 - Android - 2.2+ (支持) - iOS - 4.3+ (支持) - "flip-x": *(DOMString 類型 )*以x軸從上到下翻轉效果頁面以x軸從上到下翻轉顯示。對應關閉動畫"flip-rx"。 ### 平臺支持 - Android - 2.2+ (支持) - iOS - 4.3+ (支持) - "flip-rx": *(DOMString 類型 )*以x軸從下到上翻轉轉效果頁面以x軸從下到上翻轉顯示。對應關閉動畫"flip-x"。 ### 平臺支持 - Android - 2.2+ (支持) - iOS - 4.3+ (支持) - "flip-y": *(DOMString 類型 )*以y軸從左到右翻轉效果頁面以y軸從左到右翻轉顯示。對應關閉動畫"flip-ry"。 ### 平臺支持 - Android - 2.2+ (支持) - iOS - 4.3+ (支持) - "flip-ry": *(DOMString 類型 )*以y軸從右到左翻轉效果頁面以y軸從右到左翻轉顯示。對應關閉動畫"flip-y"。 ### 平臺支持 - Android - 2.2+ (支持) - iOS - 4.3+ (支持) - "page-forward": *(DOMString 類型 )*向前翻書動畫效果頁面以向前翻書動畫顯示，翻書后顯示新打開的頁面。對應關閉動畫"page-backward"。 ### 平臺支持 - Android - 2.2+ (支持) - iOS - 4.3+ (支持) # [AnimationTypeClose]() 一組用于定義頁面或控件關閉的動畫效果 ### 常量： - "none": *(DOMString 類型 )*無動畫立即關閉頁面，無任何動畫效果。 ### 平臺支持 - Android - 2.2+ (支持) - iOS - 4.3+ (支持) - "slide-out-right": *(DOMString 類型 )*橫向向右側滑出屏幕動畫頁面從屏幕中橫向向右側滑動到屏幕外關閉。 ### 平臺支持 - Android - 2.2+ (支持) - iOS - 4.3+ (支持) - "slide-out-left": *(DOMString 類型 )*橫向向左側滑出屏幕動畫頁面從屏幕中橫向向左側滑動到屏幕外關閉。 ### 平臺支持 - Android - 2.2+ (支持) - iOS - 4.3+ (支持) - "slide-out-top": *(DOMString 類型 )*豎向向上側滑出屏幕動畫頁面從屏幕中豎向向上側滑動到屏幕外關閉。 ### 平臺支持 - Android - 2.2+ (支持) - iOS - 4.3+ (支持) - "slide-out-bottom": *(DOMString 類型 )*豎向向下側滑出屏幕動畫頁面從屏幕中豎向向下側滑動到屏幕外關閉。 ### 平臺支持 - Android - 2.2+ (支持) - iOS - 4.3+ (支持) - "fade-out": *(DOMString 類型 )*從不透明到透明逐漸隱藏動畫頁面從不透明到透明逐漸隱藏關閉。 ### 平臺支持 - Android - 2.2+ (支持) - iOS - 4.3+ (支持) - "zoom-in": *(DOMString 類型 )*從大逐漸縮小關閉動畫頁面逐漸向頁面中心縮小關閉。 ### 平臺支持 - Android - 2.2+ (支持) - iOS - 4.3+ (支持) - "flip-x": *(DOMString 類型 )*以x軸從上到下翻轉動畫頁面以x軸從上到下翻轉關閉，翻轉后顯示以前顯示的頁面。 ### 平臺支持 - Android - 2.2+ (支持) - iOS - 4.3+ (支持) - "flip-rx": *(DOMString 類型 )*以x軸從下到上翻轉轉動畫頁面以x軸從下到上翻轉關閉，翻轉后顯示以前顯示的頁面。 ### 平臺支持 - Android - 2.2+ (支持) - iOS - 4.3+ (支持) - "flip-y": *(DOMString 類型 )*以y軸從左到右翻轉動畫頁面以y軸從左到右翻轉關閉，翻轉后顯示以前顯示的頁面。 ### 平臺支持 - Android - 2.2+ (支持) - iOS - 4.3+ (支持) - "flip-ry": *(DOMString 類型 )*以y軸從右到左翻轉動畫頁面以y軸從右到左翻轉關閉，翻轉后顯示以前顯示的頁面。 ### 平臺支持 - Android - 2.2+ (支持) - iOS - 4.3+ (支持) - "page-backward": *(DOMString 類型 )*向后翻書動畫頁面以向后翻書動畫關閉，翻書后顯示以前顯示的頁面。 ### 平臺支持 - Android - 2.2+ (支持) - iOS - 4.3+ (支持) # [DateOption]() JSON對象，選擇日期界面設置的參數 ### 屬性： - title: *(DOMString 類型 )*日期選擇界面的標題默認標題為當前的日期。 - date: *(DOMDate 類型 )*日期選擇界面默認顯示的日期默認值為當前的日期。 - startYear: *(Number 類型 )*日期選擇界面起始的年份數字類型，如“1940”。 - endYear: *(Number 類型 )*日期選擇界面結束的年份數字類型，如“2024”，其值必須大于startYear，否則取系統默認值。 - minDate: *(DOMDate 類型 )*日期選擇界面顯示的最小日期日期類型對象，其優先級高于startYear屬性。 - maxDate: *(DOMDate 類型 )*日期選擇界面顯示的最大日期日期類型對象，其值必須大于startYear，否則取系統默認值，優先級高于endYear屬性。 - popover: *(JSON 類型 )*時間日期選擇界面彈出指示區域 JSON類型對象，格式如{top:10;left:10;width:200;height:200;}，所有值為像素值，左上坐標相對于容器webview的位置。如未設置此值，默認在屏幕居中顯示。僅在iPad上有效。 # [Metrics]() JSON對象，窗口實際度量信息 ### 屬性： - height: *(Number 類型 )*絕對像素值，窗口的高度 - left: *(Number 類型 )*絕對像素值，相對于屏幕或父容器左側的偏移量 - top: *(Number 類型 )*絕對像素值，相對于屏幕或父容器上側的偏移量 - width: *(Number 類型 )*絕對像素值，窗口的寬度 # [NView]() 原生控件對象，用于操作頁面中顯示的原生控件 ### 方法： - [getMetrics](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NView.getMetrics): 獲取窗口實際度量信息 # [getMetrics]() 獲取窗口實際度量信息 ~~~ vobj.getMetrics( callback ); ~~~ ### 說明：用于獲取原生控件的度量信息，包括控件的位置、大小等信息。獲取成功后通過callback回調返回。 ### 參數： - callback: *( [MetricsCallback](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.MetricsCallback) ) 必選 *獲取度量信息的回調函數 ### 返回值： void : 無 ### 示例： ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>UI Example</title> <script type="text/javascript"> var vobj = null; // 擴展API加載完畢后調用onPlusReady回調函數 document.addEventListener( "plusready", onPlusReady, false ); // 擴展API加載完畢，現在可以正常調用擴展API function onPlusReady() { var nv = plus.ui.createView( "navigator", {top:"0px",width:"100%",height:"50px"} ); plus.ui.getSelfWindow().append( nv ); // 顯示窗口 } function metricsTest() { // 獲取控件信息 nv.getMetrics( function ( m ) { alert( "Left: " + m.left + "\n Top: " + m.top ); } ); } </script> </head> <body> <input id="visible" type="button" value="View Metrics" onclick="metricsTest();"></input> </body> </html> ~~~ # [NViewDock]() 原生控件在窗口中停靠的方式 ### 常量： - "top": *(DOMString 類型 )*控件停靠則頁面頂部 - "bottom": *(DOMString 類型 )*控件停靠在頁面中底部 - "right": *(DOMString 類型 )*控件停靠在頁面右側 - "left": *(DOMString 類型 )*控件停靠在頁面左側 # [NViewOption]() JSON對象，原生控件元素要設置的參數 ### 屬性： - id: *(DOMString 類型 )*控件的標識 - top: *(DOMString 類型 )*控件在所屬窗口垂直向下的偏移量，可設置像素值或百分比，默認值為0px - left: *(DOMString 類型 )*控件在所屬窗口水平向右的偏移量，可設置像素值或百分比，默認值為0px - width: *(DOMString 類型 )*控件的寬度，可設置像素值或百分比，默認為控件內部計算的高度（參考擴展自定義控件） - height: *(DOMString 類型 )*控件的高度，可設置像素值或百分比，默認為控件內部計算的高度（參考擴展自定義控件） - position: *([NViewPosition](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NViewPosition) 類型 )*控件的排版位置，默認值為"static" - dock: *([NViewDock](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NViewDock) 類型 )*控件的停靠方式，默認值為"top" # [NViewPosition]() 原生控件在窗口中顯示的位置 ### 常量： - "static": *(DOMString 類型 )*控件在頁面中正常定位，如果頁面存在滾動條則隨窗口內容滾動 - "absolute": *(DOMString 類型 )*控件在頁面中絕對定位，如果頁面存在滾動條不隨窗口內容滾動 - "dock": *(DOMString 類型 )*控件在頁面中停靠，停靠的位置通過dock屬性進行定義 # [NWaiting]() NWaiting是等待控件對象，用于在界面中顯示原生等待窗口 ### 方法： - [setTitle](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NWaiting.setTitle): 設置等待控件上顯示的文字 - [close](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NWaiting.close): 關閉等待控件 ### 事件： - [onclose](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NWaiting.onclose): 關閉等待控件事件 # [setTitle]() 設置等待控件上顯示的文字 ~~~ wobj.setTitle( title ); ~~~ ### 說明：設置等待框上顯示的文字信息，設置后文字內容將立即更新。 ### 參數： - title: *( DOMString ) 必選 *要設置的文本信息 ### 返回值： void : 無 ### 示例： ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>UI Example</title> <script type="text/javascript"> // 擴展API加載完畢后調用onPlusReady回調函數 document.addEventListener( "plusready", onPlusReady, false ); var w = null; // 擴展API加載完畢，現在可以正常調用擴展API function onPlusReady() { w = plus.ui.createWaiting("請稍后"); setTimeout( function() { w.setTitle( "正在更新" ); }, 2000 ); setTimeout( function() { w.close(); }, 4000 ); } </script> </head> <body> </body> </html> ~~~ # [close]() 關閉等待控件 ~~~ wobj.close(); ~~~ ### 說明：將原生等待控件關閉。一個等待控件只能關閉一次，多次調用將無任何作用。 ### 參數：無 ### 返回值： void : 無 ### 示例： ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>UI Example</title> <script type="text/javascript"> // 擴展API加載完畢后調用onPlusReady回調函數 document.addEventListener( "plusready", onPlusReady, false ); var w = null; // 擴展API加載完畢，現在可以正常調用擴展API function onPlusReady() { w = plus.ui.createWaiting("請稍后"); } function closeWaiting() { if ( w == null ) { alert( "未創建等待框" ); } else { w.close(); } } </script> </head> <body> <input id="create" type="button" value="Close Waiting" onclick="closeWaiting();"></input> </body> </html> ~~~ # [onclose]() 關閉等待控件事件 ~~~ wobj.onclose = function () { alert( "Closed!" ); }; ~~~ ### 說明： function 類型等待框關閉時觸發。當調用close方法或用戶點擊操作導致等待框關閉時觸發。 ### 示例： ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>UI Example</title> <script type="text/javascript"> // 擴展API加載完畢后調用onPlusReady回調函數 document.addEventListener( "plusready", onPlusReady, false ); var w = null; // 擴展API加載完畢，現在可以正常調用擴展API function onPlusReady() { w = plus.ui.createWaiting("請稍后"); w.onclose = function () { alert( "Closed!!" ); } } function closeWaiting() { if ( w == null ) { alert( "未創建等待框" ); } else { w.close(); } } </script> </head> <body> <input id="create" type="button" value="Close Waiting" onclick="closeWaiting();"></input> </body> </html> ~~~ # [NWaitingOption]() JSON對象，原生等待控件要設置的參數 ### 屬性： - width: *(DOMString 類型 )*等待框背景區域的寬度，默認根據內容自動計算 - height: *(DOMString 類型 )*等待框背景區域的高度，默認根據內容自動計算 - color: *(DOMString 類型 )*等待框中文字的顏色顏色值支持(參考CSS顏色規范)：顏色名稱(參考CSS Color Names)/十六進制值/rgb值/rgba值，默認值為白色。 - textalign: *(DOMString 類型 )*等待框中的文字的水平對齊方式對齊方式可選值包括："left"：水平居左對齊顯示，"center"：水平居中對齊顯示，"right"：水平居右對齊顯示。默認值為水平居中對齊顯示。 - padding: *(DOMString 類型 )*等待框的內邊距支持像素值和百分比，百分比相對于屏幕的寬計算，默認值為"3%"。 - background: *(DOMString 類型 )*等待框顯示區域的背景色背景色的值支持(參考CSS顏色規范)：顏色名稱(參考CSS Color Names)/十六進制值/rgb值/rgba值，默認值為rgba(0,0,0,0.8)。 - style: *(DOMString 類型 )*等待框樣式，可取值"black"、"white" black表示等待框為黑色雪花樣式，通常在背景主色為淺色時使用；white表示等待框為白色雪花樣式，通常在背景主色為深色時使用；僅在iOS平臺有效，其它平臺忽略此值，默認值為white。 ### 平臺支持 - Android - (不支持): 此屬性不產生任何效果 - iOS - 4.5+ (支持): 支持"black"、"white"兩種樣式 - modal: *(Boolen 類型 )*等待框是否模態顯示模態顯示則用戶不可操作直到等待框關閉，否則用戶在等待框顯示時也可操作，默認為true。 - round: *(Number 類型 )*等待框顯示區域的圓角，默認值為10px - padlock: *(Boolen 類型 )*點擊等待顯示區域是否自動關閉，默認值為false # [NWindow]() NWindow是窗口對象，用于操作加載html頁面的原生窗口 ### 方法： - [addEventListener](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NWindow.addEventListener): 添加事件監聽器 - [append](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NWindow.append): 在窗口中添加原生界面控件 - [appendPreloadJsFile](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NWindow.appendPreloadJsFile): 添加頁面預先加載的js文件 - [back](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NWindow.back): 窗口后退到上次加載的頁面內容 - [canBack](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NWindow.canBack): 查詢窗口是否可后退到上次加載的頁面內容 - [canForward](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NWindow.canForward): 查詢窗口是否可前進到上次加載的頁面內容 - [clear](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NWindow.clear): 清空原生窗口加載的內容 - [close](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NWindow.close): 關閉創建新的原生窗口 - [endPullToRefresh](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NWindow.endPullToRefresh): 關閉原生窗口刷新狀態 - [evalJS](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NWindow.evalJS): 在窗口中執行腳本 - [findViewById](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NWindow.findViewById): 在界面中通過id查找控件對象 - [forward](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NWindow.forward): 窗口前進到上次加載的頁面內容 - [getMetrics](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NWindow.getMetrics): 獲取窗口實際度量信息 - [getOption](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NWindow.getOption): 獲取窗口當前的屬性值 - [getTitle](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NWindow.getTitle): 獲取窗口加載頁面的標題 - [getUrl](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NWindow.getUrl): 獲取窗口加載頁面的地址 - [load](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NWindow.load): 窗口加載新的頁面 - [reload](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NWindow.reload): 重新加載窗口當前顯示的頁面 - [removeEventListener](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NWindow.removeEventListener): 移除事件監聽器 - [setContentVisible](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NWindow.setContentVisible): 設置頁面內容是否可見 - [setOption](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NWindow.setOption): 設置原生窗口的參數 - [setPreloadJsFile](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NWindow.setPreloadJsFile): 設置頁面預先加載的js文件 - [setPullToRefresh](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NWindow.setPullToRefresh): 設置窗口的下拉刷新功能 - [setVisible](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NWindow.setVisible): 設置窗口是否可見 - [show](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NWindow.show): 顯示創建新的原生窗口 - [stop](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NWindow.stop): 窗口停止加載頁面內容 # [addEventListener]() 添加事件監聽器 ~~~ wobj.addEventListener( event, listener, capture ); ~~~ ### 說明：為窗口添加事件監聽器，當指定的窗口事件發生時，回調函數將觸發。可多次調用為同一事件添加多個監聽器，觸發時按照添加的順序先后調用。 ### 參數： - event: *( [NWindowEvent](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NWindowEvent) ) 必選 *要監聽的事件類型 - listener: *( [EventCallback](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.EventCallback) ) 必選 *監聽的事件發生時調用的回調函數 - capture: *( Boolean ) 可選 *捕獲事件流順序，暫無效果 ### 返回值： void : 無 ### 示例： ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>UI Example</title> <script type="text/javascript"> // 擴展API加載完畢后調用onPlusReady回調函數 document.addEventListener( "plusready", onPlusReady, false ); // 擴展API加載完畢，現在可以正常調用擴展API function onPlusReady() { } function eventTest() { // 打開新窗口 var nw = plus.ui.createWindow( "http://www.test.com" ); nw.addEventListener( "loaded", function () { alert( "New Window loaded!" ); }, false ); nw.show(); // 顯示窗口 } </script> </head> <body> <input id="event" type="button" value="Window Event" onclick="eventTest();"></input> </body> </html> ~~~ # [append]() 在窗口中添加原生界面控件 ~~~ void wobj.append( view ); ~~~ ### 說明：將原生控件添加到界面中，隨界面一起顯示。控件只能添加到一個界面中，多次調用將無任何作用。 ### 參數： - view: *( [NView](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NView) ) 必選 *要添加的控件對象，需通過createView創建 ### 返回值： void : 無 ### 示例： ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>UI Example</title> <script type="text/javascript"> // 擴展API加載完畢后調用onPlusReady回調函數 document.addEventListener( "plusready", onPlusReady, false ); // 擴展API加載完畢，現在可以正常調用擴展API function onPlusReady() { } function createViewTest() { // 創建控件 var nv = plus.ui.createView( "navigator" ); plus.ui.getSelfWindow().append( nv ); // 顯示控件 } </script> </head> <body> <input id="create" type="button" value="Create New View" onclick="createViewTest();"></input> </body> </html> ~~~ # [appendPreloadJsFile]() 添加頁面預先加載的js文件 ~~~ wobj.appendPreloadJsFile( file ); ~~~ ### 說明：添加頁面加載時需要預先執行的js文件，以完成特殊的頁面處理。在窗口頁面跳轉時也需要執行，添加多個js文件后將按照添加的先后順序執行。 ### 參數： - file: *( DOMString ) 必選 *要預先載入的js文件地址，僅支持本地文件 ### 返回值： void : 無 # [back]() 窗口后退到上次加載的頁面內容 ~~~ void wobj.back(); ~~~ ### 說明：窗口歷史記錄操作，后退到窗口上次加載的頁面內容。如果窗口歷史記錄中沒有可后退的頁面則不觸發任何操作。 ### 參數：無 ### 返回值： void : 無 ### 示例： ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>UI Example</title> <script type="text/javascript"> // 擴展API加載完畢后調用onPlusReady回調函數 document.addEventListener( "plusready", onPlusReady, false ); // 擴展API加載完畢，現在可以正常調用擴展API function onPlusReady() { // Plus API } function goBack() { var nw = plus.ui.getSelfWindow(); nw.back(); } </script> </head> <body> <button onclick="goBack();">返回</input> </body> </html> ~~~ # [canBack]() 查詢窗口是否可后退到上次加載的頁面內容 ~~~ void wobj.canBack( queryCallback ); ~~~ ### 說明：窗口歷史記錄操作，查詢是否可后退到窗口上次加載的頁面內容。查詢成功將通過queryCallback回調方法返回結果。 ### 參數： - queryCallback: *( [HistoryQueryCallback](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.HistoryQueryCallback) ) 必選 *歷史記錄查詢操作回調函數 ### 返回值： void : 無 ### 示例： ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>UI Example</title> <script type="text/javascript"> // 擴展API加載完畢后調用onPlusReady回調函數 document.addEventListener( "plusready", onPlusReady, false ); // 擴展API加載完畢，現在可以正常調用擴展API function onPlusReady() { // Plus API } function queryBack() { var nw = plus.ui.getSelfWindow(); nw.canBack( function ( able ) { if ( able ) { alert( "可以后退" ); } else { alert( "無法后退" ); } } ); } </script> </head> <body> <button onclick="queryBack();">是否可后退</input> </body> </html> ~~~ # [canForward]() 查詢窗口是否可前進到上次加載的頁面內容 ~~~ void wobj.canForward( queryCallback ); ~~~ ### 說明：窗口歷史記錄操作，查詢是否可前進到窗口上次加載的頁面內容。查詢成功將通過queryCallback回調方法返回結果。 ### 參數： - queryCallback: *( [HistoryQueryCallback](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.HistoryQueryCallback) ) 必選 *歷史記錄查詢操作回調函數 ### 返回值： void : 無 ### 示例： ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>UI Example</title> <script type="text/javascript"> // 擴展API加載完畢后調用onPlusReady回調函數 document.addEventListener( "plusready", onPlusReady, false ); // 擴展API加載完畢，現在可以正常調用擴展API function onPlusReady() { // Plus API } function queryForward() { var nw = plus.ui.getSelfWindow(); nw.canForward( function ( able ) { if ( able ) { alert( "可以前進" ); } else { alert( "無法前進" ); } } ); } </script> </head> <body> <button onclick="queryForward();">是否可前進</input> </body> </html> ~~~ # [clear]() 清空原生窗口加載的內容 ~~~ void wobj.clear(); ~~~ ### 說明：清除原生窗口的內容，用于重置重置原生窗口加載的內容，清除其加載的歷史記錄等內容。 ### 參數：無 ### 返回值： void : 無 ### 示例： ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>UI Example</title> <script type="text/javascript"> // 擴展API加載完畢后調用onPlusReady回調函數 document.addEventListener( "plusready", onPlusReady, false ); // 擴展API加載完畢，現在可以正常調用擴展API function onPlusReady() { } function clearWin() { // 清除自身窗口 var nw = plus.ui.getSelfWindow(); nw.clear(); } </script> </head> <body> <input id="close" type="button" value="Clear Window" onclick="clearWin();"></input> </body> </html> ~~~ # [close]() 關閉創建新的原生窗口 ~~~ void wobj.close( aniClose, duration ); ~~~ ### 說明：關閉原生窗口，用于銷毀創建的系統原生窗口。原生窗口窗口只能關閉一次，關閉窗口后不可再操作窗口對象，操作后將無任何效果。窗口關閉時默認會使用窗口打開時設置的相反動畫效果，也可通過aniClose設置原生窗口關閉動畫，僅能使用動畫類型中的關閉動畫效果。 ### 參數： - aniClose: *( [AnimationTypeClose](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.AnimationTypeClose) ) 可選 *關閉原生窗口的動畫效果 - duration: *( Number ) 可選 *關閉原生窗口的動畫持續時間單位為ms，默認為窗口show方法設定的動畫時間。 ### 返回值： void : 無 ### 示例： ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>UI Example</title> <script type="text/javascript"> // 擴展API加載完畢后調用onPlusReady回調函數 document.addEventListener( "plusready", onPlusReady, false ); // 擴展API加載完畢，現在可以正常調用擴展API function onPlusReady() { } function closeWin() { // 關閉自身窗口 var nw = plus.ui.getSelfWindow(); nw.close(); // 關閉窗口 } </script> </head> <body> <input id="close" type="button" value="Close Window" onclick="closeWin();"></input> </body> </html> ~~~ # [endPullToRefresh]() 關閉原生窗口刷新狀態 ~~~ void wobj.endPullToRefresh(); ~~~ ### 說明：通過setPullToRefresh方法可開啟窗口的下拉刷新功能，當用戶操作觸發刷新回調事件后，可以通過此方法關閉窗口的刷新狀態。關閉刷新狀態后，用于依然可以通過下拉操作繼續觸發刷新事件。 ### 參數：無 ### 返回值： void : 無 ### 平臺支持： - Android - 2.2+ (支持) - iOS - 4.5+ (不支持): 暫不支持，建議通過web技術實現 ### 示例： ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>UI Example</title> <script type="text/javascript"> // 擴展API加載完畢后調用onPlusReady回調函數 document.addEventListener( "plusready", onPlusReady, false ); // 擴展API加載完畢，現在可以正常調用擴展API function onPlusReady() { } function closeWin() { // 關閉自身窗口 var nw = plus.ui.getSelfWindow(); nw.close(); // 關閉窗口 } </script> </head> <body> <input id="close" type="button" value="Close Window" onclick="closeWin();"></input> </body> </html> ~~~ # [evalJS]() 在窗口中執行腳本 ~~~ void wobj.evalJS( js ); ~~~ ### 說明：可在窗口中運行腳本，實現跨窗口間的數據操作。 ### 參數： - options: *( DOMString ) 必選 *要在窗口中運行的腳本 ### 返回值： void : 無 ### 示例： ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>UI Example</title> <script type="text/javascript"> // 擴展API加載完畢后調用onPlusReady回調函數 document.addEventListener( "plusready", onPlusReady, false ); // 擴展API加載完畢，現在可以正常調用擴展API function onPlusReady() { } function evalJSTest() { // 查找到只指定的界面 var nw = plus.ui.findWindowByName( "test" ); nw.evalJS( "var bt = document.getElementById('bt'); bt.value='NewValue';" ); } </script> </head> <body> <input id="evaljs" type="button" value="Eval JS" onclick="evalJSTest();"></input> </body> </html> ~~~ # [findViewById]() 在界面中通過id查找控件對象 ~~~ void wobj.findViewById( id ); ~~~ ### 說明：在當前界面中查找控件對象，并返回控件對象的引用。其中控件的id在創建時通過NViewOption中的id字段設置。如果沒有找到則返回null ### 參數： - id: *( DOMString ) 必選 *要查找控件的id值 ### 返回值： NView : 無 ### 示例： ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>UI Example</title> <script type="text/javascript"> // 擴展API加載完畢后調用onPlusReady回調函數 document.addEventListener( "plusready", onPlusReady, false ); // 擴展API加載完畢，現在可以正常調用擴展API var sw = null; function onPlusReady() { sw = plus.ui.getSelfWindow(); // 創建控件 var nv = plus.ui.createView( "navigator", {id:"nav"} ); sw.append( nv ); // 顯示控件 } var fnv = null; function findTest() { fnv = sw.findViewById( "nav" ); // 可通過fnv對象操作導航控件 } </script> </head> <body> <input id="visible" type="button" value="Window Visible" onclick="visibleTest();"></input> </body> </html> ~~~ # [forward]() 窗口前進到上次加載的頁面內容 ~~~ void wobj.forward(); ~~~ ### 說明：窗口歷史記錄操作，前進到窗口上次加載的頁面內容。如果窗口歷史記錄中沒有可前進的頁面則不觸發任何操作。 ### 參數：無 ### 返回值： void : 無 ### 示例： ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>UI Example</title> <script type="text/javascript"> // 擴展API加載完畢后調用onPlusReady回調函數 document.addEventListener( "plusready", onPlusReady, false ); // 擴展API加載完畢，現在可以正常調用擴展API function onPlusReady() { // Plus API } function goForward() { var nw = plus.ui.getSelfWindow(); nw.forward(); } </script> </head> <body> <button onclick="goForward();">返回</input> </body> </html> ~~~ # [getMetrics]() 獲取窗口實際度量信息 ~~~ void wobj.getMetrics( callback ); ~~~ ### 說明：用于獲取窗口實際度量信息，包括窗口的位置、大小等信息。獲取度量信息成功后通過callback回調返回。/隱藏，再次調用顯示/隱藏則無任何作用。 ### 參數： - callback: *( [MetricsCallback](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.MetricsCallback) ) 必選 *獲取度量信息的回調函數 ### 返回值： void : 無 ### 示例： ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>UI Example</title> <script type="text/javascript"> // 擴展API加載完畢后調用onPlusReady回調函數 document.addEventListener( "plusready", onPlusReady, false ); // 擴展API加載完畢，現在可以正常調用擴展API function onPlusReady() { } function metricsTest() { // 獲取窗口信息 var sw = plus.ui.getSelfWindow(); sw.getMetrics( function ( m ) { alert( "Left: " + m.left + "\n Top: " + m.top ); } ); } </script> </head> <body> <input id="visible" type="button" value="Window Metrics" onclick="metricsTest();"></input> </body> </html> ~~~ # [getOption]() 獲取窗口當前的屬性值 ~~~ NWindowOption wobj.getOption(); ~~~ ### 說明：獲取原生窗口的屬性，如窗口位置、大小等信息。 ### 參數：無 ### 返回值： [NWindowOption](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NWindowOption) : NWindowOption對象 ### 示例： ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>UI Example</title> <script type="text/javascript"> // 擴展API加載完畢后調用onPlusReady回調函數 document.addEventListener( "plusready", onPlusReady, false ); // 擴展API加載完畢，現在可以正常調用擴展API function onPlusReady() { } function optionTest() { var nw = plus.ui.getSelfWindow(); alert( nw.getOption().left ); } </script> </head> <body> <input id="option" type="button" value="Get Window Left" onclick="optionTest();"></input> </body> </html> ~~~ # [getTitle]() 獲取窗口加載頁面的標題 ~~~ DOMString wobj.getTitle(); ~~~ ### 說明：標題為窗口加載的html頁面head節點下title節點中的文本內容，當窗口內容發生頁面內跳轉時可通過窗口觸發的“loaded”事件中調用此方法來獲取跳轉后頁面的標題。如果頁面中午title節點則返回空字符串。 ### 參數：無 ### 返回值： DOMString : 窗口加載頁面的標題 ### 示例： ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>UI Example</title> <script type="text/javascript"> // 擴展API加載完畢后調用onPlusReady回調函數 document.addEventListener( "plusready", onPlusReady, false ); // 擴展API加載完畢，現在可以正常調用擴展API function onPlusReady() { } function test() { // 打開新窗口 var nw = plus.ui.createWindow( "http://www.baidu.com" ); nw.addEventListener( "loaded", function () { alert( "標題："+nw.getTitle() ); }, false ); nw.show(); // 顯示窗口 } </script> </head> <body> <button onclick="test()">打開新頁面</button> </body> </html> ~~~ # [getUrl]() 獲取窗口加載頁面的地址 ~~~ DOMString wobj.getUrl(); ~~~ ### 說明：當窗口內容發生頁面內跳轉時可通過窗口觸發的“loaded”事件中調用此方法來獲取跳轉后頁面的地址。 ### 參數：無 ### 返回值： DOMString : 窗口加載頁面的地址 ### 示例： ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>UI Example</title> <script type="text/javascript"> // 擴展API加載完畢后調用onPlusReady回調函數 document.addEventListener( "plusready", onPlusReady, false ); // 擴展API加載完畢，現在可以正常調用擴展API function onPlusReady() { } function test() { // 打開新窗口 var nw = plus.ui.createWindow( "http://www.baidu.com" ); nw.addEventListener( "loaded", function () { alert( "跳轉地址："+nw.getUrl() ); }, false ); nw.show(); // 顯示窗口 } </script> </head> <body> <button onclick="test()">打開新頁面</button> </body> </html> ~~~ # [load]() 窗口加載新的頁面 ~~~ void wobj.load( url ); ~~~ ### 說明：觸發原生窗口加載新的頁面地址。如果新設置的url地址無效將導致頁面顯示失敗。 ### 參數： - url: *( DOMString ) 必選 *要加載的新的頁面地址 ### 返回值： void : 無 ### 示例： ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>UI Example</title> <script type="text/javascript"> // 擴展API加載完畢后調用onPlusReady回調函數 document.addEventListener( "plusready", onPlusReady, false ); // 擴展API加載完畢，現在可以正常調用擴展API function onPlusReady() { } function jumpUrl() { var nw = plus.ui.getSelfWindow(); nw.load( "http://www.test.com" ); // 跳轉到新的頁面 } </script> </head> <body> <button onclick="jumpUrl();">跳轉到新頁面</button> </body> </html> ~~~ # [reload]() 重新加載窗口當前顯示的頁面 ~~~ void wobj.reload( force ); ~~~ ### 說明：觸發原生窗口重新加載當前顯示的頁面地址。如果當前頁面未加載完則停止并重新加載，如果當前沒有加載任何頁面則無響應。 ### 參數： - force: *( Boolean ) 必選 *是否強制不使用本地緩存為加速頁面加載速度，默認在重新加載時會使用緩存，若force設置為true則不使用緩存，重新從服務器加載所有頁面內容。 ### 返回值： void : 無 ### 示例： ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>UI Example</title> <script type="text/javascript"> // 擴展API加載完畢后調用onPlusReady回調函數 document.addEventListener( "plusready", onPlusReady, false ); // 擴展API加載完畢，現在可以正常調用擴展API function onPlusReady() { } function refresh() { var nw = plus.ui.getSelfWindow(); nw.reload( true ); } </script> </head> <body> <button onclick="refresh();">重新加載</button> </body> </html> ~~~ # [removeEventListener]() 移除事件監聽器 ~~~ wobj.removeEventListener( event, listener ); ~~~ ### 說明：從窗口移除指定的事件監聽器。若沒有查找到對應的事件監聽器，則無任何作用。 ### 參數： - event: *( [NWindowEvent](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NWindowEvent) ) 必選 *要移除的事件類型 - listener: *( [EventCallback](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.EventCallback) ) 必選 *要移除回調函數對象 ### 返回值： void : 無 ### 示例： ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>UI Example</title> <script type="text/javascript"> // 擴展API加載完畢后調用onPlusReady回調函數 document.addEventListener( "plusready", onPlusReady, false ); // 擴展API加載完畢，現在可以正常調用擴展API function onPlusReady() { } function onloaded () { alert( "New Window loaded!" ); } var nw = null; function eventTest() { // 打開新窗口 nw = plus.ui.createWindow( "http://www.test.com" ); nw.addEventListener( "loaded",onloaded, false ); // 10s后顯示窗口 setTimeout( function () { nw.show(); }, 10000 ); } function removeEvent () { nw.removeEventListener( "loaded", onloaded ); } </script> </head> <body> <input id="event" type="button" value="Window Event" onclick="eventTest();"></input> <input id="event" type="button" value="Remove Event" onclick="removeEvent();"></input> </body> </html> ~~~ # [setContentVisible]() 設置頁面內容是否可見 ~~~ void wobj.setContentVisible( visible ); ~~~ ### 說明：在某些特殊情況下需要對頁面內容進行預處理，如對內容進行過濾轉換，為了不讓內容在轉換完成之前顯示，則可先通過此方法設置頁面內容不可見，帶內容轉換完成后再設置頁面內容可見。 ### 參數： - visible: *( Boolean ) 必選 *設置頁面是否可見的值 ### 返回值： void : 無 # [setOption]() 設置原生窗口的參數 ~~~ void wobj.setOption( options ); ~~~ ### 說明：設置原生窗口的屬性，如窗口位置、大小等信息。 ### 參數： - options: *( [NWindowOption](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.NWindowOption) ) 必選 *要設置新的窗口屬性 ### 返回值： void : 無 ### 示例： ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>UI Example</title> <script type="text/javascript"> // 擴展API加載完畢后調用onPlusReady回調函數 document.addEventListener( "plusready", onPlusReady, false ); // 擴展API加載完畢，現在可以正常調用擴展API function onPlusReady() { } function moveWinTo() { var nw = plus.ui.getSelfWindow(); nw.setOption( {left:50%} ); // 水平移動窗口到屏幕中間位置 } </script> </head> <body> <button onclick="moveWinTo();">移動窗口</button> </body> </html> ~~~ # [setPreloadJsFile]() 設置頁面預先加載的js文件 ~~~ wobj.setPreloadJsFile( file ); ~~~ ### 說明：某些頁面加載時預先執行插入的js文件，以完成特殊的頁面處理。在窗口頁面跳轉時也需要執行，設置新的js文件后將清空之前設置的值。 ### 參數： - file: *( DOMString ) 必選 *要預先載入的js文件地址，僅支持本地文件 ### 返回值： void : 無 # [setPullToRefresh]() 設置窗口的下拉刷新功能 ~~~ wobj.setPullToRefresh( PullToRefreshOption options, PullToRefreshCallback refreshCB ); ~~~ ### 說明：窗口自帶下拉刷新功能，當用戶觸發刷新操作時通過refreshCB函數通知應用執行刷新操作。此時窗口進入刷新狀態并一直顯示下拉刷新控件，直到調用endPullToRefresh方法退出刷新狀態。 ### 參數： - options: *( PullToRefreshOption ) 必選 *設置下拉刷新功能的配置信息，如下拉區域的高度、上面顯示的內容等 - refreshCB: *( PullToRefreshCallback ) 可選 *用戶觸發刷新操作時的回調函數 ### 返回值： void : 無 ### 平臺支持： - Android - 2.2+ (支持) - iOS - 4.5+ (不支持): 暫不支持，建議通過web技術實現 ### 示例： ~~~ <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <title>Pull to refresh</title> <script type="text/javascript" charset="utf-8"> var ws=null; var list=null; // 擴展API加載完畢，現在可以正常調用擴展API function plusReady(){ ws=plus.ui.getSelfWindow(); ws.setPullToRefresh({ support:true, height:"100px", contentdown:{ caption:"下拉可以刷新" }, contentover:{ caption:"釋放立即刷新" }, contentrefresh:{ caption:"正在刷新..." } },onRefresh); } // 判斷擴展API是否準備，否則監聽"plusready"事件 if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); } // DOM構建完成獲取列表元素 document.addEventListener("DOMContentLoaded",function(){ list=document.getElementById("list"); }) // 刷新頁面 function onRefresh(){ setTimeout(function(){ if(list){ var item=document.createElement("li"); item.innerHTML="<span>New Item "+dateToStr(new Date())+"</span>"; list.insertBefore(item,list.firstChild); } ws.endPullToRefresh(); },2000); } </script> <style type="text/css"> li { padding: 1em; border-bottom: 1px solid #eaeaea; } li:active { background: #f4f4f4; } </style> </head> <body> <ul id="list" style="list-style:none;margin:0;padding:0;"> <li><span>Initializ List Item 1</span></li> <li><span>Initializ List Item 2</span></li> <li><span>Initializ List Item 3</span></li> <li><span>Initializ List Item 4</span></li> <li><span>Initializ List Item 5</span></li> <li><span>Initializ List Item 6</span></li> <li><span>Initializ List Item 7</span></li> <li><span>Initializ List Item 8</span></li> <li><span>Initializ List Item 9</span></li> <li><span>Initializ List Item 10</span></li> </ul> </body> </html> ~~~ # [setVisible]() 設置窗口是否可見 ~~~ void wobj.setVisible( visible ); ~~~ ### 說明：用于隱藏原生窗口，減少顯示的窗口數目，可降低占用的系統資源，通常在打開新窗口后隱藏不需要顯示的窗口。窗口隱藏后，如果要顯示則必須調用此方法將窗口顯示，否則將導致窗口不顯示。如果當前窗口已經顯示/隱藏，再次調用顯示/隱藏則無任何作用。 ### 參數： - visible: *( Boolean ) 必選 *設置窗口是否可見的值 ### 返回值： void : 無 ### 示例： ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>UI Example</title> <script type="text/javascript"> // 擴展API加載完畢后調用onPlusReady回調函數 document.addEventListener( "plusready", onPlusReady, false ); // 擴展API加載完畢，現在可以正常調用擴展API function onPlusReady() { } function visibleTest() { // 打開新窗口 var nw = plus.ui.createWindow( "http://www.test.com" ); var sw = plus.ui.getSelfWindow(); nw.show(); // 顯示窗口 sw.setVisible( false ); // 隱藏當前窗口 } </script> </head> <body> <input id="visible" type="button" value="Window Visible" onclick="visibleTest();"></input> </body> </html> ~~~ # [show]() 顯示創建新的原生窗口 ~~~ void wobj.show( aniShow, duration, assWin ); ~~~ ### 說明：顯示原生窗口，用于顯示創建的系統原生窗口。原生窗口窗口只能顯示一次，多次調用show方法將無任何作用。可通過aniShow設置原生窗口顯示動畫。 ### 參數： - aniShow: *( [AnimationTypeShow](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.AnimationTypeShow) ) 可選 *顯示原生窗口的動畫效果 - duration: *( Number ) 可選 *顯示原生窗口的動畫持續時間單位為ms，默認為600ms。 - assWin: *( DOMString ) 可選 *新打開原生窗口動畫需要關聯的窗口名稱 ### 返回值： void : 無 ### 示例： ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>UI Example</title> <script type="text/javascript"> // 擴展API加載完畢后調用onPlusReady回調函數 document.addEventListener( "plusready", onPlusReady, false ); // 擴展API加載完畢，現在可以正常調用擴展API function onPlusReady() { } function createWinTest() { // 打開新窗口 var nw = plus.ui.createWindow( "http://www.baidu.com" ); // 百度主頁 nw.show( "slide-in-right", 500 ); // 顯示窗口，動畫時間為500毫秒 } </script> </head> <body> <input id="create" type="button" value="Create New Window" onclick="createWinTest();"></input> </body> </html> ~~~ # [stop]() 窗口停止加載頁面內容 ~~~ void wobj.stop(); ~~~ ### 說明：觸發原生窗口停止加載頁面內容。如果已經加載部分內容則顯示部分內容，如果加載完成則顯示全部內容。 ### 參數：無 ### 返回值： void : 無 ### 示例： ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>UI Example</title> <script type="text/javascript"> // 擴展API加載完畢后調用onPlusReady回調函數 document.addEventListener( "plusready", onPlusReady, false ); // 擴展API加載完畢，現在可以正常調用擴展API function onPlusReady() { } function stopLoad() { var nw = plus.ui.getSelfWindow(); nw.stop(); } </script> </head> <body> <button onclick="stopLoad();">停止加載</input> </body> </html> ~~~ # [NWindowEvent]() 窗口事件對象 ### 常量： - "close": *(DOMString 類型 )*當窗口關閉時觸發此事件 - "loading": *(DOMString 類型 )*當窗口開始加載新內容時觸發此事件 - "loaded": *(DOMString 類型 )*當窗口內容加載完成時觸發此事件 - "failed": *(DOMString 類型 )*當窗口內容加載失敗時觸發此事件 - "back": *(DOMString 類型 )*設備“返回”按鈕按鍵事件 - "menu": *(DOMString 類型 )*設備“菜單”按鈕按鍵事件 - "search": *(DOMString 類型 )*設備“搜索”按鈕按鍵事件 - "volumeup": *(DOMString 類型 )*設備“音量+”按鈕按鍵事件 - "volumedown": *(DOMString 類型 )*設備“音量-”按鈕按鍵事件 # [NWindowOption]() JSON對象，原生窗口設置參數的對象 ### 屬性： - background: *(DOMString 類型 )*窗口的背景顏色窗口空白區域的背景，設置了background則窗口為獨占模式顯示（占整個屏幕區域），否則為非獨占模式，目前僅支持背景色的設置(參考CSS顏色規范)：顏色名稱(參考CSS Color Names)/十六進制值/rgb值/rgba值。 - bottom: *(DOMString 類型 )*窗口垂直向上的偏移量支持百分比、像素值，當設置了top和height值時，此屬性值忽略；當設置top和bottom屬性則自動計算窗口的高度。 - bounce: *(DOMString 類型 )*窗口遇到邊框是否有反彈效果可取值：none表示沒有反彈效果；vertical表示垂直方向有反彈效果；horizontal表示水平方向有反彈效果；all表示垂直和水平方向都有反彈效果。 ### 平臺支持 - Android - (不支持) - iOS - (支持): 默認值為none，垂直和水平方向都沒有反彈效果。 - height: *(DOMString 類型 )*窗口的高度支持百分比、像素值，默認為100%。 - left: *(DOMString 類型 )*窗口水平向右的偏移量支持百分比、像素值，默認值為0px。 - margin: *(DOMString 類型 )*窗口的邊距用于定位窗口的位置，支持auto，auto表示居中。若設置了left、right、top、bottom則對應的邊距值失效。 - name: *(DOMString 類型 )*窗口的名稱作為窗口的標識，可用于窗口的查找。 - opacity: *(Number 類型 )*窗口的不透明度 0為全透明，1為不透明，默認值為1，即不透明。 ### 平臺支持 - Android - 2.2+ (支持): 需Android4.0及以上平臺才支持，Android4.0以前平臺忽略此屬性。 - iOS - 4.3+ (支持) - right: *(DOMString 類型 )*窗口水平向左的偏移量支持百分比、像素值，默認無值。當設置了left和width值時，此屬性值忽略；當設置left和right屬性則自動計算窗口的寬度。 - scalable: *(Boolean 類型 )*窗口是否可縮放默認值為true，即可縮放。窗口設置為可縮放（scalable:true）時，用戶可通過雙指操作放大或縮小頁面，這時html頁面可通過meta節點name="viewport"來限制頁面是否可縮放。窗口設置為不可縮放（scalable:false）時，用戶不可通過雙指操作放大或縮小頁面，即使頁面中的meta節點也無法開啟可縮放功能。窗口的默認值為可縮放（scalable:true）。 - scrollIndicator: *(DOMString 類型 )*窗口是否顯示滾動條用于控制窗口滾動條樣式，可取值："all"：垂直和水平滾動條都顯示，"vertical"：僅顯示垂直，"horizontal"：僅顯示水平滾動條，"none"：垂直和水平滾動條都不顯示。默認值為"all"，即垂直和水平滾動條都顯示。注意：顯示滾動條的前提條件是窗口中的內容超過窗口顯示的寬或高。 - top: *(DOMString 類型 )*窗口垂直向下的偏移量支持百分比、像素值，默認值為0px。 - transition: *([Transition](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.Transition) 類型 )*窗口定義窗口變換的動畫效果，參考Transition - transform: *([Transform](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.Transform) 類型 )*窗口定義窗口變形效果，參考Transform - width: *(DOMString 類型 )*窗口的寬度支持百分比、像素值，默認為100%。 - zindex: *(Number 類型 )*窗口的堆疊順序值擁有更高堆疊順序的窗口總是會處于堆疊順序較低的窗口的前面，擁有相同堆疊順序的窗口后調用show方法則在前面。 # [PullToRefreshOption]() JSON對象，原生窗口設置參數的對象 ### 屬性： - support: *(Boolean 類型 )*是否開啟下拉刷新功能 true表示開啟下拉刷新功能，false表示關閉下拉刷新功能，默認值為true。 - height: *(String 類型 )*下拉刷新控件的高度當用戶下拉操作的高度大于或等于此值事，松開后則進入刷新狀態。可支持像素值和百分比，像素值為絕對值，以px結尾；百分比相對窗口的高度，以%結尾；如“60px”、“10%”，默認值為“100px”。注：當下拉的高度大于等于刷新控件的高度時，控件居底顯示。 - range: *(String 類型 )*下拉刷新控件可下拉的最大高度用戶可下拉的最大高度，此值必須大于height值，否則將會導致無法觸發刷新事件。可支持像素值和百分比，像素值為絕對值，以px結尾；百分比相對窗口的高度，以%結尾；如“60px”、“10%”，默認值為height值。 - contentdown: *(JSON 類型 )*下拉刷新控件在下拉狀態時顯示的內容僅支持caption字段，用于設置下拉狀態時顯示的文本內容。 - contentover: *(JSON 類型 )*下拉刷新控件在達到可刷新狀態時顯示的內容僅支持caption字段，用于設置可刷新狀態時顯示的文本內容。 - contentrefresh: *(JSON 類型 )*下拉刷新控件正在刷新狀態時顯示的內容僅支持caption字段，用于設置在刷新狀態時顯示的文本內容。 # [TimeOption]() JSON對象，選擇時間界面設置的參數 ### 屬性： - title: *(DOMString 類型 )*時間選擇操作界面顯示的標題字符串類型，默認標題為當前選擇的時間。 - is24Hour: *(Boolean 類型 )*是否24小時制模式，默認值為true - popover: *(JSON 類型 )*時間日期選擇界面彈出指示區域 JSON對象，格式如{top:10;left:10;width:200;height:200;}，所有值為像素值，左上坐標相對于容器webview的位置。如未設置此值，默認在屏幕居中顯示。 ### 平臺支持 - Android - 2.2+ (不支持) - iOS - 4.3+ (支持): 僅在iPad上有效，在iPhone上忽略此值。 # [ToastOption]() JSON對象，系統提示消息框要設置的參數 ### 屬性： - icon: *(DOMString 類型 )*提示消息框上顯示的圖標 - duration: *(DOMString 類型 )*提示消息框顯示的時間可選值為"long"、"short"，值為"long"約為3.5s，值為"short"時約為2s，默認值為"short"。 - align: *(DOMString 類型 )*提示消息框在屏幕中的水平位置可選值為"left"、"center"、"right"，分別為水平居左、居中、居右，默認值為"center"。 - verticalAlign: *(DOMString 類型 )*提示消息框在屏幕中的垂直位置可選值為"top"、"center"、"bottom"，分別為垂直居頂、居中、居底，默認值為"bottom"。 # [Transform]() 一組用于定義頁面或控件變形的屬性，暫不支持 ### 屬性： - rotate: *(DOMString 類型 )*暫不支持 - translate: *(DOMString 類型 )*暫不支持 - scale: *(DOMString 類型 )*暫不支持 - skew: *(DOMString 類型 )*暫不支持 - matrix: *(DOMString 類型 )*暫不支持 # [Transition]() 一組用于定義頁面或控件轉換效果的屬性 ### 屬性： - property: *(DOMString 類型 )*產生變換效果的屬性默認值為"all"，暫不支持其它值。 ### 平臺支持 - Android - 2.2+ (支持) - iOS - 4.3+ (支持) - duration: *(DOMString 類型 )*變換持續的時間默認值為0，即無動畫效果。 ### 平臺支持 - Android - 2.2+ (支持) - iOS - 4.3+ (支持) - timingfunction: *(DOMString 類型 )*窗口變換效果可取值linear、ease-in、ease-out、ease-in-out，默認值為linear。 ### 平臺支持 - Android - 2.2+ (支持) - iOS - 4.3+ (支持) # [AlertCallback]() 系統提示框確認的回調函數 ~~~ void onAlerted() { // Alert handled code. } ~~~ ### 參數：無 ### 返回值： void : 無 # [ConfirmCallback]() 系統確認框操作的回調函數 ~~~ void onConfirmed( Number index ) { // Confirm handled code. } ~~~ ### 參數： - index: *( Number ) 必選 *用戶點擊按鈕的索引值，從0開始 ### 返回值： void : 無 ### 平臺支持： - Android - 2.2+ (支持): 用戶點擊“返回”按鈕則提示框消失，同時回調函數返回的index值為-1。 - iOS - 4.3+ (支持) # [PromptCallback]() 系統輸入框操作的回調函數 ~~~ function void onPrompted( Number index, DOMString value ) { // Prompt handled code. } ~~~ ### 參數： - index: *( Number ) 必選 *用戶點擊按鈕的索引值，從0開始 - value: *( DOMString ) 可選 *用戶輸入的內容，若沒有輸入則返回空字符串 ### 返回值： void : 無 ### 平臺支持： - Android - 2.2+ (支持): 用戶點擊“返回”按鈕則提示框消失，同時回調函數返回的index值為-1，value值為空字符串。 - iOS - 4.3+ (支持) # [ToastCallback]() 系統消息框消失時的回調函數 ~~~ void onToast() { // Toast close handled code. } ~~~ ### 參數：無 ### 返回值： void : 無 # [PickDatetimeSuccessCallback]() 選擇日期或時間操作成功的回調函數 ~~~ function void onPickSuccess( DOMDate date ) { // Date picked code. } ~~~ ### 參數： - date: *( DOMDate ) 必選 *用戶選擇的日期或時間數據若調用的是日期選擇操作則僅年、月、日信息有效，若調用的是時間選擇操作則僅時、分信息有效。 ### 返回值： void : 無 # [PickDatetimeErrorCallback]() 選擇日期或時間操作失敗的回調函數 ~~~ function void onPickError( DOMException error ) { // Date picked error. alert( error.message ); } ~~~ ### 參數： - error: *( DOMException ) 必選 *用戶選擇操作失敗信息 ### 返回值： void : 無 # [MetricsCallback]() 獲取控件或窗口實際度量信息回調函數 ~~~ void onMetricsCompleted( Metrics metrics ) { // Get metrics completed code. } ~~~ ### 參數： - metrics: *( [Metrics](http://www.dcloud.io/docs/api/zh_cn/ui.shtml#plus.ui.Metrics) ) 必選 *獲取到的窗口或控件的度量信息，參考Metrics ### 返回值： void : 無 # [EventCallback]() 窗口事件的回調函數 ~~~ void onEvent() { // Event handled code. } ~~~ ### 參數：無 ### 返回值： void : 無 # [HistoryQueryCallback]() 歷史記錄記錄查詢的回調函數 ~~~ void onQuery( able ) { // Event handled code. } ~~~ ### 參數： - able: *( Boolean ) 必選 *歷史記錄操作是否可用，true表示可用，false表示不可用 ### 返回值： void : 無 # [PullToRefreshCallback]() 窗口刷新操作的回調函數 ~~~ void onRefresh() { // Event handled code. } ~~~ ### 參數：無 ### 返回值： void : 無