Angular中的Gmail样式选项卡

时间:2014-07-09 16:38:22

标签: javascript jquery angularjs

全新的角度,我只是希望能在jQuery中相对较快地实现一些指导。

作为一个宠物项目,我想出一个漫画组织者网络应用程序来学习角度。我在jQuery中启动项目看起来就是这样......

<div id='main'>
    <div id='library'>

    </div>
    <div id='series' data-currently-loaded-series='1234'>

    </div>
    <div id='comic' data-currently-loaded-comic='4321'>

    </div>
</div>

现在我根据gmail的工作原理设计了这个设计,它不会破坏它只是隐藏它们的标签,或者对它们进行缓存,这样你就不会两次加载相同的信息。

单击库中的系列将其加载到系列div中。如果'当前加载的系列ID'与我正在尝试加载的那个匹配,它将不会加载任何内容,因为它看到它已经加载了它,依此类推......等等...

我觉得这种设计对于我的小项目来说非常宝贵,因为很多漫画封面图片都是高分辨率,在视图之间导航会有点无意义,我当然知道图像通常是由浏览器缓存,但是当我可以简单地隐藏它们时,我仍然无法看到破坏div的理由。我想我正在努力减少数据请求。

我已经看过这个标签的一些例子,比如互联网上的行为,但是gmail就像我找到的唯一一个没有破坏以前导航视图/标签的实例。

输入Angular ...

我发现在部分和视图之间切换时会破坏旧数据,我不太确定是否可以禁用此行为。我以为我可以设置我以前相同的div布局,只需加载多个视图并切换,但Angular不能很好地与多个视图一起使用(显然UI-Router可能是这里的解决方案)。即使在一个视图中执行此操作也不太理想,因为我不太确定我是否能够使用URL路由...

我想我最终的问题是什么人都知道gmail使用的这个标签缓存机制的名称?如果没有,有人能指出我如何创造类似的东西吗?

由于

1 个答案:

答案 0 :(得分:0)

我建议您使用Bootstrap和Ui bootstrap进行角度调整。 一个简单的教程:http://odetocode.com/blogs/scott/archive/2013/08/14/dynamic-tabs-with-angularjs-and-ui-bootstrap.aspx