a-blog cmsの#adminBoxを、draggableする
めずらしく連続postです。
業務で使わせていただいているa-blog cmsですが、標準でjQuery UIを読んでます。
そんで、a-blog cmsはログイン時に表示される、#adminBoxってゆうブロックがあるんですけど、
[caption id="attachment_1189" align="alignnone" width="542" caption="これね"]
[/caption]
これ、ウチの会社では、body直下にどーんってwidth100%で配置しちゃってたんですけど、
コーディングの関係で、bodyにbackground設定してたりすると、ログイン時に画像がズレて、なんか表示がおかしくなっちゃうんですよね。
かといって、position:fixedしちゃうと、ヘッダーのメニューにかかったりしてなんか微妙。
案件毎にcss最適化するのもめんどいしー
んーーー、どうしたもんかなー?
と考えてたところ、今日やっと解決。
$(function(){ $('#adminBox').css({ cursor:'move', zIndex:'100', position:'fixed', top:'10px', zIndex:'100', borderRadius:'10px', background:'rgba(233,233,233,0.8)' }).draggable().hide().slideDown(); });
これを読ませれば( `д´)b オッケー!
こんな感じになります。
冒頭で言ってた、jQuery UI の、draggable()をつかってるので、自由にドラッグもでき、
且つposition:fixedなので、スクロールしても常に画面内に居ます。
「とりあえず」の実装ではいい感じじゃないすかね〜?
あ、ie6とかおもいっきし無視ですが。(chromeしか動作確認してません)
↓をアドレスバーに貼っつければ、動きが試せれますのでぜひー
javascript:$('#adminBox').css({cursor:'move',zIndex:'100',position:'fixed',top:'10px',zIndex:'100',borderRadius:'10px',background:'rgba(233,233,233,0.8)'}).draggable().hide().slideDown();
- tag
- a-blog_cms
- jQuery
- js
- tips
- カスタマイズ