Mootools 1.2で実装されたログイン/登録ポップアップパネルを覚えてい
ますか？ デザインの面でも機能の面でも改善できると思い、それをやった！ しかし、これからはjQueryです。
ここでデモを見る
»このバージョンの新機能
- パネルのデザインは、よりファッショナブルになるように再設計されました。
- パネルはコンテンツを移動するのではなく、カバーします。
- 画像は透明です...そしてIE6で動作します！ （ IE PNG Fixの 24Waysに感謝します）。 つまり、ドキュメントの背景色を好きなように変更したり、背景画像を使用したりすることもできます。
- パネルを下げるログインボタンは、タイトルを「ログイン| 「パネルを閉じる」で「登録」; また、いくつかの便利なロールオーバーも追加しました。
パネルを閉じたときのログインボタン：
パネルが開いているときのログインボタン：
トグル効果（JavaScriptコードの.toggle（））は、jQueryではMootoolsとは異なる動作をし、押したときにEnterボタンとCloseボタンを簡単に切り替えることができます。 ここに私がそれを準備した方法があります：
< li id ="toggle" >
< a id ="open" class ="open" href ="#" > Log In | Register </ a >
< a id ="close" style ="display: none;" class ="close" href ="#" > Close Panel </ a >
</ li >
* This source code was highlighted with Source Code Highlighter .
...入力ボタンを閉じるボタンに切り替えながらパネルを展開したり折りたたんだりするJavaScript：
$( document ).ready( function () {
// 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();
});
});
* This source code was highlighted with Source Code Highlighter .
これらの効果の使用については、
jQueryのドキュメントを参照してください。
既知のバグ
IE6では、
24Waysのスクリプトを使用しているため、ログインボタンのロールオーバー効果は機能しません。 このブラウザでこのスクリプトを使用すると半透明性が正常に機能することを考えると、この小さなエラーは無視できると思います。
読み込み中
このデモのログインおよび登録フォームは、ユーザーの認証システムがWebサイトに事前にインストールされていないと、「すぐに」機能しません。ダウンロード （55.5 KiB）
スライドパネルは、IE6、IE7、Firefox、Safari、Opera、Chromeで最適に機能します。 IE8ではテストしていません。 すべてがそこでも機能するかどうかを教えてください。
このパネルをWordPressに埋め込む方法
記事を読む：
Wordpress 2.7+での見栄えの良いjQueryスライドパネルの実装-翻訳者のメモ：初心者向けのシリーズの記事で、単純な効果の良い例