jQueryエラスティックレイヤープラグインjquery.fancybox.jsの使用例

jQueryエラスティックレイヤープラグインjquery.fancybox.jsの使用例_jquery

WBOY

リリース： 2016-05-16 15:18:50

オリジナル

1956 人が閲覧しました

この記事の例では、jQuery エラスティックレイヤープラグイン jquery.fancybox.js の使用方法について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

Fancybox は強力な機能を備えた jquery プラグインです。拡大画像への影効果の追加や関連画像群へのナビゲーション操作ボタンの追加などに対応するほか、iframeコンテンツの表示やCSSによるスタイルのカスタマイズも可能です。他のプラグインと組み合わせると、さらに渦巻くようなエフェクトを実現できます。

公式のダウンロードとサンプルのアドレスは次のとおりです: http://fancyapps.com/fancybox/

このサイトのダウンロードアドレスを添付します。

これまでのところ、fancybox 2.1.5 の最新バージョンでは、呼び出し方法が少し変更され、いくつかのパラメーターが追加されました。上記のアドレスの下部には、非常に詳細なパラメータの説明があります。利用の流れについて簡単に説明しましょう。

1. fancybox を使用するには、少なくとも 2 つのファイルをロードする必要があります

<script type="text/javascript" src="jquery.fancybox.js&#63;v=2.1.2"></script>
<link rel="stylesheet" type="text/css" href="jquery.fancybox.css&#63;v=2.1.2" media="screen" />

ログイン後にコピー

ここで私が不満に思うのは、CSS ファイルをロードする必要がある jquery プラグインがあまりないことです。

2. HTML が fancybox

を呼び出す場所

<a id='fancybox' href="test1.html" >click here</a>
//<a>标签里面加上一个class="fancybox.ajax"，不然js里面要加参数type来说明

ログイン後にコピー

どのバージョンからかわかりませんが、ajax を呼び出す場合は、fancybox.ajax をクラスに追加する必要があります。iframe を呼び出す場合は、fancybox.iframe を追加する必要があります。そうしないと調整できません。前提条件は、Elastic Layer Type パラメーターを指定せずに fancybox が呼び出されるということです。型を参照するには、type パラメーターを使用します。

3. js は fancybox を呼び出します

$("#fancybox").fancybox({
  'width'        : '30%',
  'height'        : '20%',
  'autoScale'      : false,
  'transitionIn'     : 'none',
  'transitionOut'    : 'none',
  'onClosed' : function() {alert('test');}
});

ログイン後にコピー

fancybox エラスティックレイヤープラグインで注意すべき点の 1 つは、ページをロードして何かをポップアップするために ajax エラスティックレイヤーを使用するか iframe を使用するかにかかわらず、高さと幅を追加する必要があるということです。そうでない場合は、高さと幅を追加する必要があります。デフォルトでは適応型になります。これにより、CSS が特殊なフォントを使用している場合、幅と高さを設定しても、ブラウザごとに計算されるポップアップレイヤーのサイズが異なります。

jQuery プラグインに関連するさらなるコンテンツに興味のある読者は、このサイトの特別トピック「一般的な jQuery プラグインと使用法の概要」

をチェックしてください。

この記事が jQuery プログラミングのすべての人に役立つことを願っています。