基于jQuery Tipso插件實(shí)現(xiàn)消息提示框特效

    基于jQuery Tipso插件實(shí)現(xiàn)消息提示框的特點(diǎn)是可以定義提示框的顯示位置，以及動(dòng)態(tài)改變提示框的提示內(nèi)容，應(yīng)該說是一款相當(dāng)靈活的jQuery消息提示框插件，分享給大家供大家參考，具體內(nèi)容如下
    
    實(shí)現(xiàn)的代碼：
    <div>
     <h2>
      1、默認(rèn)</h2>
     <div>
      <span id="tip1" data-tipso="dowebok.com">Tipso</span></div>
    </div>
    <div>
     <h2>
      2、左邊顯示</h2>
     <div>
      <span id="tip2" data-tipso="dowebok.com">Tipso</span></div>
    </div>
    <div>
     <h2>
      3、背景顏色</h2>
     <div>
      <span id="tip3" data-tipso="dowebok.com">Tipso</span></div>
    </div>
    <div>
     <h2>
      4、使用title屬性</h2>
     <div>
      <span id="tip4">Tipso</span></div>
    </div>
    <div>
     <h2>
      5、單擊顯示/隱藏</h2>
     <div>
      <span id="tip5" data-tipso="dowebok">Tipso</span>
      <p>
       <a id="btn5" href="javascript:">顯示</a></p>
     </div>
    </div>
    <div>
     <h2>
      6、更新內(nèi)容</h2>
     <div>
      <span id="tip6" data-tipso="dowebok.com">Tipso</span>
      <p>
       <input type="text"><a id="btn6" href="javascript:">更新</a></p>
     </div>
    </div>
    <div>
     <h2>
      7、在圖片上使用</h2>
     <div>
      <img id="tip7" src="images/tipso.png" data-tipso="dowebok.com">
     </div>
    </div>
    <div>
     <h2>
      8、回調(diào)函數(shù)</h2>
     <div>
      <span id="tip8" data-tipso="dowebok.com">Tipso</span>
      <p>
       狀態(tài)：<em id="status"></em></p>
     </div>
    </div>
    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');
       }
      });
     });
    以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。