2011年11月10日木曜日

jQuery Mobileで動的リスト

だいぶ前に勉強がてらに書いたjQuery Mobileでリスト表示したコード。参考にして使ってみたらリストのデザインでおかしくなる部分あったので修正しておく。

このコードだと、下記のようにリストの要素が角丸になってしまう。ちょっとみにくいけど。

前にのせた画像ももちろん角丸ではあったけれど、あの頃はリストを表示したかっただけで特に気にしてなかったので気付かなかった。。というか、見て見ぬ振り…だったのかも。昔のことで覚えていない。

閑話休題、なんで角丸になってしまうのか挙動をおっていく。コードは…

まずリストの作り方を確認すると、ul内にdisplay:noneしてあるテンプレートliをcloneして、ulにappendして値を当てはめるだけ。

で、原因。
初めul内にはテンプレートのliが1つあるのみなので、jQuery Mobileがテンプレートliにui-corner-top(最初のli)、ui-corner-bottom(最後のli)のclassをつける。
このテンプレートliをcloneしてるので、角が丸くなってしまう。ちなみに画像の角が丸いのは、ui-corner-tl、ui-corner-bl。

原因がわかったので、必要ないclassを削除するように「jQueryでAjax」のeachに追記。
if (i > 0) {
    row.removeClass('ui-corner-top');
    row.find('img').removeClass('ui-corner-tl');
}
if (i < data.ResultSet.Result.Item.length - 1) {
    row.removeClass('ui-corner-bottom');
    row.find('img').removeClass('ui-corner-bl');
}

これで角丸はとれました。もっとスマートな方法はあるかも。
ラベル: , ,