欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery消息提示框插件Tipso

 更新時(shí)間：2015年05月04日 16:39:16   投稿：hebedich  
Tipso是一款基于jQuery的Tooltip提示框插件，他提供了眾多參數(shù)，如顯示動(dòng)畫(huà)持續(xù)時(shí)間、背景顏色、文本顏色、顯示位置、加載ajax內(nèi)容、回調(diào)函數(shù)等等。

今天我們用Tipso插件來(lái)演示八種不同提示效果，并且了解下Tipso API。

<div class="dowebok"> 
  <h2>1、默認(rèn)</h2> 
  <div class="inner"> 
  <span id="tip1" data-tipso="dowebok.com">Tipso</span> 
  </div> 
</div>

演示一：默認(rèn)效果

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

演示二：左側(cè)顯示

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

演示三：背景顏色

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

演示四：使用title屬性

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

演示五：?jiǎn)螕麸@示/隱藏

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

演示六：更新內(nèi)容

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

演示七：在圖片上使用

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

演示八：回調(diào)函數(shù)

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

以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。

相關(guān)文章

最新評(píng)論