グレーアウト表示のインタフェース

livedoor readerのフィード追加画面っぽいUIを作りたいなぁ、と思ってGoogle先生に聞いてみると次のページを紹介された。

glayer.js – グレーアウト表示ライブラリ – Enjoy*Study

これをインクルードして

Glayer.show();

とかすると使うととりあえずグレーアウトはさくっとできた。
あとはその上に画面を表示できればよい。

メッセージやダイアログが簡単に表示できるglayer_ex.jsと言うものが同じサイトにあったけれども、これ以外の自分で作り込んだ画面を表示するには自分で処理を書いてあげないと駄目みたいだ。

エレメントのIDを渡すとグレーアウトレイヤーの表示と一緒にエレメントを表示してくれるshowParallelという関数もあったのだけど、なんだかうまく動かなかった。

ソースを見ると

otherElements[i].style.display = '';

とあったので、たぶんスタイルの指定が問題なんだろう。
こっちのスタイルシートが悪いのかも知れない。

まあ、表示するだけなんで深く考えず、別途

$('hogehogeid').style.display = "block"

とかやっといた。

z-indexを変えるんじゃなくてdisplayを変える

上のコードを書く前に、最初はグレーの上に表示したいエレメントのz-indexを大きくすればいいかと思って

$('hogehogeid').style.zindex = 101
/* グレーのレイヤーのz-indexは100 */

とか書いてみたのだけど、なんだかうまくいかなかったので、最初からz-indexを高くしたエレメントを非表示にしておいて、displayの値をいじるコードにしてやるとうまくいった。
いまいちスッキリしないが、深追いするとひどい目に遭いそうな気がしたので、できるやり方で満足しておくことにした。

近況とか

更新頻度の失速っぷりがこのブログの死を予感させてやばいので、適当なネタでもいいから毎日更新にチャレンジしてみます。
何日続くか・・・賭けの対象にいいかもしれません。

この投稿へのコメント

  1. onozaty said on 2007年10月5日 at 1:55 PM

    はじめまして。glayer.js作者のonozatyです。
    glayer.jsのご利用ありがとうございます。(^^;;

    > showParallelという関数もあったのだけど、なんだかうまく動かなかった。

    上記ですが、指定しているエレメントは、block要素である必要があります。
    こちらで試してはおりませんが、、block要素でないと、表示位置の調整がうまくいかず、変な位置に表示されてしまうと思っております。
    divならばデフォルトでblockなので問題なく表示されると思いますが、デフォルトがblockじゃないエレメント(たとえばpやspanなど)を使う場合には、akahigeさんが書いているように、JavaScriptで style.display = “block” とするか、cssでdisplay: blockを指定してお使いください。
    (個人的には、スタイルの指定はなるべくcssでやっておいた方が良いと思っていますので、後者をお勧めします)

    > $(‘hogehogeid’).style.zindex = 101

    zindexではなくzIndex(iが大文字)だとうまく反映されるのではと思います。

  2. akahige said on 2007年10月5日 at 5:58 PM

    こちらこそ便利なライブラリを使わせていただいてありがとうございます_(._.)_
    レスまでいただいて助かります。

    showParallelの対象にしたエレメントはdivでしたが、最初にCSSでdisplayをnoneにしていると駄目でした。
    display無指定やblockだとうまくいきました。@Firefox2

    zindexはzIndexにしたらうまくいきました。
    こういう細かい系は煮詰まってるときに追撃するとやはり被害甚大だった気がします。
    ご教示いただいてほんとに助かりました。

コメントを残す

メールアドレスが公開されることはありません。

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL