1

Win 8 / WinJS / StoreApp - ユーザーがアイテムを選択できるリストビューを持つモーダル ダイアログを作成するための推奨される方法は何ですか?

たとえば、to do リスト (リストビュー) を含むページがあるとします。ユーザーがリストビューに表示された前日のアイテムを選択できるダイアログのようなものを開くボタンを備えたアプリ バーがあります。

MessageDialog を見ましたが、MessageDialog 内にリストビュー (またはコンテンツ) を表示できないようです。

もう 1 つのオプションはフライアウト コントロールのようですが、モーダルにする方法が見つかりませんでした。他のオプションはありますか？

私が望むのは、証券をウォッチリストに追加するときの Bing Finance アプリケーションのようなものです。そのコントロールは、他のコントロールを内部にネストできる MessageDialog のようです。

助けてくれてありがとう！

4

2 に答える 2

1

個人的には、インライン データ コレクションのフライアウトがあまり快適ではありませんでした。独自のグリッド構造のレイアウトとデザインで独自のモーダル コントロールを作成することにしました。

注意すべきことの 1 つは、カスタム ルートに進む場合は、data-win-options を使用してモーダルの配置を設定することです。そうしないと、フライアウト キーボードで奇妙なキーボード動作が発生します。

私は UX デザイナーとして、それぞれのコントロールを慎重に評価し、それぞれのシナリオで何が最適かを判断しています。ジェレミーが上で言ったように（ショーが大好きです）。収集しようとしている情報の量を特定することから始め、別の画面でこの情報を収集すると、フローが中断されます。したがって、ボタンから閉じるか、モーダルの外側にテーピングできる「ロックされた」モーダルが最善のアプローチのようです。

    <style>
    .customModal
    width:500px
    height:375px;
    display: -ms-grid;
    -ms-grid-columns: 100px 1fr 100px;
    -ms-grid-rows: 100px 1fr 100px;
}
.CustomModalGridTitle {
-ms-grid-column: 1;
-ms-grid-row: 1;
-ms-grid-column-span: 3;
-ms-grid-row-span: 1;
z-index: 1;
opacity: 1;
}

.CustomModalGridContent {
-ms-grid-column: 1;
-ms-grid-row: 2;
-ms-grid-column-span: 3;
-ms-grid-row-span: 1;
z-index: 1;
opacity: 1;
}

etc.....

    </style>


<div class="customModal" id="customModal" data-win-control="WinJS.UI.Flyout"  data-win-options="{ placement : bottom;}" >
 <div class=customModalGrid>
    <div class="CustomModalGridTitle"></div>
    <div class="CustomModalGridContent"></div>
    <div class="CustomModalGridButtons"></div>
 </div>

</div>

次に、MS のグリッド レイアウト ツールを使用して、ディスプレイ グリッドを構築し、再利用しやすくします。

それが私が取ったアプローチです:)。もちろん、customModal を起動するには、js でイベント リスナーを設定する必要があります。yourpage.js のどこかで

   // Show the flyout
function showFormatTextFlyout() {
    var myCustomModal = document.getElementById("formatTextButton");
    document.getElementById("#customModal").winControl.show(myCustomModal);
}

// 必要な場合があります

外側の div がある場合は、それを 100% 幅に設定して、基本的にユーザー認証用のダイアログ コントロールを模倣できます。

于 2013-05-17T19:41:41.210 に答える