運用編碼擴充 Vuforia Studio 功能 > 在 Vuforia Studio 中使用 JavaScript > 顯示和隱藏進度環
  
顯示和隱藏進度環
1. 建立新的行動裝置專案。
2. 透過 2D 畫布，將「格線配置」小工具拖放至畫布上。
3. 在「專案」窗格中，按一下「row-1」。
4. 在「詳細資訊」窗格的「格線操作」下，點按「新增欄」2 次。
5. 拖曳下列小工具至格線配置欄：
欄
小工具
屬性
1
「按鈕」
在「文字」欄位中輸入 Start
2
「按鈕」
在「文字」欄位中輸入 Cancel
3
「進度環」
取消選取「可見」核取方塊
* 
在此線上教學中，我們使用現成樣式為按鈕的顏色。如需詳細資訊，請參閱 主題。
6. 下一步，建立新的應用程式參數，將屬性繫結至「進度環」小工具。在「資料」窗格中，按一下「應用程式參數」旁邊的綠色加號 (+) 圖示。
7. 在「新增應用程式參數」視窗上，於「名稱」欄位中輸入 spinnerVisible，然後按一下「新增」。
8. 拖曳 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. 按一下「預覽」。您現在可以按一下「開始」按鈕，以叫用進度環。