jQuery lapisan elastik pemalam jquery.fancybox.js contoh_jquery penggunaan

Contoh dalam artikel ini menerangkan penggunaan jQuery lapisan elastik plug-in jquery.fancybox.js. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Fancybox ialah pemalam jquery dengan fungsi yang berkuasa. Ia menyokong penambahan kesan bayangan pada imej yang diperbesarkan dan menambah butang operasi navigasi pada sekumpulan imej yang berkaitan Selain daripada memaparkan lapisan, ia juga boleh memaparkan kandungan berbingkai dan menyesuaikan gaya melalui CSS. Digabungkan dengan pemalam lain, anda boleh mencapai lebih banyak kesan berpusing.

Alamat muat turun dan contoh rasmi diberikan di sini: http://fancyapps.com/fancybox/

Lampirkan alamat muat turun tapak ini.

Setakat ini, versi terbaharu fancybox 2.1.5, kaedah panggilan telah berubah sedikit dan beberapa parameter telah ditambah. Di bahagian bawah alamat di atas, terdapat perihalan parameter yang sangat terperinci. Mari kita bercakap secara ringkas tentang proses penggunaan.

1. Untuk menggunakan fancybox, sekurang-kurangnya dua fail mesti dimuatkan

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

Satu perkara yang membuatkan saya tidak berpuas hati di sini ialah fail css perlu dimuatkan. Tidak banyak pemalam jquery yang perlu memuatkan fail css.

2. Di mana html memanggil fancybox

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

Saya tidak tahu dari versi mana Apabila memanggil ajax, anda mesti menambah fancybox.ajax pada kelas Apabila memanggil iframe, anda mesti menambah fancybox.iframe. Jika tidak, ia tidak boleh diselaraskan. Premisnya ialah fancybox dipanggil tanpa menyatakan parameter jenis lapisan elastik. Untuk merujuk kepada jenis, gunakan parameter jenis.

3. panggilan js fancybox

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

Satu perkara yang perlu anda perhatikan dengan pemalam pop timbul fancybox ialah sama ada anda menggunakan pop timbul ajax atau iframe untuk memuatkan halaman dan muncul sesuatu, anda mesti menambah ketinggian dan lebar lalai akan menjadi adaptif. Ini akan menyebabkan masalah Jika CSS menggunakan fon khas, walaupun anda menetapkan lebar dan ketinggian, saiz lapisan pop timbul yang dikira oleh penyemak imbas berbeza akan berbeza.

Pembaca yang berminat dengan lebih banyak kandungan yang berkaitan dengan pemalam jQuery boleh menyemak topik khas tapak ini: " Ringkasan pemalam dan penggunaan jQuery biasa"

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.