その他のUIコントロール(3/4):JavaScriptで作ろう! Windows 8 アプリ・プログラミング入門

その他のUIコントロール (3/4)

作成:2012-11-24 15:04
更新:2012-11-24 15:31

■トグルスイッチ

「トグルスイッチ」は、ON/OFFするスイッチのようなボタンです。基本的にはチェックボックスと同じような役割をはたすものですが、こちらのほうがよりビジュアルで扱いやすいでしょう。タブレットなどタッチパネルのデバイスでは、チェックボックスよりトグルスイッチのほうがインターフェイスとして使いやすく自然です。

このトグルスイッチは、WinJS.UI.ToggleSwitchというオブジェクトとして用意されています。利用には、data-win-control="WinJS.UI.ToggleSwitch"を指定した<div>タグを用意するだけです。こんな具合ですね。

<div data-win-control="WinJS.UI.ToggleSwitch">

実際に表示させてみるとわかりますが、トグルスイッチはクリックするごとにスイッチがON/OFFするようなインターフェイスです。スイッチの左側には、現在の状態を示すテキストが「On」「Off」というように表示されます。

このコントロールには、いくつかのオプションが用意されています。やはり他のコントロールと同様、data-win-options属性に連想配列を渡すことで設定しておけます。主なオプションとしては以下のようなものがあります。

title――コントロールの上に表示されるタイトルテキストです。
checked――スイッチの状態（OnかOffか）を示すものです。真偽値で指定し、trueにすればOnの状態となります。
labelOn/labelOff――On/Offそれぞれのときにコントロールの左側に表示されるテキストを示すものです。
disabled――ディスエーブル状態（使用不可）にするためのものです。真偽値で設定され、trueにすると使用不可になります。

下のリスト欄に利用例を挙げておきます。ここではトグルボタンをクリックしてOn/Offすると、左側に「DO!」「never」と表示されるようにしてあります。またクリックするごとに、現在の状態が上に表示されます。

トグルスイッチを操作した時のイベント処理も、やはり「change」イベントで行うことができます。これにより、On/Off状態が変更されるとイベントが発生し処理が行われるようになります。ここでは、以下のようにしてトグルボタンの状態を示すテキストを取得しています。

var toggle = event.target.winControl;
var label = toggle.checked ? toggle.labelOn : toggle.labelOff;

DOMオブジェクトを取得したらその「winControl」プロパティのオブジェクトを取り出す、というのはこれまでと同じですね。ここで「checked」値を調べ、この値がtrueならばlabelOn、falseならばlabelOffのプロパティ値を取り出すようにしています。まぁ、checkedの値をそのまま利用してもいいのですが、単なる真偽値より表示されるテキストを利用したほうがわかりやすいのでそうしてあります。

(by. SYODA-Tuyano.)

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

※HTMLの<body>タグ部分

<body>
    <h1 id="title">Sample Page</h1>
    <p id="msg">this is list sample page.</p>

    <div data-win-control="WinJS.UI.ToggleSwitch" id="toggle1"
        data-win-options="{title:'Do It!',labelOn:'DO!', labelOff:'never', checked:true}"></div>
</body>


※JavaScriptのスクリプト

(function () {
    "use strict";

    WinJS.Binding.optimizeBindingReferences = true;
    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    
    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.
                ApplicationExecutionState.terminated) {} else {}
            args.setPromise(WinJS.UI.processAll().then(function completed() {
                document.getElementById("toggle1").addEventListener("change", toggle1Change);
            }));
        }
    }

    app.oncheckpoint = function (args) {}

    // ※追加した関数
    function toggle1Change(event) {
        var toggle = event.target.winControl;
        var label = toggle.checked ? toggle.labelOn : toggle.labelOff;
        var msg = document.getElementById("msg");
        msg.textContent = "Toggle: " + label;
    }

    app.start();
})();

※関連コンテンツ

<< prev next >>

「JavaScriptで作ろう! Windows 8 アプリ・プログラミング入門」に戻る