<button is="d-button" onclick="vs.showPrevious();">Previous</button> <button is="d-button" onclick="vs.showNext();">Next</button> <br/> <d-swap-view id="vs" selectedChildId="bbb"> <div style="background-color: honeydew; " id="aaa"> <h1>View 1</h1> </div> <div style="background-color: whitesmoke;" id="bbb"> <h1>View 2</h1> </div> <div style="background-color: powderblue;" id=ccc> <h1>View 3</h1> </div> <div style="background-color: oldlace;" id="ddd"> <h1>View 4</h1> </div> </d-swap-view> <d-view-indicator id="vi" viewstack="vs"></d-view-indicator> <br/>
body { background-color: #eeeeee; margin: 2em; } button { width: 10em; } #vs > div { font-size: 20px; font-family: Helvetica; text-align: center; font-weight: bold; } #vs { width: 50%; height: 200px; border: 2px solid gold } #vi { width: 50%; }
require.config({ baseUrl: "http://ibm-js.github.io/libraries/master", }); require(["deliteful-build/layer"], function () { require(["deliteful/SwapView", "deliteful/ViewIndicator", "deliteful/Button", "delite/theme!delite/themes/{{theme}}/global.css", // page level CSS "requirejs-domready/domReady!"], function () { document.body.style.display = ""; }); });