maki-o memo

制作に関する私的なメモです

選択されているタグ : tips

タグを絞り込む : a-blog_cms Advent_Calendar CMS jQuery js movableType php カスタマイズ グローバル変数

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();

プロフィール

フロントエンドエンジニア

Tomokazu Makita

名古屋でフリーランスでWeb制作してます。 フロントエンドのことを主にやってます。
a-blog cmsを使用したサイト制作が得意です。
お仕事のご相談随時受付中。

雪山大すき。冬は雪山の合間に仕事します。
財布はいつも吹雪です。

エントリーリスト

タグ