jquery ツール シリーズ オーバーレイ learning_jquery

前回のスクロール可能の学習に続き、今日はjqueryツールの6つの主要機能のうちの4番目の機能であるオーバーレイの学習を続けます。

スクロール可能な学習の場合、まず操作の HTML ターゲット コードを指定します。

Open overlay ="#overlay2">その他のオーバーレイ

overlay

$$$$$$$$$

問題はありません。スタイル = "margin:10px 0" >これが私の別のオーバーレイです。

クラスの適性は、conubia nostra、
、inceptos lorem ligula、elementum vitae、
imperdiet a、posuere nec、ante。

この関数は jqueryObject.overlay() メソッドによって実装されます。overlay メソッドは次の 2 つのメソッドを提供します。
1. $("button[rel]").overlay()//Thisメソッドは、デフォルトのメソッドを使用してプロンプト オーバーレイを表示できます。
2. $("button[rel]" ).overlay({config object}) //このメソッドは、構成オブジェクトを通じてオーバーレイ表示をカスタマイズします。
次のコードは、2 番目のメソッドの構成パラメーターの実装です (実装を jquery の Ready メソッドに置くだけです):



コードをコピー
コードは次のとおりです:

$("#overlay").overlay({api:true}).load();//オーバーレイを自動的に表示します (トリガーする必要はありません。ページが読み込まれると自動的にトリガーされます)
$ ("button[rel]").overlay({
start:{
width: 300,
絶対値: false
},
終了:{
トップ:10、
left:400、
Absolute:false
}、
speed:3000、
fadeInSpeed:3000、
closeOn Click:false、
oneInstance:false、
close： '#overlayclose'、// closeボタンをカスタマイズ
：function（）{
// alert（this.gettrigger（）。attr（ "rel ") ":onBeforeLoad");//オーバーレイ プロンプト ボックスのトリガー rel 属性値を表示します (this.getTrigger().attr("rel") ":onLoad");
},
onBeforeClose: function(){
alert(this.getTrigger().attr("rel") ":onBeforeClose");
falseを返します。









属性

デフォルト値 説明 開始 (オブジェクト) {上: 'center',left: 'center', 幅: 0,absolute: false} は、オーバーレイ ポップアップ ボックスの開始位置とサイズを設定するために使用されます。デフォルトでは、オーバーレイ ポップアップ ボックスの開始位置はトリガーの位置 (つまり、その表示をトリガーするページ要素) であり、オーバーレイが 1 つである場合、オーバーレイ ポップアップ ボックスの初期サイズは 0 です。ページ要素によってトリガーされない場合、開始します。位置は画面の中央です。この属性のデフォルト値は、次のパラメータ設定によってオーバーライドできます: top: オーバーレイ ポップの設定に使用されます。 -up ボックス 開始位置は、画面の上端からの距離に基づきます。 left: オーバーレイ ポップアップ ボックスの開始位置と画面の左端。 width: 開始位置でのオーバーレイ ポップアップ ボックスの幅を設定するために使用されます (つまり、ポップアップ ボックスの初期位置 (幅)、最初のオーバーレイの高さは幅に基づいて自動的に計算されます。 absolute: この値が true に設定されている場合、オーバーレイ ポップの先頭の位置-up ボックスは今回はブラウザ ウィンドウの左上隅に基づいて計算され、スクロール位置は考慮されません。この値が に設定されている場合、オーバーレイ ポップアップの先頭の位置にはスクロール位置が考慮されます。 finish (オブジェクト) {top: 100,left: 'center',absolute: false} はオーバーレイの設定に使用されますポップアップ ボックスの最終的な位置とサイズ。 、次のパラメータ設定を通じてこの属性のデフォルト値をオーバーライドできます: top: オーバーレイの設定に使用されます。ポップアップ 画面の上端を基準としたボックスの最終的な位置。 left: からの距離に応じてオーバーレイ ポップアップ ボックスの最終位置を設定するために使用されます。画面の左端。 absolute: この値が true に設定されている場合、オーバーレイ ポップアップ ボックスの最終位置ブラウザ ウィンドウの左上隅から計算され、スクロール位置は考慮されません。この値が に設定されている場合、オーバーレイ ポップアップの最終位置はスクロール位置を考慮します。 さらに、オーバーレイ ポップアップ ボックスの最終位置のサイズは、関連する CSS プロパティによって設定されます。 公開 オーバーレイ ポップアップ ボックスは、エクスポーズ機能と併用されることがよくあります。 2 つを一緒に使用する方法は、オーバーレイの構成属性を通じて設定されます。この構成アイテムは、公開関数の構成オブジェクトを受け入れます。このプロパティは 2 種類のパラメータを受け入れます。1 つは公開の背景色設定のみを受け入れる文字列で、もう 1 つは公開設定オブジェクトです。この属性の 2 つのパラメーター モードは、この記事の例にあります。 速度 'normal' オーバーレイ ポップアップ ボックスの設定ポップアップ速度。このプロパティで受け入れられる有効な値は、slow、normal、fast、およびミリ秒です。このプロパティの値が 0 に設定されている場合、オーバーレイ ポップアップ ボックスはアニメーションなしですぐに表示されます。 fadeInSpeed 'fast' オーバーレイ ポップの設定-アップ ボックス コンテンツが表示される速度。このプロパティは、speed プロパティを通じて有効な値を受け入れます。 oneInstance TRUE デフォルトでは、1 ページのみオーバーレイポップアップボックスが表示されます。ただし、このプロパティを false に設定すると、ページに複数のオーバーレイ ポップアップを表示できるようになります。 (注: この属性は、closeOnClick が false に設定されている場合にのみ、より明確な効果を持ちます。) closeOnClick TRUE デフォルトでは、ページ上のオーバーレイ ポップアップ ボックスの外側の他の領域をクリックすると、オーバーレイ ポップアップ ボックスを閉じることができます。ただし、このプロパティを false に設定すると、この機能が無効になります。 preload TRUE デフォルトでは、背景画像ブラウザのキャッシュにプリロードされます。したがって、オーバーレイ プロンプト ボックスが開かれると、オーバーレイ プロンプト ボックスの背景画像がキャッシュに読み込まれているため、オーバーレイ プロンプト ボックスがトリガーされると、プロンプト ボックスのポップアップ プロセス全体がスムーズになります。さらに、プロパティを false に設定すると、背景画像のプリロードを防ぐことができます。 閉じる 閉じるボタンの設定です。ユーザーがそこでオーバーレイ プロンプト ボックスの閉じるボタンを指定しない場合、オーバーレイ プロンプト ボックスは自動的に閉じるボタンを生成します。オーバーレイ プロンプト ボタンをオフにするユーザー カスタマイズの方法については、この記事の関連する例を参照してください。 zIndex 9999 オーバーレイの Z を設定しますプロンプトボックス -index 属性 (css)、z-index 属性の役割については、関連情報を参照してください。このプロパティは -999 という非常に高い値に設定されているため、通常の状況では、このプロパティを再度設定する必要はありません。ただし、この値はページ上の他の要素の z-index 値より大きくなければならないことに注意してください。 target rel 属性で指定されていない場合オーバーレイ プロンプト ボックスの場合、この属性を通じてオーバーレイ プロンプト ボックス要素を設定できます。 onBeforeLoad None コールバック関数。関数が false を返した場合、オーバーレイ プロンプトがトリガーされる前にこの属性が実行されます。ボックスはブロックされ、表示されません。 onLoad なし コールバック関数、この属性はオーバーレイ プロンプト ボックスがトリガーされた後に実行されます。 onBeforeClose なし コールバック関数。このプロパティは、オーバーレイ プロンプト ボックスを閉じるイベントがトリガーされた後、オーバーレイ プロンプト ボックスが閉じる前に実行されます。オーバーレイ プロンプト ボックスが閉じないようにするには、false を返します。 onClose なし コールバック関数。このプロパティは、オーバーレイ プロンプト ボックスが閉じられた後にトリガーされます。 api FALSE このプロパティ設定は同じですセレクターとして、タブ関数の API プロパティ。この属性の意味については、このシリーズのセレクターとタブ関連の説明を参照してください。

さらに、ツールチップには、オーバーレイ オブジェクトを取得するための一連のメソッドも用意されています。具体的な使用方法は次のとおりです。

コードをコピー コードは次のとおりです:

var overlayObj=$("#overlay").overlay({api:true});
overlayObj.load();//オーバーレイを自動的に表示します。 (トリガーする必要はありません。ページに読み込まれます。完了すると自動的にトリガーされます)
setTimeout(function(){overlayObj.close();},2000);//2 秒後に、自動的に読み込まれます (表示されます)。プロンプト ボックスは非表示になります
$("#overlayInfo") .append("

オーバーレイが開かれます:" overlayObj.isOpened() "

");//オーバーレイがあるかどうかを判断しますこの時点で表示されるプロンプト ボックス
append("

オーバーレイ背景画像:" overlayObj.getBackgroundImage() "

"); getTrigger () );
$("#overlayInfo").append("

オーバーレイ コンテンツ:" overlayObj.getContent().html() "

"); OnbeforeLoad = Function () {
アラート(this.getContent (). Attr ("ID");
}


以下は、Overlay オブジェクトの説明の説明です:

メソッド

デフォルト値	説明
load()	オーバーレイ	オーバーレイ プロンプト ボックスを開く別の方法ですが、この方法ではできません。 pass ページ イベントがトリガーされ、js スクリプトを通じて overlay プロンプト ボックスが直接開きます。
close()	オーバーレイ	(js スクリプトからのこのメソッドの呼び出し経由) ポップアップ overlay プロンプト ボックスを閉じます。
isOpened()	boolean	現在 オーバーレイ プロンプト ボックスが開いているかどうかを確認します。 オーバーレイ プロンプト ボックスが現在開いている場合は、true を返します。
getBackgroundImage()	jQuery	現在のオーバーレイ プロンプト ボックスの背景画像を jquery オブジェクトとして返します。
getContent()	jQuery	overlay ポップアップ ボックスのコンテンツを jquery オブジェクトとして返します。
getTrigger()	jQuery	overlay ポップアップ ボックスをトリガーする要素は、jquery オブジェクトとして返されます。
getConf()	オブジェクト	ポップアップボックスが初期化されるときに、overlay の構成オブジェクトを取得します。
API	FALSE	構成オブジェクトの api と同じです。
onBeforeLoad(fn)	API	設定ファイルの onBeforeLoad 属性と同じです。
onLoad(fn)	API	同じ設定ファイルonLoad 属性で。
onBeforeClose(fn)	API	同じ設定ファイルonBeforeClose 属性で。
onClose(fn)	API	同じ設定ファイルonClose 属性で。

最後に、完全なサンプル コードを示します:

コードをコピーします コードは次のとおりです:

br/>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional .dtd">

"); // この時点でオーバーレイの有無を判断します。提案の有無表示
$("#overlayInfo").append("

オーバーレイ背景画像:" overlayObj.getBackgroundImage() "

");
        $("#overlayInfo").append("

オーバーレイ トリガー:" overlayObj.getTrigger() "

");
$("#overlayInfo").append("

overlay config-speed:" overlayObj.getConf().speed "

");
$("#overlayInfo").append("

オーバーレイ コンテンツ:" overlayObj.getContent().html() "

");

overlayObj.onBeforeLoad=function(){
alert(this.getContent().attr("id"));
}
});
// -->
オーバーレイを開く
その他のオーバーレイ

これが私のオーバーレイです

$$$$$$$$$$

クラスの適性は、conubia nostra に従って、tactent taciti sociosqu ad litora torcnt、
inceptos himenaeos に従って。 Donec lorem ligula、elementum vitae、
imperdiet a、posuere nec、ante。キスク・マティス・マッサ・イド・メトゥス。

これが別のオーバーレイです

クラスの適性は、conubia nostra に従って、tactent taciti sociosqu ad litora torcnt、
inceptos himenaeos に従って。 Donec lorem ligula、elementum vitae、
imperdiet a、posuere nec、ante。キスク・マティス・マッサ・イド・メトゥス。

閉じる