【问题标题】:Best approach to tab based web browsing [closed]基于标签的网页浏览的最佳方法[关闭]
【发布时间】:2014-06-27 18:01:59
【问题描述】:

基于标签的浏览的最佳方法是什么?各有优劣?

我正在尝试实现一个所有导航都基于标签的页面;我想要一种侧面菜单/抽屉,以及顶部的标题(一个简单的徽标栏),然后将屏幕的剩余部分作为容器,根据所选的项目(选项卡)填充。

我可以全部设置好,但是如何在该内容视图中有效地加载每个不同的页面?我很快尝试使用 jQuery 根据<div> 隐藏/显示每个,但这有点引起了我使用的谷歌地图和其他 js 库的问题。

也试过load(),但我记得它也给我带来了一些麻烦。它应该全部包含在一个页面中,还是包含在不同的页面中,然后将每个页面加载到 <div>(框架?不太了解它们)?

【问题讨论】:

  • 如果一次加载所有内容,只是隐藏和显示必要的容器,加载时间会受到影响。没有理由一次加载所有内容。我建议使用某种 AJAX 设置,在请求标签内容时加载它。

标签: javascript jquery css tabs


【解决方案1】:

每个人都会对如何创建单页应用程序有自己的偏好。我正在使用 angularjs,因为我希望我的数据具有双向绑定过滤器功能。 angularjs 控制页面添加和删除的一种方法是使用ng-view

<div ng-view id='ChgViewSection'></div>

&lt;div&gt; 是空的。通过更改 URL(无需重新加载页面)添加或删除内容,然后触发一些代码。代码中有一个叫做$routeProvider 的东西,并且路由指定了要放入DIV 元素的内容。

我将 URL 更改为:window.location.href

function mainMenuChg(argPage) {
  //console.log('argPage: ' + argPage);

  window.location.href = "#" + argPage;
};

要在没有任何框架的情况下创建自己的页面路由,您需要一种从文件中检索 HTML 内容的方法。您可以将所有内容放在一个 HTML 文件中,然后隐藏和显示部分,但这会让人感到困惑,试图弄清楚哪些 HTML 进入了哪个页面。因此,您需要一种方法将每个页面分成自己的文件,然后检索内容。

在更改页面的同时更改 URL,允许用户共享指向特定页面的链接。因此,如果您希望用户能够宣传特定的页面内容,那就是您所需要的。

【讨论】:

  • 谢谢!这是我最初的想法,信不信由你,我正要开始学习 Code School 的 AngularJS 课程,因为我认为它有助于解决问题。很高兴知道我在正轨上。
猜你喜欢
  • 1970-01-01
  • 2010-09-10
  • 2011-03-18
  • 2011-06-26
  • 2022-01-12
相关资源
最近更新 更多