打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
基于jQuery消息提示框插件Tipso
基于jQuery消息提示框插件Tipso

今天要分享的这款jQuery消息提示框插件名叫Tipso,它的特点是可以定义提示框的显示位置,以及动态改变提示框的提示内容,应该说是一款相当灵活的jQuery消息提示框插件。效果图如下:

在线预览 源码下载

实现的代码:

Html代码
  1. <div class="dowebok">
  2. <h2>
  3. 1、默认</h2>
  4. <div class="inner">
  5. <span id="tip1" data-tipso="dowebok.com">Tipso</span></div>
  6. </div>
  7. <div class="dowebok">
  8. <h2>
  9. 2、左边显示</h2>
  10. <div class="inner">
  11. <span id="tip2" data-tipso="dowebok.com">Tipso</span></div>
  12. </div>
  13. <div class="dowebok">
  14. <h2>
  15. 3、背景颜色</h2>
  16. <div class="inner">
  17. <span id="tip3" data-tipso="dowebok.com">Tipso</span></div>
  18. </div>
  19. <div class="dowebok">
  20. <h2>
  21. 4、使用title属性</h2>
  22. <div class="inner">
  23. <span id="tip4" title="内容来自 title 属性">Tipso</span></div>
  24. </div>
  25. <div class="dowebok">
  26. <h2>
  27. 5、单击显示/隐藏</h2>
  28. <div class="inner">
  29. <span id="tip5" data-tipso="dowebok">Tipso</span>
  30. <p>
  31. <a id="btn5" href="javascript:">显示</a></p>
  32. </div>
  33. </div>
  34. <div class="dowebok">
  35. <h2>
  36. 6、更新内容</h2>
  37. <div class="inner">
  38. <span id="tip6" data-tipso="dowebok.com">Tipso</span>
  39. <p>
  40. <input type="text"><a id="btn6" href="javascript:">更新</a></p>
  41. </div>
  42. </div>
  43. <div class="dowebok">
  44. <h2>
  45. 7、在图片上使用</h2>
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
jQuery选择器——基本选择器总结
jQuery响应式内容选项卡插件
jQuery教學 - 常用函式
jQuery知识总结
推荐一款好用的jquery弹出层插件——wbox
jQuery使用手册之DOM操作
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服