按鈕單擊更改熨斗頁面選定值

我正在使用Polymer Starter Kit作爲此項目的基礎。按鈕單擊更改熨斗頁面選定值

我想要製作兩個按鈕，將用戶帶到iron-page元素內的下一個和上一個頁面。

<iron-pages selected="0"> 
       <div> 
        <paper-material elevation="1"> 
         <paper-radio-group class="layout vertical" selected="1"> 
          <paper-radio-button name="1">1</paper-radio-button> 
          <paper-radio-button name="2">2</paper-radio-button> 
          <paper-radio-button name="3">3</paper-radio-button> 
         </paper-radio-group> 
        </paper-material> 
        <div class="horizontal justified layout"> 
         <div> 
          <paper-button raised>Previous</paper-button> 
         </div> 
         <div> 
          <paper-button raised>Next</paper-button> 
         </div> 
        </div> 
       </div> 
       <div>Page 2</div> 
       <div>Page 3</div> 
       </iron-pages>

可能值得注意的是，這個iron-page元素放置在入門工具包用來處理菜單項的iron-page元素中。

我已經嘗試了一堆方法來完成這項工作。我嘗試將div更改爲「部分」，並使用入門工具包用於菜單和數據路由的相同方法，但我無法使其工作。我也嘗試在腳本文件中創建一個函數，用於偵聽單擊事件，但它在錯誤的iron-page元素中更改了頁面。它跳到菜單中的下一頁。

是否可以讓「下一步」按鈕以某種方式將所選值更改爲「2」？

來源

2015-08-14 Edalol

下面是你如何做到這一點。給你的熨斗頁面組件和按鈕一個ID，所以他們將很容易找到以後。

<iron-pages id="pages" selected="0"> 

    <paper-button raised id="next">Next</paper-button>

定義事件處理程序並通過它們的id引用iron-pages。然後，您可以將selected設置爲您要跳轉到的頁碼（從0開始）或撥打selectedNext()跳轉到下一頁。

<script> 
    var pages = document.querySelector("#pages"); 
    var next = document.querySelector("#next"); 
    next.addEventListener("click", function(){ 
     // choose an option here 
     pages.selectNext(); 
     pages.selected = 2; 
     pages.selected = pages.selected +1; 
    }); 
</script>

編輯如果您使用的是入門工具包的結構，你可以嘗試添加按鈕單擊處理程序到dom-change回調。

app.addEventListener('dom-change', function() { 
    console.log('Our app is ready to rock!'); 

    var pages = document.querySelector("#pages"); 
    var next = document.querySelector("#next"); 
    next.addEventListener("click", function(){ 
     // choose an option here 
     pages.selectNext(); 
     pages.selected = 2; 
     pages.selected = pages.selected +1; 
    }); 
});

來源

2015-08-14 17:39:35 Maria

您好！感謝您花時間幫助我。我已經實現了這一點，因爲你寫了它，但它不工作。在入門套件中，腳本鏈接到一個名爲「app.js」的單獨文件，所以我在那裏添加了代碼。當我點擊按鈕時，我仍然沒有采取任何行動 – Edalol

看看最新的答案。 – Maria

解決了！非常感謝你：） – Edalol

入門工具包使用page.js進行路由。另一個選擇是添加一個路由到你的新頁面，然後調用page.show（relative-url-to-new-page）。沒有問題通過URL傳遞參數。它也適用於瀏覽器歷史記錄。

來源

2015-08-14 22:38:12 jptknta

按鈕單擊更改熨斗頁面選定值

回答

相關問題