如何使用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将内容放入电子标签？

回答

相关问题