顯示和隱藏進度環
1. 建立新的行動裝置專案。
2. 透過 2D 畫布，將「格線配置」小工具拖放至畫布上。
3. 在「專案」窗格中，按一下「row-1」。
4. 在「詳細資訊」窗格的「格線操作」下，點按「新增欄」2 次。
5. 拖曳下列小工具至格線配置欄：
|
欄
|
小工具
|
屬性
|
|---|---|---|
|
1
|
「按鈕」
|
在「文字」欄位中輸入 Start
|
|
2
|
「按鈕」
|
在「文字」欄位中輸入 Cancel
|
|
3
|
「進度環」
|
取消選取「可見」核取方塊
|
 |
在此線上教學中，我們使用現成樣式為按鈕的顏色。如需詳細資訊，請參閱 主題。
|
6. 下一步，建立新的應用程式參數，將屬性繫結至「進度環」小工具。在「資料」窗格中，按一下「應用程式參數」旁邊的綠色加號 (+) 圖示。
7. 在「新增應用程式參數」視窗上，於「名稱」欄位中輸入 spinnerVisible，然後按一下「新增」。
8. 拖曳 spinnerVisible 旁邊的繫結圖示 
，再將之拖曳至「專案」窗格的「spinner-1」中，即可將 spinnerVisible 應用程式參數繫結至進度環。
，再將之拖曳至「專案」窗格的「spinner-1」中，即可將 spinnerVisible 應用程式參數繫結至進度環。
在「選擇繫結目標」視窗上，選取「可見」。
9. 在「專案」 窗格中，按一下「Home.js」。在 JavaScript 編輯器中輸入下列：
$scope.hideSpinner = function() {
$scope.app.params.spinnerVisible = false;
};
$scope.start = function() {
$scope.app.params.spinnerVisible = true;
$scope.timeoutPromise = $timeout($scope.hideSpinner, 3000);
};
$scope.cancel = function() {
$timeout.cancel($scope.timeoutPromise);
};
。
10. 在「專案」窗格中，按一下「首頁」以返回至畫布。
11. 選取「開始」按鈕來檢視其屬性。
12. 在「詳細資訊」窗格上，按一下「點擊」事件旁邊的 JS 圖示，然後在「運算式」方塊中輸入下列：start();。
點擊此按鈕後，隨即執行 start JavaScript 函數。
13. 選取「取消」按鈕來檢視其屬性。
14. 在「詳細資訊」窗格上，按一下「點擊」事件旁邊的 JS 圖示，然後在「運算式」方塊中輸入下列：cancel();。
點擊此按鈕後，隨即執行 cancel JavaScript 函數。
15. 按一下「預覽」。您現在可以按一下「開始」按鈕，以叫用進度環。
