Laksanakan kesan khas kotak gesaan mesej berdasarkan jQuery Tipso plug-in_jquery

Ciri melaksanakan kotak gesaan mesej berdasarkan pemalam jQuery Tipso ialah anda boleh menentukan kedudukan paparan kotak gesaan dan menukar kandungan gesaan kotak gesaan secara dinamik Pemalam kotak gesaan mesej jQuery yang sangat fleksibel Saya ingin berkongsi dengan anda sebagai rujukan, kandungan khusus adalah seperti berikut

Demo dalam talian Muat turun kod sumber

Kod pelaksanaan:

 <div class="dowebok">
  <h2>
   1、默认</h2>
  <div class="inner">
   <span id="tip1" data-tipso="dowebok.com">Tipso</span></div>
 </div>
 <div class="dowebok">
  <h2>
   2、左边显示</h2>
  <div class="inner">
   <span id="tip2" data-tipso="dowebok.com">Tipso</span></div>
 </div>
 <div class="dowebok">
  <h2>
   3、背景颜色</h2>
  <div class="inner">
   <span id="tip3" data-tipso="dowebok.com">Tipso</span></div>
 </div>
 <div class="dowebok">
  <h2>
   4、使用title属性</h2>
  <div class="inner">
   <span id="tip4" title="内容来自 title 属性">Tipso</span></div>
 </div>
 <div class="dowebok">
  <h2>
   5、单击显示/隐藏</h2>
  <div class="inner">
   <span id="tip5" data-tipso="dowebok">Tipso</span>
   <p>
    <a id="btn5" href="javascript:">显示</a></p>
  </div>
 </div>
 <div class="dowebok">
  <h2>
   6、更新内容</h2>
  <div class="inner">
   <span id="tip6" data-tipso="dowebok.com">Tipso</span>
   <p>
    <input type="text"><a id="btn6" href="javascript:">更新</a></p>
  </div>
 </div>
 <div class="dowebok">
  <h2>
   7、在图片上使用</h2>
  <div class="inner">
   <img id="tip7" src="images/tipso.png" alt="" data-tipso="dowebok.com">
  </div>
 </div>
 <div class="dowebok">
  <h2>
   8、回调函数</h2>
  <div class="inner">
   <span id="tip8" data-tipso="dowebok.com">Tipso</span>
   <p>
    状态：<em id="status"></em></p>
  </div>
 </div>

kod js:

 $(function () {
   // 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');
    }
   });
  });

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.