FC2ブログ

JQueryのslide

JQueryのslideしてくるTabをダウンロードしてきまして、(sliding login panelというプラグイン)
↓がダウンロードとデモのサイト
sliding login panel

中に、



    // Expand Panel
$("#open").click(function(){
$("div#panel").slideDown("slow");

});

// Collapse Panel
$("#close").click(function(){
$("div#panel").slideUp("slow");
});

// Switch buttons from "Log In | Register" to "Close Panel" on click
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
});


こんなjsファイルがあるんですけど、つかってみると意図しないところに、パネルが開く(てかログインパネル用に使って無いからだけど

くっついてきたCSSファイルをいじくりまわして、position操作して、なんとか使いたい場所になったけれど、

ページを読み込んだ段階で、パネルがひらっきぱなしで、下の記事が読めない

Jquery関連のHPを読み漁って、なんとかデフォルトでパネルが閉じておく
   $("div#panel(:first)").css("display","none");
発見!!

これを文頭に書き足して、なんとか初期状態でパネルが閉じておけるようになった!

でも次の問題・・・・・せっかくのパネルを開くTABをクリックすると、ページが頭出しに・・・

このスライドタブを設置した場所が800pxほど↓の場所だったので、

パネルが開くモーションが見れない・・・

それでまたWEBを徘徊して、

$("#open").click(function(event){
event.preventDefault();
});


これを発見!!

ブラウザのデフォルトの行動をやめさせるらしい。この場合ページ頭にもどってしまう行動。

これをおなじOPENのコマンドの下にいれて、ついに完成!!!!

出来上がりのjsは、




  $(document).ready(function() {

// Expand Panel
$("div#panel(:first)").css("display","none");
$("#open").click(function(){
$("div#panel").slideDown("slow");

});
$("#open").click(function(event){
event.preventDefault();
});
// Collapse Panel
$("#close").click(function(){
$("div#panel").slideUp("slow");
});

// Switch buttons from "Log In | Register" to "Close Panel" on click
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
});


ふー疲れた
これを外部javascript文書として保存(.js)

HTMLのhead部分でjquery1-4-2に記述します。




<head>
<script type="text/javascript" src="pagejs/jquery-1.4.2.js"></script>
<script type="text/javascript" src="Sliding_login_panel_jquery/js/slide.js"></script>
</head>



あとはHTMLの方の、引っ張り出す前のTABのイメージなり文章に id="toggle" を振って、
引っ張りだすパネルの内容のDIVに、 id="panel" class="open" をつけます。
#toggle のついた場所から、パネルをOPENさせるクリック部分にリンクをつけます。
<a href="#" id="open" class="open">クリック内容-たとえばOPENなど-</a>

そしてパネルが開いたとき、そのクリック部分の内容を変化させて、closeのクリック部分にするために
下に<a id="close" class="close" style="display:none;" herf="#">クリック内容←CLOSEなど</a>
と書きます。
これでできあがり!

とここまで、自分用備忘録でした

スポンサーサイト



コメントの投稿

管理者にだけ表示を許可する

検索フォーム
カテゴリ
最新記事
アンケート
月別アーカイブ
お名前.com
リンク
RSSリンクの表示
google
MicroAD
ninja
忍者アド
広がるブログ
blomotion
サンプル・イベント・モニターならBloMotion
プレスブログ
[プレスブログ]価値あるブログに換金可能なポイントを差し上げます。
wadax
ブログ村
フリーエリア
人気ブログランキングへ
ブログランキングドットネット
リンクリックブログランキング
フリーエリア
FC2ブログランキング

FC2Blog Ranking

AMAZON
カラーミーショップ
ブログ広告
ブログ広告ならブログ広告.com
ぐるなび
中古DVD
QRコード
QR
SEO