Question

我正在研究一个项目并为这样的地板灯设计布局：

主页：index.html

<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="generator" content="Polymer Starter Kit">
  <title>Test setup</title>

  <!-- Place favicon.ico in the `app/` directory -->
  <meta name="theme-color" content="#2E3AA1">

  <!-- Web Application Manifest -->
  <link rel="manifest" href="app/manifest.json">

  <!-- Tile color for Win8 -->
  <meta name="msapplication-TileColor" content="#3372DF">

  <!-- Add to homescreen for Chrome on Android -->
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="application-name" content="PSK">
  <link rel="icon" sizes="192x192" href="app/images/touch/chrome-touch-icon-192x192.png">

  <!-- Add to homescreen for Safari on iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="Polymer Starter Kit">
  <link rel="apple-touch-icon" href="app/images/touch/apple-touch-icon.png">

  <!-- Tile icon for Win8 (144x144) -->
  <meta name="msapplication-TileImage" content="app/images/touch/ms-touch-icon-144x144-precomposed.png">

  <!-- build:css styles/main.css -->
  <link rel="stylesheet" href="app/styles/main.css">
  <!-- endbuild-->

  <!-- build:js bower_components/webcomponentsjs/webcomponents-lite.min.js -->
  <script src="app/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <!-- endbuild -->

  <!-- Because this project uses vulcanize this should be your only html import
       in this file. All other imports should go in elements.html -->
  <link rel="import" href="app/elements/elements.html">

  <link rel="import" href="floor-map/floor-1.html">
  <link rel="import" href="floor-map/floor-2.html">
  <link rel="import" href="lighting-gui/light-panel.html">

  <!-- For shared styles, shared-styles.html import in elements.html -->
  <style is="custom-style" include="shared-styles"></style>

</head>

<body unresolved>
  <span id="browser-sync-binding"></span>
  <template is="dom-bind" id="app">

    <paper-drawer-panel id="paperDrawerPanel">
      <!-- Drawer Scroll Header Panel -->
      <paper-scroll-header-panel drawer fixed>
      </paper-scroll-header-panel>

      <!-- Main Area -->
      <paper-scroll-header-panel main id="headerPanelMain" condenses keep-condensed-header>
        <!-- Main Toolbar -->
        <paper-toolbar id="mainToolbar" class="tall">
          <paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>

          <span class="space"></span>

          <!-- Application name -->
          <div class="middle middle-container">
            <div class="app-name">Test</div>
          </div>

          <!-- Application sub title -->
          <div class="bottom bottom-container">
            <div class="bottom-title">The future of intelligent lighting system</div>
        </div>
        </paper-toolbar>

        <div style="background-color: #842dce">
            <paper-tabs attr-for-selected="data-route" selected="[[route]]">
                    <paper-tab link><a data-route="floor1" href="{{baseUrl}}">Floor-1</a></paper-tab>
                    <paper-tab link><a data-route="floor2" href="{{baseUrl}}floor2">Floor-2</a></paper-tab>
                    <paper-tab link><a data-route="floor3" href="{{baseUrl}}floor3">Floor-3</a></paper-tab>
                    <paper-tab link><a data-route="floor4" href="{{baseUrl}}floor4">Floor-4</a></paper-tab>
                    <paper-tab link><a data-route="floor5" href="{{baseUrl}}floor5">Floor-5</a></paper-tab>
                    <paper-tab link><a data-route="floor6" href="{{baseUrl}}floor6">Floor-6</a></paper-tab>
             </paper-tabs>

        </div>

        <!-- Main Content -->
        <div class="content">
          <iron-pages attr-for-selected="data-route" selected="{{route}}">

          <!-- This is floor maps: -->
          <section data-route="floor1">
              <paper-material elevation="1">
                <h2>Floor 1.</h2>
                <floor1-view></floor1-view>
              </paper-material>
          </section>
          <section data-route="floor2">
              <paper-material elevation="1">
                <h2>This is floor 2.</h2>
                <floor2-view></floor2-view>
              </paper-material>
          </section>
          <section data-route="floor3">
              <paper-material elevation="1">
                <h2>This is floor 3.</h2>
              </paper-material>
          </section>
          <section data-route="floor4">
              <paper-material elevation="1">
                <h2>This is floor 4.</h2>
              </paper-material>
          </section>
          <section data-route="floor5">
              <paper-material elevation="1">
                <h2>This is floor 5.</h2>
              </paper-material>
          </section>
          <section data-route="floor6">
              <paper-material elevation="1">
                <h2>This is floor 6.</h2>
              </paper-material>
          </section>


       <!-- this is the lighting layout of floor-->   
          <section data-route="light-panel">
              <paper-material elevation="1">
                <h2>**Group 1:**</h2>
                <light-panel></light-panel>
              </paper-material>
          </section>

          <section data-route="light-panel2">
              <paper-material elevation="1">
                <h2>**Group 2:**</h2>
                <light-panel></light-panel>
              </paper-material>
          </section>

          <section data-route="light-panel3">
              <paper-material elevation="1">
                <h2>Group 3:</h2>
                <light-panel></light-panel>
              </paper-material>
          </section>

          <section data-route="light-panel4">
              <paper-material elevation="1">
                <h2>Group 4:</h2>
                <light-panel></light-panel>
              </paper-material>
          </section>

          <section data-route="light-panel5">
              <paper-material elevation="1">
                <h2>Group 5:</h2>
                <light-panel></light-panel>
              </paper-material>
          </section>

          <section data-route="light-panel6">
              <paper-material elevation="1">
                <h2>Group 6:</h2>
                <light-panel></light-panel>
              </paper-material>
          </section>

          <section data-route="light-panel7">
              <paper-material elevation="1">
                <h2>Group 7:</h2>
                <light-panel></light-panel>
              </paper-material>
          </section>

          <section data-route="light-panel8">
              <paper-material elevation="1">
                <h2>Group 8:</h2>
                <light-panel></light-panel>
              </paper-material>
          </section>

          <section data-route="light-panel9">
              <paper-material elevation="1">
                <h2>Group 9:</h2>
                <light-panel></light-panel>
              </paper-material>
          </section>

          <section data-route="light-panel10">
              <paper-material elevation="1">
                <h2>Group 10:</h2>
                <light-panel></light-panel>
              </paper-material>
          </section>

          </iron-pages>
        </div>
      </paper-scroll-header-panel>
    </paper-drawer-panel>

    <paper-toast id="toast">
      <span class="toast-hide-button" role="button" tabindex="0" onclick="app.$.toast.hide()">Ok</span>
    </paper-toast>

  </template>

  <!-- build:js scripts/app.js -->
  <script src="app/scripts/app.js"></script>
  <!-- endbuild-->
</body>

</html>

我创建的一些辅助元素：

基map.html

<style>
  .big {
    --iron-icon-height: 200px;
    --iron-icon-width: 200px;
  }
</style>

<template>
      <paper-button data-dialog="actions" onclick="clickHandler(event)">
          <iron-icon class="big" src="../lighting-images/lighting.png"></iron-icon>
      </paper-button>

      <paper-dialog id="actions"> 
          <h2>Light Profile</h2> 
              <light-page></light-page>
      </paper-dialog> 
</template>
 </dom-module> 


<script> 
     Polymer({ 
        is: "group-map"
    }); 
</script> 

<script>
  function clickHandler(e) { 
      var button = e.target; 
      while (!button.hasAttribute('data-dialog') && button !== document.body) { 
        button = button.parentElement; 
      } 

      if (!button.hasAttribute('data-dialog')) { 
        return; 
      } 

      var id = button.getAttribute('data-dialog'); 
      var dialog = document.getElementById(id); 

      if (dialog) { 
          console.log("dialog open called.");
          dialog.open(); 
          console.log("dialog open called.");
      } 
    } 
</script>

光page.html中

