1

javaScript を使用して、windows8 アプリケーション用の appbar を作成しました。

アプリバー アイコンの下ではなく、アプリバー アイコンの横にアプリバー ボタンのラベルを配置したいと考えています。

それが可能かどうか教えてください。はいの場合、どのように？

4

1 に答える 1

2

まず、このような方法でデフォルトの動作を変更することには少し注意が必要です。これは、ユーザーがプラットフォーム上の他のほとんどのアプリケーションで経験することから逸脱するためです。そうは言っても、少なくとも1つの方法で、それは実行可能であるべきだと思います.

考慮すべきいくつかのアプローチを次に示します。私は「最適」とは考えていませんが、これらはあなたが開始する場所になる可能性があります。

生成されたオブジェクトの構造 (Blend でインタラクティブ モードを使用できます) を見ると、コマンドが 2 つのスタックされたスパン タグ (1 つはアイコンと円を含み、もう 1 つはコマンド テキスト) であることがわかります。WinJS.UI.AppBar docから、これらのスパンのスタイルを設定できますが、スパンはインライン要素であるため、ボタンの隣に配置するように垂直方向に移動できるとは思いません。margin-rightとmargin-left少しでも遊ぶことができます。

もう 1 つのオプションは、生成された DOM を書き換えて、span タグとしての表現を破棄し、自分で何かを構築することを試みることですが、それは未知の脆弱性を伴う多くの作業です。

3 番目のオプションは、DOM の変更とほぼ同等のデザインタイムです。AppBar の既定の動作を使用する代わりに、カスタム レイアウトを作成します。たとえば、次のマークアップ (これは製品品質ではなく、インライン スタイルとすべてを備えています :)) は、次の画像を生成します。

    <div id="appbar" data-win-control="WinJS.UI.AppBar" data-win-options="{layout: 'custom'}">
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmd',  icon:'placeholder'}" type="button"></button>
    <span style="margin-left: -28px; font-size: 0.8em">Command 1</span>
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmd',  icon:'placeholder'}" type="button"></button>
    <span style="margin-left: -28px; font-size: 0.8em">Command 2</span>
</div>

ここに画像の説明を入力

Windows デベロッパー センターにはAppBar のサンプルがあり、カスタム ルートを使用する場合にも役立ちます。

于 2013-01-22T07:35:54.540 に答える