0

おそらく簡単な質問がありますが、見落としているだけです。

そのため、押されたときにフライアウト メニューを作成するボタンが 1 つあるアプリ バーを作成しました。ボタンは、イメージを保持できるように作成されます。

<button class="app-button" style="-ms-high-contrast-adjust:none" data-win-control="WinJS.UI.AppBarCommand" 
            data-win-options="{id:'appButton',icon:'url(images/logo.png)',section:'global', type: 'flyout', flyout:select('#appFlyout')}">
</button>

フライアウト メニューに項目のリストを入力しますが、現時点では、CSS を使用して各ボタンに画像を提供することで、画像のリストをハード コードしただけです。

<div id="appFlyout" data-win-control="WinJS.UI.Flyout" aria-label="App Menu" style="visibility: visible;">
    <ul class="appList" list-style-type: none style="width: 127.5px;">
        <li id="app1List"><button id="app1" class="appButton"></button></li>
        <li id="app2List"><button id="app2" class="appButton"></button></li>
        <li id="app3List"><button id="app3" class="appButton"></button></li>
        <li id="app4List"><button id="app4" class="appButton"></button></li>
        <li id="app5List"><button id="app5" class="appButton"></button></li>
        <li id="app6List"><button id="app6" class="appButton"></button></li>
    </ul>
</div>

短期的には、JavaScript を使用して、フライアウト メニューでクリックされたボタンの画像でアプリバーのボタンを更新する方法が必要です。空白の Windows ストア アプリを使用しているため、すべてがデフォルト (css/html/javascript) にあります。

ボタンを更新する関数を作成し、その関数を app1 のイベントリスナーに追加して、クリックするとアプリバーの画像が更新されるようにしようとしましたが、機能しませんでした。うまく構成されていないリストを見て (私が言ったように、それは一時的なギャップにすぎません)、それらを行うためのより良い方法はありますか、それとも私が考えたようにそれを行い、フライアウトの各ボタンにイベントリスナーを追加する必要がありますか?メニュー？

4

1 に答える 1

1

フライアウトのリストにWinJS.UI.ListViewコントロールを使用することを検討してください。以前に listview を使用したことがない場合は、クイックスタート サンプルを参照してください。

各項目がボタン イメージを表すリストにバインドできます。appbar の appbarcommand に対して、 iteminvokedイベント ハンドラーを使用して、選択したボタン イメージを設定します。

以下は完全なコードではありません。しかし、アイデアを与えるために、コードの一部です。

var buttonFilePaths = [ 
{ iconFilePath: '/images/button1.png' }, 
{ iconFilePath: '/images/button2.png'}, 
{ iconFilePath: '/images/button3.png'}];
var list = new WinJS.Binding.List(buttonFilePaths);
// bind this list data source to the listview control.
listview.winControl.itemDataSource = list.dataSource;

// register for iteminvoked event when the item is tapped;
listView.addEventListern('iteminvoked', function (event)
{
    var selectedIndex = event.detail.itemIndex;
    var item = list.getAt(selectedIndex);
    appButton.winControl.icon = item.iconFilePath; 
});

html:

<div id='listview' data-win-control="WinJS.UI.ListView'
  data-win-options="{ tapBehavior: 'invokeOnly', selectionMode: 'none', swipeBehavior: 'none'
     , itemTemplate: select('#itemTemplate')}" >
</div>
<div id='itemTemplate' data-win-control='WinJS.Binding.Template'>
    <div class='list-item'>
        <img data-win-bind='src: iconFilePath' />
    </div>
</div>
于 2013-06-20T05:27:18.643 に答える