jQuery Elastic Layer Plug-in jquery.fancybox.js Verwendung example_jquery

Das Beispiel in diesem Artikel beschreibt die Verwendung des jQuery-Elastikschicht-Plug-ins jquery.fancybox.js. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Fancybox ist ein JQuery-Plug-In mit leistungsstarken Funktionen. Es unterstützt das Hinzufügen von Schatteneffekten zu vergrößerten Bildern und das Hinzufügen von Navigationsschaltflächen zu einer Gruppe verwandter Bilder. Zusätzlich zur Anzeige von Ebenen können auch iFrame-Inhalte angezeigt und Stile über CSS angepasst werden. In Kombination mit anderen Plug-Ins lassen sich noch mehr Wirbeleffekte erzielen.

Die offizielle Download- und Beispieladresse finden Sie hier: http://fancyapps.com/fancybox/

Anbei finden Sie die Download-Adresse dieser Website.

Bisher hat sich in der neuesten Version von Fancybox 2.1.5 die Aufrufmethode etwas geändert und einige Parameter wurden hinzugefügt. Am Ende der oben genannten Adresse finden Sie sehr detaillierte Parameterbeschreibungen. Lassen Sie uns kurz über den Nutzungsprozess sprechen.

1. Um fancybox nutzen zu können, müssen mindestens zwei Dateien geladen sein

<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" />

Eine Sache, die mich hier unglücklich macht, ist, dass CSS-Dateien geladen werden müssen. Es gibt nicht viele JQuery-Plug-Ins, die CSS-Dateien laden müssen.

2. Wo HTML fancybox aufruft

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

Ich weiß nicht, aus welcher Version Sie fancybox.ajax zur Klasse hinzufügen müssen. Beim Aufruf von iframe müssen Sie fancybox.iframe hinzufügen. Andernfalls kann es nicht angepasst werden. Die Voraussetzung ist, dass fancybox aufgerufen wird, ohne den Parameter für den elastischen Schichttyp anzugeben. Um auf den Typ zu verweisen, verwenden Sie den Typparameter.

3. js ruft fancybox auf

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

Eine Sache, die Sie beim Fancybox-Popup-Plugin beachten sollten, ist, dass Sie Höhe und Breite hinzufügen müssen, egal ob Sie ein Ajax-Popup oder einen Iframe zum Laden der Seite verwenden Der Standardwert ist adaptiv. Dies führt zu Problemen, wenn das CSS spezielle Schriftarten verwendet, auch wenn Sie die Breite und Höhe festlegen. Die von verschiedenen Browsern berechnete Größe der Popup-Ebene ist unterschiedlich.

Leser, die an weiteren Inhalten zu jQuery-Plug-ins interessiert sind, können sich das Spezialthema dieser Website ansehen: „ Zusammenfassung gängiger jQuery-Plug-ins und deren Verwendung“

Ich hoffe, dass dieser Artikel allen in der jQuery-Programmierung hilfreich sein wird.