如何使用photonkit將內容放入電子標籤？

我想用選項卡式界面構建一個簡單的Electron應用程序。乍一看Photon-kit看起來很容易使用。我可以顯示選項卡，但我無法弄清楚如何在選項卡中顯示任何內容。我一直無法在網上找到展示如何添加內容的例子。如何使用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將內容放入電子標籤？

回答

相關問題