jQuery插件infoBar为例谈谈如何制作弹出信息提示框

信息提示是网站必不可少的一部分，如错误提示、操作提示等等，如何展示这些信息一直是网页设计中非常重 要的一部分，因为这是用户参与交互提供的反馈结果，所以信息提示框的展示效果好与坏会给用户留下不同的印象。使用jQuery可以实现非常丰富的信息提示 框效果，这里介绍一个jQuery插件infoBar，谈谈如何制作信息提示框，简单的效果图如下：

infobox弹出信息提示框
一，如何使用jQuery插件infoBar弹出信息提示框

使用说明
需要使用jQuery库文件和infoBar弹出信息提示框库文件

使用实例

  1. <a href="#" onclick="showInfoBar('jQuery插件info Bar实例');">点击查看</a>
  2. <script language=javascript src=jquery-1.3.1.js></script>
  3. <script language=javascript src=infoBar.js></script>

上面实例实例了一个非常简单的信息提示框功能，只需要调用一个showInfoBar函数，传入信息提示文字即可。

二，如何制作一个信息提示框

以infoBar插件JS为例

  1. function showInfoBar(caption){
  2. hideInfoBar();
  3. $(document.body).append("<div id=infoBar><table width=100%><tr nowrap id=infoContent><td width=30></td><td align=left>" + caption + "</td><td width=60 align=left><div id=infoClose>[close]</div></td></tr></table></div>");
  4. $("#infoClose").click(hideInfoBar);
  5. $("#infoClose").css("border-color","#ffffff");
  6. $("#infoClose").css("border","7");
  7. $("#infoClose").css("cursor","hand");
  8. $("#infoBar").hide();
  9. $("#infoContent").css("font-weight","bold");
  10. $("#infoContent").css("font","15px Arial,Verdana,sans-serif;");
  11. $("#infoContent").css("color","white");
  12. $("#infoBar").css("background-color","#ff9900");
  13. $("#infoBar").css("position","absolute");
  14. $(window).resize(info_position);
  15. $(window).scroll(info_position);
  16. info_position();
  17. $("#infoBar").slideDown(400);
  18. }
  19. function hideInfoBar(){
  20. $("#infoBar").fadeOut(400)
  21. $("#infoBar").remove();
  22. }
  23. function info_position() {
  24. var scrollPosition = $(window).scrollTop();
  25. $("#infoBar").css("top",scrollPosition +"px");
  26. $("#infoContent").css("height","45px");
  27. $("#infoBar").css("left","0px");
  28. $("#infoBar").css("width",$(window).width());
  29. }

1，showInfoBar函数
在body后追加一个表格内容的DIV，如下：
<div id=infoBar><table width=100%><tr nowrap id=infoContent><td width=30></td><td align=left>" + caption + "</td><td width=60 align=left><div id=infoClose>[close]</div></td></tr></table></div>
这一部分就是信息提示框，显示信息的框架。

然后给这个DIV层定义CSS样式和绑定事件(关闭功能)

2，hideInfoBar函数
实现信息框隐藏效果功能，

3，info_position函数
定义信息提示框的显示位置

上面实例分析可知实现信息提示框效果非常简单，实际应用中我们可以制作自己的信息提示框函数，便于使用和管理，如上jQuery插件infoBar弹出信息提示框。

点我查看jQuery插件infoBar弹出信息提示框演示