基于jQuery消息提示框插件Tipso

2023-03-12 18:02:59

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

基于jQuery消息提示框插件Tipso

在线预览   源码下载

实现的代码：

  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>
  46. <div class="inner">
  47. <img id="tip7" src="data:images/tipso.png" alt="" data-tipso="dowebok.com">
  48. </div>
  49. </div>
  50. <div class="dowebok">
  51. <h2>
  52. 8、回调函数</h2>
  53. <div class="inner">
  54. <span id="tip8" data-tipso="dowebok.com">Tipso</span>
  55. <p>
  56. 状态：<em id="status"></em></p>
  57. </div>
  58. </div>

js代码：

  1. $(function () {
  2. // 1
  3. $('#tip1').tipso({
  4. useTitle: false
  5. });
  6. // 2
  7. $('#tip2').tipso({
  8. useTitle: false,
  9. position: 'left'
  10. });
  11. // 3
  12. $('#tip3').tipso({
  13. useTitle: false,
  14. background: 'tomato'
  15. });
  16. // 4
  17. $('#tip4').tipso();
  18. // 5
  19. $('#tip5').tipso({
  20. useTitle: false
  21. });
  22. $('#btn5').on({
  23. click: function (e) {
  24. if ($(this).text() == '显示') {
  25. $(this).text('隐藏');
  26. $('#tip5').tipso('show');
  27. } else {
  28. $(this).text('显示');
  29. $('#tip5').tipso('hide');
  30. }
  31. e.preventDefault();
  32. }
  33. });
  34. // 6
  35. $('#tip6').tipso({
  36. useTitle: false
  37. });
  38. $('#btn6').on('click', function () {
  39. var $val = $(this).prev().val();
  40. if ($val) {
  41. $('#tip6').tipso('update', 'content', $val);
  42. }
  43. });
  44. // 7
  45. $('#tip7').tipso({
  46. useTitle: false
  47. });
  48. // 8
  49. $('#tip8').tipso({
  50. useTitle: false,
  51. onBeforeShow: function () {
  52. $('#status').html('beforeShow');
  53. },
  54. onShow: function () {
  55. $('#status').html('show');
  56. },
  57. onHide: function () {
  58. $('#status').html('hide');
  59. }
  60. });
  61. });
上一篇：poj-2406（kmp水题）


下一篇：第四章 mybatis批量insert