Question

我有当前代码，它隐藏/显示iframe（外部页面通过cgi呈现文本列 - 从左到右显示）通过页面顶部的按钮。现在，iframe使用绝对定位，但我希望他们能够重新排序＆＃39;并根据隐藏与显示的位置更改位置。 EX：如果仅显示2个iframe，则会减少左侧占用的空间。这很重要，因为我将添加的内容多于一次可以放在页面上的内容。（另外，我正在尝试更改Jscript以默认隐藏所有内容，而不是在页面加载时显示）

＆＃13;

// A simple interface
public interface CreationTimestampAware {
  void setCreationTime(Date date);
  Date getCreationTime();
}

// Define the entity listener
public class CreationTimestampListener {
  @PrePersist
  public void onPrePersist(Object entity) {
    // entity implements a CreationTimestampAware interface that exposes
    // the single method #setCreationTime which we call here to set
    // the value on the entity.
    //  
    // Just annotate the entities you want with this functionality
    // and implement the CreationTimestampAware interface
    if ( CreationTimestampAware.class.isInstance( entity ) ) {
      ( (CreationTimestampAware) entity ).setCreationTime( new Date() );
    }
  }
}

// Link to your entity
@EntityListeners({CreationTimestampListener.class})
public class SomeEntity implements CreationTimeAware {
  // specify your date property and implement the interface here
}

＆＃13;

@PrePersist
private void onPersistCallback() {
  // just set the value here
  // this will only ever be called once, on a Persist event which
  // is when the insert occurs.  
  this.date = new Date();
}

＆＃13;

    function myFunctionui() {

      var x = document.getElementById('ui');

      if (x.style.display === 'none') {
        x.style.display = 'block';
      } else {
        x.style.display = 'none';
      }
    }

    function myFunctiontic() {
      var x = document.getElementById('tic');
      if (x.style.display === 'none') {
        x.style.display = 'block';
      } else {
        x.style.display = 'none';
      }
    }

    function myFunctionlab() {
      var x = document.getElementById('lab');
      if (x.style.display === 'none') {
        x.style.display = 'block';
      } else {
        x.style.display = 'none';
      }
    }

    function myFunctionzone1_4() {
      var x = document.getElementById('zone1_4');
      if (x.style.display === 'none') {
        x.style.display = 'block';
      } else {
        x.style.display = 'none';
      }
    }

    function myFunctionzone5() {
      var x = document.getElementById('zone5');
      if (x.style.display === 'none') {
        x.style.display = 'block';
      } else {
        x.style.display = 'none';
      }
    }

    function myFunctionslas() {
      var x = document.getElementById('slas');
      if (x.style.display === 'none') {
        x.style.display = 'block';
      } else {
        x.style.display = 'none';
      }
    }

    function myFunctionhiks() {
      var x = document.getElementById('hiks');
      if (x.style.display === 'none') {
        x.style.display = 'block';
      } else {
        x.style.display = 'none';
      }
    }

＆＃13;

Answer 1

我明白了。

首先，摆脱position:absolute想法，因为有一种更简单的方法可以解决这个问题。

另外，请勿将iframe包装在div中。 Div是块元素，意味着它们会故意破坏一条线，但是iframe是内联的，这意味着只有当线到达屏幕的末尾时它们才会断行，正如您在此答案中所看到的那样。（但是，如果您愿意，可以将所有iframe包装在div中。）

我建议您为html和正文删除overflow: hidden，以便较小的屏幕可以看到您想要的内容。

你需要的唯一CSS就是iframe：white-space: nowrap所以这些行永远不会破坏#iframeContainer {display: none}，因为你希望默认情况下这一切都与其子iframe一样。

您的JavaScript中存在一个可以轻松修复的问题。正如我之前提到的，iframe是内联的。但是，在你的功能中，它表示要制作它们＆＃34;阻止＆＃34;如果按钮被点击时显示为＆＃34;无＆＃34;。要解决这个问题，只需更改＆＃34;阻止＆＃34; to＆＃34; inline＆＃34;。（注意：我保留了＆＃34; ui＆＃34;＆＃34;阻止＆＃34;因为你只是希望并排iframe。）另外，修复我的错误遇到，根据显示内容生成if语句＆＃34; inline＆＃34;而不是＆＃34;无＆＃34;。例如，写if (x.style.display === 'inline') {x.style.display = 'none';} else {x.style.display = 'inline'};而不是if (x.style.display === 'none') {x.style.display = 'inline';} else {x.style.display = 'none';}。另外，要修复加载时无显示的错误，只需将document.getElementById("iframeContainer").style.display = "block";添加到if if语句外的每个函数中。

看一下片段，清楚地看到我的意思。（它有效！）

＆＃13;

var frameContainer = document.getElementById("iframeContainer");
function myFunctionui() {

      var x = document.getElementById('ui');

      if (x.style.display === 'none') {
        x.style.display = 'block';
      } else {
        x.style.display = 'none';
      }
    }

    function myFunctiontic() {
      var x = document.getElementById('tic');
      if (x.style.display === 'inline') {
        x.style.display = 'none';
      } else {
        x.style.display = 'inline';
      }
      frameContainer.style.display = "block";
    }

    function myFunctionlab() {
      var x = document.getElementById('lab');
      if (x.style.display === 'inline') {
        x.style.display = 'none';
      } else {
        x.style.display = 'inline';
      }
      frameContainer.style.display = "block";
    }

    function myFunctionzone1_4() {
      var x = document.getElementById('zone1_4');
      if (x.style.display === 'inline') {
        x.style.display = 'none';
      } else {
        x.style.display = 'inline';
      }
      frameContainer.style.display = "block";
    }

    function myFunctionzone5() {
      var x = document.getElementById('zone5');
      if (x.style.display === 'inline') {
        x.style.display = 'none';
      } else {
        x.style.display = 'inline';
      }
      frameContainer.style.display = "block";
    }

    function myFunctionslas() {
      var x = document.getElementById('slas');
      if (x.style.display === 'inline') {
        x.style.display = 'none';
      } else {
        x.style.display = 'inline';
      }
      frameContainer.style.display = "block";
    }

    function myFunctionhiks() {
      var x = document.getElementById('hiks');
      if (x.style.display === 'inline') {
        x.style.display = 'none';
      } else {
        x.style.display = 'inline';
      }
      frameContainer.style.display = "block";
    }

＆＃13;

#iframeContainer {white-space: nowrap; display: none;}
#iframeContainer iframe {display: none;}

＆＃13;

<button onclick="myFunctionui()">^</button>

<div id="ui">
  <button onclick="myFunctiontic()">TICs</button>
  <button onclick="myFunctionlab()">LABs</button>
  <button onclick="myFunctionzone1_4()">ZONE 1-4</button>
  <button onclick="myFunctionzone5()">ZONE 5</button>
  <button onclick="myFunctionslas()">SLAS</button>
  <button onclick="myFunctionhiks()">HIKS</button>
</div>

<div id="iframeContainer">

  <iframe id="tic"  src="https://itcrops.itap.purdue.edu/opstools/ticstatus/ticstatus.cgi" width="130" frameborder="0"></iframe>
  <iframe id="lab" src="https://itcrops.itap.purdue.edu/opstools/labstatus/labstatus.cgi" width="130" frameborder="0"></iframe>
  <iframe id="zone1_4" src="https://itcrops.itap.purdue.edu/opstools/pr/Dev/lastat/lastations1_4.cgi" width="250" frameborder="0"></iframe>
  <iframe id="zone5" src="https://itcrops.itap.purdue.edu/opstools/pr/Dev/lastat/lastations5.cgi" width="250" frameborder="0"></iframe>
  <iframe id="slas" src="https://itcrops.itap.purdue.edu/opstools/pr/Dev/lastat/slastations.cgi" width="250" frameborder="0"></iframe>
  <iframe id="hiks" src="https://itcrops.itap.purdue.edu/opstools/pr/Dev/lastat/hiksstations.cgi" width="250" frameborder="0"></iframe>

</div>

＆＃13;

通过隐藏/显示重新定位iframe

1 个答案: