Question

我想构建一个带标签界面的简单Electron应用程序。乍一看，Photon-kit看起来很容易使用。我可以显示标签，但我无法弄清楚如何在标签中显示任何内容。我一直无法在网上找到任何显示如何添加内容的示例。

如果有人能指出我的例子，我会很感激，或者如果它不是太复杂，修改我一直在试验的代码，告诉我它是如何完成的。

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

问候，吉姆

Answer 1

我想问题显示我使用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>

问候，吉姆

如何使用photonkit将内容放入电子标签？

1 个答案: