Home  >  Article  >  Web Front-end  >  jQuery message prompt box plug-in Tipso_jquery

jQuery message prompt box plug-in Tipso_jquery

WBOY
WBOYOriginal
2016-05-16 16:00:581430browse

Today we use the Tipso plug-in to demonstrate eight different prompt effects and learn about the Tipso API.

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

Demo 1: Default effect

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

Demo 2: Display on the left

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

Demo 3: Background color

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

Demo 4: Using the title attribute

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

Demo 5: Click to show/hide

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

Demo 6: Updated content

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

Demo 7: Use
on pictures

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

Demo 8: Callback function

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

The above is the entire content of this article, I hope you all like it.

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn