Plug-in de couche élastique jQuery jquery.fancybox.js exemple d'utilisation_jquery

L'exemple de cet article décrit l'utilisation du plug-in de couche élastique jQuery jquery.fancybox.js. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Fancybox est un plug-in jquery doté de fonctions puissantes. Il prend en charge l'ajout d'effets d'ombre aux images agrandies et l'ajout de boutons d'opération de navigation à un groupe d'images associées. En plus d'afficher des calques, il peut également afficher du contenu iframe et personnaliser les styles via CSS. En combinaison avec d'autres plug-ins, vous pouvez obtenir encore plus d'effets tourbillonnants.

Le téléchargement officiel et l'exemple d'adresse sont indiqués ici : http://fancyapps.com/fancybox/

Ci-joint l'adresse de téléchargement de ce site.

Jusqu'à présent, dans la dernière version de Fancybox 2.1.5, la méthode d'appel a un peu changé et certains paramètres ont été ajoutés. Au bas de l’adresse ci-dessus se trouvent des descriptions très détaillées des paramètres. Parlons brièvement du processus d'utilisation.

1. Pour utiliser Fancybox, au moins deux fichiers doivent être chargés

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

Une chose qui me rend mécontent ici est que les fichiers CSS doivent être chargés. Il n'y a pas beaucoup de plug-ins jquery qui doivent charger des fichiers CSS.

2. Où HTML appelle Fancybox

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

Je ne sais pas à partir de quelle version. Lorsque vous appelez ajax, vous devez ajouter Fancybox.ajax à la classe. Lorsque vous appelez iframe, vous devez ajouter Fancybox.iframe. Sinon, il ne peut pas être ajusté. Le principe est que Fancybox est appelé sans spécifier le paramètre de type de couche élastique. Pour faire référence au type, utilisez le paramètre type.

3. js appelle Fancybox

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

Une chose à laquelle vous devez faire attention avec le plugin pop-up Fancybox est que, que vous utilisiez une fenêtre contextuelle ajax ou une iframe pour charger la page et afficher quelque chose, vous devez ajouter de la hauteur et de la largeur. la valeur par défaut sera adaptative. Cela posera des problèmes si le CSS utilise des polices spéciales, même si vous définissez la largeur et la hauteur, la taille du calque contextuel calculé par différents navigateurs sera différente.

Les lecteurs intéressés par plus de contenu lié aux plug-ins jQuery peuvent consulter le sujet spécial de ce site : " Résumé des plug-ins jQuery courants et de leur utilisation"

J'espère que cet article sera utile à tous ceux qui programment jQuery.