jQuery Dialog kotak dialog contoh penggunaan acara analysis_jquery

Contoh dalam artikel ini menerangkan penggunaan acara kotak dialog jQuery Dialog. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Acara dialog dialog

Senario aplikasi dialog

Kotak dialog ialah fungsi yang paling biasa digunakan dan praktikal.

1) Kotak dialog gesaan statik, kandungan kotak dialog dibetulkan
2) Kotak dialog gesaan dinamik, kandungan kotak dialog berubah mengikut sumber acara
3) Kotak dialog topeng, apabila kotak dialog muncul, latar belakang menjadi kelabu dan tidak boleh dipilih

Anda boleh mencapai tiga kesan di atas dengan mudah menggunakan komponen Dialog UI jQuery

Ciri utama komponen Dialog ialah ia boleh diseret (Draggable) dan boleh diubah saiz (Resizable).

Penggunaan kotak dialog Dialog juga sangat mudah Selepas memilih elemen, anda boleh menggunakan ".dialog()" pada elemen ini untuk mengubahnya menjadi kotak dialog dan mengubah suai setiap elemen kotak dialog dengan menghantar. pelbagai jenis kelas atribut pilihan.

Biasanya kotak dialog ialah elemen div:

<div id="divTip" title="自定义标题">
  <p>弹出层</p>
</div>

Pernyataan berikut akan menjana kotak dialog menggunakan atribut pilihan lalai.

jQuery("#divTip").dialog();

Selepas melaksanakan pernyataan di atas, elemen div menjadi kotak dialog yang boleh diseret dan boleh diregangkan.

Sudah tentu ini hanyalah aplikasi yang paling mudah. Mari kita gunakan contoh lengkap untuk bermula dengan cepat dengan komponen kotak dialog.

Gunakan kawalan Dialog untuk melaksanakan tiga kotak pop timbul tertentu.

Salah satunya ialah lapisan pop timbul statik, iaitu kandungan lapisan pop timbul adalah tetap.

Salah satunya ialah lapisan pop timbul dinamik, iaitu kandungan lapisan pop timbul berubah mengikut pencetus peristiwa.

Lapisan lain ialah lapisan pop timbul topeng biasa, iaitu selepas lapisan pop timbul dipaparkan, elemen pada halaman selain lapisan pop timbul tidak boleh dikendalikan.

Mula-mula lihat coretan HTML beberapa elemen pada halaman.

<!—Demo 静态提示类弹出层—>
<div class="ui-widget ui widget-contentui-corner-all" style="width:700px;padding:5px">
  <h3>Demo.共享同一个静态弹出层，弹出层内容固定：</h3>
  <div>
   <spanid="spanShowTip1">显示提示</span>  <span id="spanShowTip2">显示提示</span>  
   <spanid="spanShowTip3">显示提示</span>   <span id="spanShowTip4">显示提示</span>  
  </div>
  <br/>
  <br/>
<!—Demo动态显示类弹出层-->
<div class="ui-widget ui-widget-contentui-corner-all" style="width:700px; padding:5px">
  <h3>Demo.每个弹出层内容不同，弹出层内容存在事件源的元素属性中：</h3>
  <div>
   <spanid="spanShowDataTip1" data="颜色是红色">红色</span>     
<span id="spanShowDataTip2" data="颜色是绿色">绿色</span>    
</div>
</div>
<br />
<br />
<!—Demo.遮罩类弹出层-->
<div class="ui-widget ui-widget-contentui-corner-all" style="width:700px;padding:5px">
  <h3>Demo.弹出IFrame</h3>
  <div>
   <inputtype="button" id="bunShowIframe" name=" bunShowIframe" value="显示弹出层" />
  </div>
</div>

Elemen yang dipaparkan pada halaman elemen digunakan untuk mencetuskan acara memaparkan lapisan pop timbul.

Kod html lapisan pop timbul adalah seperti berikut:

<!—提示类弹出层—>
<div id="divTip" title="自定义标题">
  <p>弹出层</p>
</div>
<!—遮罩类弹出层—>
<div id="divIframe" title="iFrame 弹出层" style="text-align:center">
  <iframesrc="http://www.hbcsdn.tk" width="480px"height="250px" frameborder="0"></iframe>
</div>

Lapisan pop timbul ialah elemen div. Ia akan ditunjukkan atau disembunyikan mengikut keperluan.

Selepas menyediakan elemen HTML, langkah seterusnya ialah menggunakan kawalan Dialog UI jQuery. Pertama, dalam initializeDom, dapatkan elemen halaman yang perlu dimanipulasi kemudian.

initializeDom:function(){//初始化DOM
  this.$spanShowTip=$("span[id^=spanShowTip]");
  this.$spanShowDataTip=$("span[id^=spanShowDataTip]");
  this.$btnShowIframe=$("#btnShowIframe");
  this.$divTip=$("#divTip");
  tis.$divIframe=$("#divIframe");
}

Pembaca yang berminat dengan lebih banyak kandungan berkaitan jQuery boleh menyemak topik khas di tapak ini: "Kesan penukaran JQuery dan ringkasan teknik", "Kesan seretan jQuery dan ringkasan teknik ", "Ringkasan kemahiran sambungan JQuery", "ringkasan kesan khas klasik biasa jQuery", "ringkasan penggunaan animasi jQuery dan kesan khas", " ringkasan penggunaan pemilih jquery " dan "Ringkasan pemalam dan penggunaan biasa jQuery "

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