Last active
May 24, 2019 06:31
-
-
Save subchen/4d07dda61f88dcd9320a to your computer and use it in GitHub Desktop.
zero-clipboard demo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<style> | |
.zero-clipboard { | |
position: relative; | |
} | |
.btn-clipboard { | |
position: absolute; | |
top: 0; | |
right: 0; | |
z-index: 10; | |
display: block; | |
padding: 5px 8px; | |
border: 1px solid #ccc; | |
border-radius: 0 4px 0 4px; | |
font-size: 12px; | |
background-color: #fff; | |
cursor: pointer; | |
} | |
pre.code { | |
border: 1px solid #ccc; | |
background-color: #F7F7F9; | |
padding: 9px 14px; | |
} | |
</style> | |
<div class="zero-clipboard"><span class="btn-clipboard">Copy</span></div> | |
<pre class="code"> | |
public static void main() { | |
... | |
} | |
</pre> | |
<script type="text/javascript"> | |
$(function() { | |
$("pre > code.highlight").each(function() { | |
var $copy = '<div class="zero-clipboard"><span class="btn-clipboard">Copy</span></div>'; | |
$(this).parent().before($copy); | |
}); | |
}); | |
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// see https://github.com/zeroclipboard/zeroclipboard/ | |
/** | |
required jquery | |
required bootstrap 3.x | |
required zero-clipboard 2.x | |
css: | |
.zeroclipboard-is-hover { | |
color: #FFF; | |
background-color: #563D7C; | |
border-color: #563D7C; | |
} | |
.zeroclipboard-is-active { | |
} | |
html: | |
<span type="button" class="btn btn-default btn-clipboard" data-clipboard-text="Copy Text ...">Copy</span> | |
<div id="CopyElement">...</div> | |
<span type="button" class="btn btn-default btn-clipboard" data-clipboard-target="#CopyElement">Copy</span> | |
*/ | |
$(function() { | |
var clip = new ZeroClipboard($(".btn-clipboard")); | |
var $bridge = $("#global-zeroclipboard-html-bridge"); | |
clip.on("ready", function(e) { | |
$bridge.data("placement", "left").attr("title", "Copy to clipboard").tooltip(); | |
}); | |
clip.on("copy", function(e) { | |
//var c = $(e.target).parent().next(); | |
//clip.setText(c.text()); | |
var c = $(e.target); | |
var text = c.attr("data-clipboard-text"); | |
if (text === undefined) { | |
var selector = c.attr("data-clipboard-target"); | |
if (selector !== undefined) { | |
text = $(selector).text(); | |
} | |
} | |
clip.setText(text); | |
}); | |
clip.on("aftercopy", function(e) { | |
$bridge.attr("title", "Copied!").tooltip("fixTitle").tooltip("show").attr("title", "Copy to clipboard").tooltip("fixTitle"); | |
}); | |
clip.on("error", function(e) { | |
$bridge.attr("title", e.message).tooltip("fixTitle").tooltip("show"); | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment