首页 > IT职业 > IT职场 > Tab页界面,用jQuery及Ajax技术实现
从桌面开发的时代开始,Tab页就是一个优异的界面布局形式,兼有菜单的样式和充分复用有限的界面的优点。
到了B/S开发时代,网页前端布局也把Tab页的布局形式吸收了过来。特别是和Ajax技术结合起来,可以更充分发挥Tab页的良好表现力和数据缓存的优势,是一种良好的网页布局形式。
网上的Tab页代码很多,实现也大同小异 ,但代码都显得凌乱,若要真的用的话,必须费劲的吃透它,才能进行二次定制开发,为我所用。实际上实现这个Tab页界面非常简单,仅仅是通过Ajax技术偷偷的获取信息,然后在一块区域轮流显示而已(通过显示和隐藏层,或复用一个层,轮流向里边填充Html数据)。
自己的开发的代码自己最清楚,用起来也应该最顺手,要扩展的话脑子也不犯晕。代码如下,还在不断修改中。
代码特点:
1,完全实现Tab逻辑功能,Tab的样式完全交由前端代码控制,十分灵活。
2,使用Ajax技术,数据从服务器端按需取用,改善了前端的界面观感,提高了页面的性能。在重新浏览器窗口前,所有已经加载的tab页的数据被缓存在浏览器端,不再从服务器端调取,大大节约了网络带宽,改善了界面的性能。
3,tab页触发可以根据需要选用click或mouseover等事件。
4,可以配置tab加载后默认触发的页。
5,界面以table布局,只需要配置关键对象的 id 即可工作。
-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
http://www.w3.org/1999/xhtml“>
来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/2260/viewspace-2813040/ ,如需转载,请注明出处,否则将追究法律责任。