javascript - 使用 jquery 和 sqlite/json 的静态产品页面

Question

我必须构建一个在 USB 内存棒上工作的静态产品页面。为了构建这个页面，我只能使用 JS 和 HTML，不能使用 PHP 或其他东西。

第一页是一个有3个类别的页面。如果我选择其中一个类别，我应该会看到下一页包含一些子类别。单击子类别应该会显示该类别的一些产品。单击产品应该会显示一些产品详细信息。就这些了，应该可以通过前端的图标返回上一页。

通常这就是所需要的。

我不想创建许多具有相同标记的静态页面，我想我可以使用 jquery、json 或 sqlite 来管理它。 - 但我需要一个起点。

我想为静态页面构建所需的代码并将其包含在 1 个 html 页面中。然后我会隐藏不需要的元素并显示带有类别的起始页面。如果有人点击一个类别，我会隐藏类别页面并显示子类别页面并用“JSON/sqllite”中的数据填充它？可以使用相同的过程来显示产品详细信息。

目前我不知道如何让它工作。我希望有人能给我一个解决这个问题的起点。也许如果有类似问题的教程或其他东西。到目前为止我还没有找到。

如果需要演示解决方案，我还构建了一些“示例代码”:

<!-- CATEGORY PAGE PART -->
<div id="categoryPage">
  <h1>Category Page</h1>
  <ul>
    <li><a href="category1">Category 1</a></li>
    <li><a href="category2">Category 2</a></li>
    <li><a href="category3">Category 3</a></li>
  </ul>
</div>
<!-- SUBCATEGORY PAGE PART -->
<div id="subCategoryPage">
  <h1>Category 1 - Subcategorys:</h1>
  <ul>
    <li><a href="subcategory1">Subcategory 1</a></li>
    <li><a href="subcategory2">Subcategory 2</a></li>
    <li><a href="subcategory3">Subcategory 3</a></li>
  </ul>
  <a href="">back to category listing</a>
</div>
<!-- PRODUCT PAGE PART -->
<div id="productPage">
  <h1>Subcategory 1 - Products:</h1>
  <p>Our Products</p>
  <ul>
    <li><a href="product1">Product 1</a></li>
    <li><a href="product2">Product 2</a></li>
    <li><a href="product3">Product 3</a></li>
  </ul>
  <a href="">back to subcategory listing</a>
</div>
<!-- PRODUCT DETAIL PART -->
<div id="productDetailPage">
  <h1>Product 1</h1>
  <dl>
    <img src="img/productimage.jpg" alt="image">
    <dt>Title 1</dt>
    <dd>Description 1</dd>
    <dt>Title 2</dt>
    <dd>Description 2</dd>
    <dt>Title 3</dt>
    <dd>Description 3</dd>
    <a href="">back to product listing</a>
  </dl>
</div>

感谢您的帮助:)

Answer 1

如果您想构建一个单页应用程序(SPA)而不学习任何 SPA 框架，例如 Backbone , Angular或React您可以查看本教程，该教程仅使用 jQuery 和 Handlebars对于模板:

http://tutorialzine.com/2015/02/single-page-app-without-a-framework/

本教程使用 JSON 进行产品数据输入，因此应用程序可以离线运行(如果您愿意，也可以在 U 盘上运行)。

有关 John Papa 的单页应用程序的更多信息:

http://www.johnpapa.net/building-single-page-apps-with-knockout-jquery-and-web-api-ndash-the-story-begins/