jQuery消息提示框插件Tipso

今天我们用Tipso插件来演示八种不同提示效果，并且了解下Tipso API。

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

演示一：默认效果

$（"#tip1"）.tipso（{ useTitle: false }）;

演示二：左侧显示

$（"#tip2"）.tipso（{ useTitle: false, position: "left" }）;

演示三：背景颜色

$（"#tip3"）.tipso（{useTitle: false,background: "tomato"}）;

演示四：使用title属性

$（"#tip4"）.tipso（）;

演示五：单击显示/隐藏

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

演示六：更新内容

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

演示七：在图片上使用

$（"#tip7"）.tipso（{useTitle: false}）;

演示八：回调函数

$（"#tip8"）.tipso（{useTitle: false,onBeforeShow: function（） {$（"#status"）.html（"beforeShow"）;},onShow: function（） {$（"#status"）.html（"show"）;},onHide: function（） {$（"#status"）.html（"hide"）;}}）;

以上所述就是本文的全部内容了，希望大家能够喜欢。