Question

我对JavaScript和jQuery不是很熟悉，而且我真的需要帮助来思考问题。我试图以与Windows 8中的Metro UI界面类似的方式向用户显示信息。

从本质上讲，我有一个不同大小的瓷砖页面（就像Metro / Modern UI一样）和每个瓷砖上的一小部分信息，例如帖子的日期。我希望能够单击磁贴并显示文本弹出窗口，其中包含与单击的磁贴相关的信息。

我认为如果内容是静态的，这将是一项简单的任务，但由于我正在基于Facebook RSS提要构建切片，所以即使弄清楚如何存储和显示我也会遇到很多困难瓷砖的主要文字。为了说明我的观点，我已经完成了一个非常简单的盒子样本，以及我想要的内容。

<html>
<body>
    <div class="large-box">
        <p>Date</p>
        <p>Basic synopsis</p>
            <div class="body-text">
                <p>This is the body text that I want hidden to start with, but visible in the pop-up.</p>
            </div>
    </div>

</body>
</html>

现在，我没有创建图块并用日期和任何其他信息填充它们的问题，但我不知道如何使文本内部文本在图块内部不可见，但仅限于点击并在弹出窗口中看到。

老实说，我甚至不知道我是否应该将文本存储在瓷砖内部，但这是我能想到组织数据的唯一方法。如果您还记得，我将在屏幕上显示最多25个这样的图块，我需要能够访问每个图块。同样，我之所以这么想是因为我之前使用的是jQuery UI Accordion，它隐藏了显示的文本，然后在点击时显示。

此时，即使您无法帮助我处理任何正常工作的代码示例或片段以及帮助或推进正确的方向，我们也会非常感激。

Answer 1

如果您从某个已知位置接收动态内容，那么您将无法静态编写此内容。

这需要在JavaScript上使用一些花哨的步法，因为有些东西不为人所知，我可以为你提供一些启动代码。

我强烈建议您动态创建这些图块。

//load the string content from where ever you're querying it from
var tile = getTileContent();

var lb = document.body.querySelector('large-box'),
    bt = document.createElement('div'),
    showContent = function () {

        //toggel
        if (bt.isOpen) {
            this.innerHTML = '';
            bt.isOpen = false;
        }else {

            this.innerHTML = '<p>' + this.content + '</p>';
            bt.isOpen = true;
        };
    };

bt.className = 'body-text';
bt.onclick = showContent;
bt.content = tile;
bt.isOpen = false;

lb.appendChild(bt);

Answer 2

你需要的是一个带有模态弹出组件的javascript框架，例如bootstrap modal dialogs：

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Title of the post in a tile
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Post title</h4>
      </div>
      <div class="modal-body">
        ...Post content...
      </div>
    </div>
  </div>
</div>

为页面上的多个元素创建文本弹出窗口

2 个答案: