webdev - Daten innerhalb div austauschen

Ich bin ein Neuling in Webdev.webdev - Daten innerhalb div austauschen

Terminologie, Phrasierung und Konventionen sind noch in Arbeit. Ohne den richtigen Wortlaut war die Suche nach meinem Problem - mit Büchern, Google und SO - erfolglos. Vielleicht macht das Ziel Sinn:

Ich habe eine äußere < div> fungiert als Tab-basierte Anzeige. Innerhalb, plane ich, eine scroll-fähige Liste und einen "Showbereich" hinzuzufügen, der aus verschiedenen Inhalten besteht (Bilder, Text, Apps, etc.). Rückblickend ähnelt das Format dem E-Mail-Design von Outlook und iOS.

Die Registerkarten sind eine Kategorie von Daten, die Listenelemente ein anderes. Dies ist vergleichbar mit verschiedenen Mail-Ordnern (z. B. Junk-Mail -> Mail-Artikel 3 -> Inhalte anzeigen; Posteingang -> Mail-Artikel 2 -> Inhalte anzeigen).

Mein Anliegen ist es, diese Inhalte anzuzeigen, da es eine große Auswahl an Auswahlmöglichkeiten und viel Substanz für jeden gibt. Ich kann mir nicht vorstellen, alle außer der ausgewählten < div> zu verstecken, was wäre, als würde man alle Postsendungen neben der aktuellen ausblenden.

Ich dachte über lokale Dateien zu erstellen und sie basierend auf Artikelauswahl zu lesen. Selbst dann bin ich unsicher, was effektiv wäre. Wenn es nur ein Text wäre, könnte ich leicht die innereHTML der angezeigten < div> tauschen. Aber wäre das für meine Absicht nützlich?

Insgesamt, wie würde ich über dieses Design gehen? Was sind besondere Begriffe oder Designkonzepte, die Sie zum Nachdenken über diese und ähnliche Probleme empfehlen können?

Vielen Dank für die Zeit!

Quelle

2016-07-02 AlteredCow

Hier ist ein einfaches Beispiel für die Verwendung von Bootstrap und angularJS. Sie können die Eingabe der Inhalt der HTML-Code in verschiedenen HTML-Dateien, wie inbox.html, junkmail.html usw.

<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>

Quelle

2016-07-04 16:35:37

webdev - Daten innerhalb div austauschen

Antwort

Verwandte Themen