基于jQuery Tipso插件实现消息提示框特效

基于jQuery Tipso插件实现消息提示框的特点是可以定义提示框的显示位置，以及动态改变提示框的提示内容，应该说是一款相当灵活的jQuery消息提示框插件，分享给大家供大家参考，具体内容如下

在线演示 源码下载

实现的代码：

 <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>

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"）;} }）;}）;

以上就是本文的全部内容，希望对大家的学习有所帮助。