Integrating with the Windows 8 environment - Build Windows 8 Apps with HTML5 and JavaScript - page 231

<div id="settingsContainer"
data-win-control="WinJS.UI.SettingsFlyout"
data-win-options="{settingsCommandId:'settings', width:'narrow'}">
<div class="win-ui-dark win-header">
<button type="button" onclick="WinJS.UI.SettingsFlyout.show()"
class="win-backbutton"></button>
<div class="win-label">TodoList Settings</div>
</div>
<div class="win-content">
<div class="win-settings-section">
<h3>DEFAULT PRIORITY <br />(1=VERY LOW - 5=VERY HIGH)</h3>
<input id="taskPriority_settings" type="range" min="1" max="5"
data-win-bind="value: defaultPriority;" />
</div>
</div>
</div>
Figure 9-14 shows the graphical aspect of the Settings page.
FIGURE 9-14 The Settings page of the TodoList application.
The final step is initializing the Settings page with the current settings and saving any new value
that the user may select in the page back to the application settings. For this to happen, you need
to hook up a couple of events in the settings flyout. You add a new JavaScript file to the project and
name it settings.js . Also, you reference this file as well as todolist.js from settings.html , as shown
below:
<script src="/js/todolist.js"></script>
<script src="/js/settings.js"></script>