首頁  >  文章  >  web前端  >  jQuery訊息提示框外掛Tipso_jquery

jQuery訊息提示框外掛Tipso_jquery

WBOY
WBOY原創
2016-05-16 16:00:581431瀏覽

今天我們用Tipso外掛來示範八種不同提示效果,並且了解下Tipso API。

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

示範一:預設效果

$('#tip1').tipso({ 
  useTitle: false 
});

示範二:左側顯示

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

示範三:背景顏色

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

示範四:使用title屬性

$('#tip4').tipso();

示範五:點選顯示/隱藏

$('#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();
  }
});

示範六:更新內容

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

示範七:圖片上使用

$('#tip7').tipso({
  useTitle: false
});

示範八:回呼函數

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

以上所述就是本文的全部內容了,希望大家能夠喜歡。

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn