Question

我是webdev的新手。

术语，措辞和惯例仍在进行中。没有正确的措辞，研究我的问题 - 书籍，谷歌和SO - 是不成功的。也许目标会有意义：

我有一个外部＆lt; div>充当基于标签的显示。在内部，我计划添加一个可滚动的列表和一个“显示区域”＆＃39;由各种内容（图像，文本，应用程序等）组成。回顾一下，该格式类似于Outlook和iOS＆＃39;邮件设计。

选项卡是一类数据，列表项是另一类。这类似于不同的邮件文件夹（例如垃圾邮件 - ＆gt;邮件项目3 - ＆gt;显示内容;收件箱 - ＆gt;邮件项目2 - ＆gt;显示内容）。

我关心的是如何显示这些内容，因为每种内容都有很多可能的选择和实质内容。我无法想象除了所选的＆lt; div＆gt ;,这就像隐藏当前邮件之外的所有邮件。

我想过创建本地文件并根据项目选择来阅读它们。即便如此，我也不确定什么是有效的。如果它只是一些文本，我可以轻松地交换显示＆lt;的innerHTML。 div＆gt;。但这对我的意图有用吗？

总体而言，我将如何进行此设计？您可能会考虑使用哪些特定术语或设计概念来考虑此问题和类似问题？

感谢您的时间！

Answer 1

这是一个使用bootstrap和angularJS的简单示例。您可以将html的内容输入到不同的html文件中，例如inbox.html，junkmail.html等。

<body ng-app="app" ng-controller="homeController">
<div class="row">
    <div class="col-md-4"> 
        <ul class="nav-menu">
            <li><a href="#" ng-click="showPage('inbox');">Inbox</a></li>
            <li><a href="#" ng-click="showPage('junkmail');">Junk Mail</a></li>
        </ul>
    </div>
    <div class="col-md-8">
        <div-page name="{{currentPageName}}"></div-page>
    </div>
</div>

<script src="scripts/angular.min.js"></script>
<script>
    var app = angular.module('app', []);

    app.controller('homeController', ['$scope', function ($scope) {
        $scope.currentPageName = "inbox";

        $scope.showPage = function (name) {
            $scope.currentPageName = name;
        }

    }]);

    app.directive('divPage', function () {
        return {
            restrict: 'E',
            link: function (scope, element, attrs) {
                scope.getTemplateUrl = function () {
                    return attrs.name + '.html';
                }
            },
            template: '<div ng-include="getTemplateUrl()"></div>'
        };
    });
</script>

webdev - 在div

1 个答案: