photonkitを使用して電子タブにコンテンツを挿入するにはどうすればよいですか？

タブ付きのインターフェースを備えた簡単な電子アプリを作りたいと思います。一見してPhoton-kitは使いやすく見えました。タブを表示することはできますが、タブにコンテンツを表示する方法を理解することはできません。私はどのようにコンテンツを追加するかを示すWeb上の例を見つけることができませんでした。photonkitを使用して電子タブにコンテンツを挿入するにはどうすればよいですか？

誰かが私に例を教えてもらえれば、私はそれを感謝するでしょうし、あまりにも複雑でない場合は、私が実験を行っているコードを修正して、どのようにしているかを教えてください。

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Test</title> 

    <!-- Stylesheets --> 
    <link rel="stylesheet" href="./css/photon.min.css"> 

    <!-- Javascript --> 
    <!--<script src="js/menu.js" charset="utf-8"></script> --> 
    </head> 
    <body> 
    <div class="window"> 

     <!-- .toolbar-header sits at the top of your app --> 
     <header class="toolbar toolbar-header"> 
      <h1 class="Test"</h1> 
     </header> 

     <div class="tab-group"> 
      <div class="tab-item active"> 
      <span class="icon icon-cancel icon-close-tab"></span> 
      Tab1 
      </div> 
      <div class="tab-item"> 
      <span class="icon icon-cancel icon-close-tab"></span> 
      Tab2 
      </div> 
      <div class="tab-item"> 
      <span class="icon icon-cancel icon-close-tab"></span> 
      Tab3 
      </div> 
     </div> 

     <!-- Your app's content goes inside .window-content --> 

    </body> 
</html>

よろしく、ジム

出典

2017-08-09 Cleanman2

私は質問は私がHTMLでどのように動作するかを示して少し推測します。とにかく、他の誰かが私のように立ち往生した場合に備えて。多くの試行錯誤の後、私が必要とするテストコードがいくつかあります。

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Test</title> 

    <!-- Stylesheets --> 
    <link rel="stylesheet" href="./css/photon.min.css"> 

    <!-- Javascript --> 
    <!--<script src="js/menu.js" charset="utf-8"></script> --> 
    </head> 
    <body> 
    <div class="window"> 

     <!-- .toolbar-header sits at the top of your app --> 
     <header class="toolbar toolbar-header"> 
      <h1 class="title">Test</h1> 
     </header> 

     <div class="tab-group"> 
      <div class="tab-item" onclick="showTab(event, 'income')" > 
      <span class="icon icon-cancel icon-close-tab"></span> 
      Income 
      </div> 
      <div class="tab-item active" onclick="showTab(event, 'expense')"> 
      <span class="icon icon-cancel icon-close-tab"></span> 
      Expense 
      </div> 
      <div class="tab-item" onclick="showTab(event, 'names')"> 
      <span class="icon icon-cancel icon-close-tab"></span> 
      Names 
      </div> 
     </div> 

     <!-- Your app's content goes inside .window-content --> 
    <div id="income" class="window-content" style="display: none;"> 
     Test1 
    </div> 
    <div id="expense" class="window-content" style="display:none;"> 
     Test2 
    </div> 
    <div id="names" class="window-content" style="display:none;"> 
     Test3 
    </div> 
    <script> 
     function showTab(event, tabName) { 
      //alert('test'); 
      var i, tabcontent, tablinks; 
      tabcontent = document.getElementsByClassName("window-content"); 
      for (i=0; i < tabcontent.length; i++) { 
       tabcontent[i].style.display = "none"; 
      } 

      tablinks = document.getElementsByClassName("tablinks"); 
      for (i=0; i < tablinks.length; i++) { 
       tablinks[i].className = tablinks[i].className.replace("active", ""); 
      } 
      document.getElementById(tabName).style.display = "block"; 
      event.currentTarget.className += " active"; 
     } 
     </script> 
    </body> 
</html>

よろしく、ジム

出典

2017-08-10 21:07:01 Cleanman2

photonkitを使用して電子タブにコンテンツを挿入するにはどうすればよいですか？

答えて

関連する問題