ホームページ > 記事 > ウェブフロントエンド > 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: title 属性の使用
$('#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'); } });
以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。