nwjs 应用程序中的部分视图



我的NW中有以下html结构.js应用程序

<div id="nav-header">
    <!-- bunch of links -->
</div>
<div id="content"></div>
<div id="footer"></div>

我正在尝试找到一种"动态更改"或"从另一个 html 文件加载"内容div 的方法,当用户单击 #nav-header 中的链接时。我知道在 Web 应用程序中这是使用 ajax 完成的,但我不知道如何在 NW.js桌面应用程序中执行此操作,并且找不到有关如何执行此操作的任何线索。

有人可以帮助我吗?

你可以像

在网上一样做。您可以使用ajax并调用本地文件,AngularJS将是一个简单的解决方案。

例如:

项目结构:

  • 包.json
  • 索引.html
  • 页1.html

索引.html

<html ng-app>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.min.js"></script>
</head>
<body ng-init="page = 'page1.html'"> <!-- Default page -->
    <div id="nav-header">
    <nav>
        <a ng-click="page = 'page1.html'">Link 1</a>
        <a ng-click="page = 'page2.html'">Link 2</a>
        <a ng-click="page = 'page3.html'">Link 3</a>
    </nav>
    </div>
    <div id="content" ng-include="page"></div>
    <div id="footer"></div>
</body>
</html>

页1.html

<div>Hello World</div>

当然,如果你打算使用angular,我建议你使用像Angular UI路由器这样的路由器。但正如你所看到的,你可以用你知道的任何其他技术来做到这一点,NW.js仍然是引擎盖下的镀铬。

相关内容

  • 没有找到相关文章

最新更新