0

設定ペインでトグル スイッチを使用しています。問題は、タイトルと labelOff、labelOn のテキストが表示されないことです。このテキストが表示されるように、WinJS.UI.ToggleSwitch から前面の色やスタイルを変更する方法がわかりません。どんな例でも高く評価されます。これが私のhtmlです。

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <div class="mypage fragment"
            id="mysettings" 
            data-win-control="WinJS.UI.SettingsFlyout"  data-win-options="{width:'narrow'}">
            <div class="win-header">       
                    <button onclick="WinJS.UI.SettingsFlyout.show()" class="win-backbutton">
                    </button>
                <div class="win-label">My Settings</div>
            </div>
            <div class="mytoggle"  data-win-control="WinJS.UI.ToggleSwitch" data-win-options="{ title:'Test', labelOff: 'Close', labelOn:'Open', checked: true}"></div>
        </div>  
    </body>
</html>

以下は私のcssです

.fragment.mypage .mytoggle .win-title .win-labelOff{ color: green; }

4

2 に答える 2

1

ここで WinJS.UI.ToggleSwitchの css スタイリング クラスを参照できます。

default.js:

app.onsettings = function onsettings(e)
{
    e.detail.applicationcommands = {
        about: { title: 'About', href: '/pages/settings/about.html' },
    };
    WinJS.UI.SettingsFlyout.populateSettings(e);
}

/pages/about/about.css:

.myflyout .win-content .mytoggle .win-title
{
    color: blue;
}

/pages/about/about.html ページ:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="/pages/settings/about.css" rel="stylesheet" />
</head>
<body>
    <!-- BEGINSETTINGFLYOUT -->
    <div class="myflyout" data-win-control="WinJS.UI.SettingsFlyout" 
       data-win-options="{settingsCommandId:'about'}">
        <div class="win-ui-light win-header" >
           <button type="button" onclick="WinJS.UI.SettingsFlyout.show()" 
            class="win-backbutton"></button>
           <div class="win-label">About</div>
           <img src="/images/smalllogo.png" style="position: absolute; right: 20px;"/>
        </div>                
        <div class="win-content">
            <div class="mytoggle" data-win-control="WinJS.UI.ToggleSwitch" 
               data-win-options="{title: 'example of toggle'}" >
            </div>
        </div>
    </div>
    <!-- ENDSETTINGSFLYOUT -->
</body>
</html>
于 2013-06-17T04:16:36.970 に答える
0

2016年現在、「.win-title」でこれを行うことに失敗しました。代わりに「.win-toggleswitch-header」を使用しました。

于 2016-09-15T00:00:00.970 に答える