webdev - div内のデータを交換する

用語、フレーズ、および表記法は、まだ動作しています。適切な表現がなければ、書籍、Google、そしてSOの私の問題を研究することができませんでした。おそらく目標は意味をなさないでしょう：

私はタブベースのディスプレイとして機能する外側の<を持っています。私は、スクロール可能なリストと、さまざまなコンテンツ（画像、テキスト、アプリなど）からなる「ショーエリア」を追加する予定です。遡って、このフォーマットはOutlookやiOSのメールデザインに似ています。

タブはデータの1つのカテゴリであり、リストは別のアイテムです。これは、異なるメールフォルダ（迷惑メール→メールアイテム3→表示コンテンツ、受信トレイ→メールアイテム2→表示コンテンツなど）に似ています。

私は、これらのコンテンツをどのように表示するかについて懸念しています。なぜなら、可能な選択範囲が広く、それぞれに多くの物質があるからです。選択されている< div>以外のすべてを隠すことは想像できません。これは、現在のもの以外のすべてのメールアイテムを隠すようなものです。

私はローカルファイルを作成し、アイテムの選択に基づいてそれらを読むことを考えました。それでも、何が効果的か確信しています。テキストだけだった場合は、< div>のinnerHTMLを簡単に入れ替えることができました。しかし、それは私の意図にとって有益でしょうか？

全体的に、私はこのデザインについてどう思いますか？これと同様の問題を考えるために推奨する特定の用語やデザインの概念は何ですか？

ありがとうございました！

出典

2016-07-02 AlteredCow

ここでは、bootstrapとangularJSの使用例を示します。入力することができますなど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>

など、さまざまなHTMLファイル、HTMLへのコンテンツ

出典

2016-07-04 16:35:37

webdev - div内のデータを交換する

答えて

関連する問題