かずきのBlog@hatena

日本マイクロソフトに勤めています。XAML + C#の組み合わせをメインに、たまにASP.NETやJavaなどの.NET系以外のことも書いています。掲載内容は個人の見解であり、所属する企業を代表するものではありません。

邪魔なものは閉じれるようにしたい

LightSwitchはjQueryとjQueryMobile使ってるのでやる気になればなんだってできます。そんな例の1つとして開閉式コンテンツを試してみました。

列のレイアウトのグループの中に、ボタンがたくさんあるグループを用意しました。
f:id:okazuki:20130816123935j:plain
ボタンがたくさんあって邪魔なので開閉式にしてみます。この図の中のGroup1のレンダリング後の処理を書くためにプロパティのPostRenderコードの編集を選択します。
f:id:okazuki:20130816124114j:plain
jQuery Mobileの開閉式コンテンツはこちらのサイトを参考にしました。

とりあえずdivにdata-role="collapsible"をつけて、div直下に見出しタグを置けばいいみたいです。ということで、PostRenderコードの中は以下のような感じになります。

myapp.Browse.Group1_postRender = function (element, contentItem) {
    // 必要な属性を追加
    var $element = $(element);
    $element.attr({
        'data-role': 'collapsible',
        'data-collapsed': 'true'
    });
    // コンテナの先頭に見出しタグを挿入
    $('<h2 />').text('メニュー').prependTo($element);
};

実行すると以下のように、最初は閉じてる雰囲気のメニューというボタンが置いてあるだけの状態になります。
f:id:okazuki:20130816124533j:plain

もちろん展開できます。
f:id:okazuki:20130816124616j:plain

見た目は、テーマを変えたりしてお好みにできるので今回は気にしないでおこう。