ITPub博客

首页 > IT职业 > IT职场 > Tab页界面,用jQuery及Ajax技术实现

Tab页界面,用jQuery及Ajax技术实现

IT职场 作者:liangyh 时间:2021-09-09 09:49:37 0 删除 编辑

  从桌面开发的时代开始,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“>



我的Tabs选项卡(Ajax版本)


来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/2260/viewspace-2813040/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2019-04-16

  • 博文量
    86
  • 访问量
    834