WinJS-компонент ToggleSwitch 


<div id="locationServices" data-win-control="WinJS.UI.ToggleSwitch"
data-win-options="{
title :'Location Services',
labelOff: 'Disabled',
labelOn:'Enabled',
checked: true
}">
</div>

Текущее состояние можно получить через свойство checked.

Пример:

default.html
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>Recipe3.5</title>
 <!-- WinJS references -->
 <link href="WinJS/css/ui-light.css" rel="stylesheet" />
 <script src="WinJS/js/base.js"></script>
 <script src="WinJS/js/ui.js"></script>
 <!-- Recipe3.5 references -->
 <link href="/css/default.css" rel="stylesheet" />
 <script src="/js/default.js"></script>
 <script src="/js/controldemo.js"></script>
</head>
<body class="win-type-body">
 <div id="locationServices" data-win-control="WinJS.UI.ToggleSwitch"
data-win-options="{
title :'Location Services',
labelOff: 'Disabled',
labelOn:'Enabled',
checked: true
}">
 </div>
 <div id="info"></div>
</body>
</html>

js/controldemo.js
(function() {
    "use strict";

    function GetControl() {
        WinJS.UI.processAll().done(function() {
            var toggleButton = document.getElementById("locationServices").winControl;
            var InfoElement = document.getElementById("info");
            toggleButton.addEventListener('change', function(args) {
                if (toggleButton.checked) {
                    InfoElement.innerHTML = "Location Services enabled";
                } else {
                    InfoElement.innerHTML = "Location Services disabled";
                }
            })
        });
    }
    document.addEventListener("DOMContentLoaded", GetControl);
})();


Теги: