使ってみると非常に便利なAjaxライブラリの「Spry」ですが、実際に仕事で使ってみるといろいろと困ったことはでてくるもので……
実装したものをクライアントや開発会社に提出して、ここってどうにかならないの？みたいな要望やら文句やらを聞きながら、試行錯誤しながら、これってかなりトリッキーなことやってるのかも、とか思いながらけっこう無理やり要求される仕様を実現してます、今日この頃。
でも、それももうあと数日で終わり。
ようやく、Spryとの格闘の日々に終止符が打たれる……のかなぁ……
今日のメモは「SpryHiddenRegion」についてです。
Spryは非同期でロードしてきたXMLをHTMLに埋め込んで表示してくれるのですが、XMLのロードに時間がかかってしまうと、埋め込み用のタグがそのまま表示されてしまいます。
それは非常にカッコ悪いので、ロード中にデータを表示するエリア、Spryでは「Region」と呼んでいますが、そこをCSSで非表示にする方法が用意されています。
それが「SpryHiddenRegion」です。
Adobe Labsの公式ドキュメントのURLは下記。
Adobe Labs - Spry Data Set and Dynamic Region Overview
仕組みは簡単で、Regionがロード完了と同時に自動的に「SpryHiddenRegion」というクラスを削除するようになっています。
したがって、「SpryHiddenRegion」を下記コード例のように実装すれば、ローディング中は埋め込み用タグが表示されないということになります。
<style>
.SpryHiddenRegion {
visibility: hidden;
}
</style>
...
<div spry:region="dsEmployees" class="SpryHiddenRegion">
...
</div>
めでたし、めでたし。
であれば、わざわざこんな記事は書かないわけで、このコードには問題があります。
問題は「visibility: hidden;」。
これでは、非表示にはなりますが表示エリアは確保されます。
結果、ローディング時にレイアウトが崩れる場合があります。
これまで、例の通りに「visibility: hidden;」としていたわけですが、仕組みを考えれば解決は簡単ですね。
「display:none;」にしましょう。
これでもちゃんと問題なく動きます。