<dom-module id="light-page"> 
  <style include="iron-flex iron-flex-alignment"></style>

  <style>
    .button1 {
      @apply(--layout-horizontal);
      @apply(--layout-start-justified);
    }

    .button3 {
      @apply(--layout-horizontal);
      @apply(--layout-end-justified);
    }
  </style>

  <template> 
      <div class="container horizontal start-justified layout">
              <!-- Iron images -->
          <img src="../lighting-images/led.png" class="image" alt="lighting-logo" />  
      </div>      

      <div class="container horizontal end-justified layout">
              <!-- Iron images -->
          <img src="../lighting-images/percentage.jpg" class="image" alt="percentage-logo" /> 
      </div> 

      <div align="right">
              <!-- paper slider -->
              <paper-slider id="light-brightness" pin value="0"></paper-slider>
              <styleis="custom-style">
                  paper-slider {
                    --paper-slider-height: 5px;
                  }
              </style>
      </div>

      <div class="buttons button1">
              <!-- paper buttons -->
              <paper-button class="custom indigo horizontal end-justified layout" id="light-on" raised>On</paper-button>
              <paper-button class="custom indigo" raised id="light-off">Off</paper-button>
              <paper-button class="custom indigo horizontal end-justified layout" raised>Submit</paper-button>
      </div>
 </template> 

</dom-module> 


<script> 
  Polymer({ 
        is: "light-page" 
     }); 
</script>

光panel.html

<dom-module id="light-panel" >
 <style>
        .image {
            padding: 2px;
            border-color: blue;
            border-width: 2px;
            border-style: solid;
            width: 150px;
            height: 150px;
        }
        .content-wrapper {
            background: white;
        }
  </style>

  <template>
     <div class="horizontal layout center-justified wrap content-wrapper">
        <group-map></group-map>
        <group-map></group-map>
        <group-map></group-map>
        <group-map></group-map>
        <group-map></group-map>
        <group-map></group-map>
        <group-map></group-map>
        <group-map></group-map>
        <group-map></group-map>
        <group-map></group-map>
    </div>
  </template>
</dom-module>

<script>
    Polymer({
        is: "light-panel"
    });
</script>

地板1.HTML

<dom-module id="floor1-view">
        <style>
            .image {
                padding: 2px;
                border-color: blue;
                border-width: 2px;
                border-style: solid;
                width: 150px;
                height: 150px;
            }
            .content-wrapper {
                background: white;
            }
        </style>
        <template>
                <div class="horizontal layout center-justified wrap content-wrapper">
                    <a href="/light-panel"><img class="image" src="../lighting-images/group-1.png"></a>
                    <a href="/light-panel2"><img class="image" src="../lighting-images/group-2.png"></a>
                    <a href="/light-panel3"><img class="image" src="../lighting-images/group-3.png"></a>
                    <a href="/light-panel4"><img class="image" src="../lighting-images/group-4.png"></a>
                    <a href="/light-panel5"><img class="image" src="../lighting-images/group-5.png"></a>
                    <a href="/light-panel6"><img class="image" src="../lighting-images/group-6.png"></a>
                    <a href="/light-panel7"><img class="image" src="../lighting-images/group-7.png"></a>
                    <a href="/light-panel8"><img class="image" src="../lighting-images/group-8.png"></a>
                    <a href="/light-panel9"><img class="image" src="../lighting-images/group-9.png"></a>
                    <a href="/light-panel10"><img class="image" src="../lighting-images/group-10.png"></a>
                </div>
        </template>
    </dom-module>

    <script>
        Polymer({
            is: "floor1-view"
        });
    </script>

light-panel.html 具有基于一层的灯光地图，该地图被分为几组。该组由 floor-1.html 表示。该组是图像URL锚标签的网格。所有网址都会重定向到聚合 index.html 页面的一部分。该部分是纸张对话元素的网格。对话页面设计为 light-page。** html中描述的布局。对话元素在** group-map.html 中定义。

问题是它适用于索引页面中的 Group-1 ，但来自 Group-2 和其他人的对话点击事件无效。虽然每个组都在 light-panel.html 中创建了完全相同的元素。

注意：所有导入都没问题，Chrome源/控制台终端没有错误。

伙计我哪里错了。感谢

Paper Dialogue Button意外行为

0 个答案: