Pemalam kotak gesaan mesej jQuery Tipso_jquery

WBOY
Lepaskan: 2016-05-16 16:00:58
asal
1438 orang telah melayarinya

Hari ini kami menggunakan pemalam Tipso untuk menunjukkan lapan kesan segera yang berbeza dan mempelajari tentang API Tipso.

<div class="dowebok"> 
  <h2>1、默认</h2> 
  <div class="inner"> 
  <span id="tip1" data-tipso="dowebok.com">Tipso</span> 
  </div> 
</div>
Salin selepas log masuk

Demo 1: Kesan lalai

$('#tip1').tipso({ 
  useTitle: false 
});
Salin selepas log masuk

Demo 2: Paparan di sebelah kiri

$('#tip2').tipso({ 
  useTitle: false, 
  position: 'left' 
});
Salin selepas log masuk

Demo 3: Warna latar belakang

$('#tip3').tipso({
  useTitle: false,
  background: 'tomato'
});
Salin selepas log masuk

Demo 4: Menggunakan atribut tajuk

$('#tip4').tipso();
Salin selepas log masuk

Demo 5: Klik untuk menunjukkan/menyembunyikan

$('#tip5').tipso({
  useTitle: false
});
$('#btn5').on({
  click: function(e) {
    if ($(this).text() == '显示') {
      $(this).text('隐藏');
      $('#tip5').tipso('show');
    } else {
      $(this).text('显示');
      $('#tip5').tipso('hide');
    }
    e.preventDefault();
  }
});
Salin selepas log masuk

Demo 6: Kandungan dikemas kini

$('#tip6').tipso({
  useTitle: false
});
$('#btn6').on('click', function() {
  var $val = $(this).prev().val();
  if ($val) {
    $('#tip6').tipso('update', 'content', $val);
  }
});
Salin selepas log masuk

Demo 7: Gunakan
pada gambar

$('#tip7').tipso({
  useTitle: false
});
Salin selepas log masuk

Demo 8: Fungsi panggil balik

$('#tip8').tipso({
  useTitle: false,
  onBeforeShow: function() {
    $('#status').html('beforeShow');
  },
  onShow: function() {
    $('#status').html('show');
  },
  onHide: function() {
    $('#status').html('hide');
  }
});
Salin selepas log masuk

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan