0

单击图像，然后弹出一个框以复制相关代码？

Wolfram 的参考网站有这个功能，我怎样才能在我的 Github 页面中实现它？或一些类似的东西？（一个JS代码？）

任何现在的人的页面，主题？

http://reference.wolfram.com/mathematica/ref/Part.html

在此处输入图像描述

4

2 回答 2

1

你可以在这里看到我描述的结果

这个效果我完全不用javascript就可以实现，保持代码非常简单。

我们必须将图像和代码包装在一个容器中，以便我们知道哪个去哪里。我建议一个<figure>元素，因为正是出于这个原因。然后我们可以将我们的代码示例、解释和诸如此类的东西包装在一个不错的<figcaption>元素中。

我想说一个代码示例应该在 a 中<textarea>，因为它已经预先格式化，具有等宽字体，最重要的是可以完全选择用于复制strg+a

所以我们有以下结构：

<figure>
    <img />
    <figcaption>
        <textarea />
    </figcaption>
</figure>

然后我们可以用 CSS 隐藏<figcaption>, 所以默认情况下它是不可见的

figure figcaption {
    display: none;
}

现在，我们如何让它可见？有一个简洁但未被充分利用的特性tabindex，它允许我们通过键盘或鼠标使单个 html 元素“可聚焦”。通过将 tabindex 设置为 0，元素将插入到页面的正常选项卡流中。通过将 tabindex 设置为 -1，该项目是可点击的，但不能通过键盘聚焦。

所以我们在所有图形元素上设置了一个 -1 的 tabindex：

<figure tabindex="-1">
</figure>

现在，通过单击图像，您可以为整个图形元素提供焦点。我们可以使用它来显示带有 CSS 的框：

figure:focus figcaption {
    display: block;
}

这已经几乎是我们想要的了，只有当我们单击 时<textarea>，它才会获得焦点，然后再次消失，因为一次只能将一个项目集中在页面上。

因此，我们可以添加以下 CSS 片段，当我们将鼠标悬停时，它会继续向我们显示 figcaption：

figure figcaption:hover {
    display: block;
}

默认情况下，焦点元素在某些浏览器中会显示轮廓。这在你的情况下有点难看，所以我们可以用 CSS 全局关闭它：

*:focus {
    outline: none;
}

然后，您只需按照您希望的样式设置项目的样式、放置它们，就完成了。

我构建了一个小示例，您可以在其中看到正在运行的代码。只是检查一下。图片只是来自Lorem Pixel的示例图片，代码示例来自 ruby​​ 主页。

这是我的示例的代码（只有一点样式，因此您也可以看到一个示例）：

HTML

<figure class="codeImage" tabindex="-1">
    <img src="http://lorempixel.com/400/200/" />
    <figcaption>
        Some sample code, maybe with some explanation:
        <textarea>
# The Greeter class
class Greeter
  def initialize(name)
    @name = name.capitalize
  end

  def salute
    puts "Hello #{@name}!"
  end
end

# Create a new object
g = Greeter.new("world")

# Output "Hello World!"
g.salute
        </textarea>
    </figcaption>
</figure>

<figure class="codeImage" tabindex="-1">
    <img src="http://lorempixel.com/400/200/" />
    <figcaption>
        Some other code smaple, maybe with some explaination:
        <textarea>
# Output "I love Ruby"
say = "I love Ruby"
puts say

# Output "I *LOVE* RUBY"
say['love'] = "*love*"
puts say.upcase

# Output "I *love* Ruby"
# five times
5.times { puts say }

# Create a new object
g = Greeter.new("world")

# Output "Hello World!"
g.salute
        </textarea>
    </figcaption>
</figure>

CSS

/**
 * Example for images with copyable code sample on click
 */
*:focus {
    outline: none;
}

figure {
    box-sizing: border-box;
    width: 440px;
    height: 250px;
    padding: 20px;
    display: inline-block;
    margin: 20px;
    border: 1px solid #333;
    color: #333;
    background-color: #ccc;
    position: relative;
    z-index: 1;
}

figure figcaption {
    box-sizing: border-box;
    border: 1px solid #333;
    background-color: white;
    position: absolute;
    top: 70px;
    left: 0; 
    display: none;
    z-index: 2;
    width: 440px;
    padding: 10px;
}

figure figcaption textarea {
    width: 400px;
    min-height: 200px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

figure:focus figcaption {
    display: block;
}

figure figcaption:hover {
    display: block;
}
于 2013-09-06T06:51:37.553 回答
0

这就是我所做的@HyperGroups。但只是一个示例，您可以根据自己的情况进行修改。尤其是你将展示什么的文字。我建议使用AJAX。

我使用 jquery 对话框弹出。和一个接收参数的函数。

HTML

<div id="popup"></div> ....

jQuery

function show_popup(particular_id){....

CSS

img{ display: inline-b...

打开这个小提琴看看结果。

于 2013-09-06T06:44:27.200 回答