jQuery 메시지 프롬프트 상자 플러그인 Tipso_jquery

오늘은 Tipso 플러그인을 사용하여 8가지 다양한 프롬프트 효과를 시연하고 Tipso API에 대해 알아봅니다.

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

데모 1: 기본 효과

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

데모 2: 왼쪽에 표시

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

데모 3: 배경색

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

데모 4: 제목 속성 사용

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

데모 5: 표시/숨기기를 클릭하세요

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

데모 6: 업데이트된 콘텐츠

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

데모 7: 사진에
사용

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

데모 8: 콜백 기능

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

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.