/clipboard.html
Created May 15, 2015
ZeroClipboard and Bootstrap
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css"/> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script> | |
| <script src="ZeroClipboard.js"></script> | |
| <style> | |
| .btn-clipboard { | |
| position: relative; | |
| right: 51px; | |
| border-radius: 0 4px 0 4px; | |
| } | |
| .zeroclipboard-is-hover { | |
| color: #fff; | |
| border-color: #563d7c; | |
| background-color: #563d7c; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h5>your code</h5> | |
| <div class="row-fluid"> | |
| <div class="code-box"> | |
| <span class="btn btn-default btn-sm btn-clipboard pull-right" data-clipboard-target="code"> | |
| Copy | |
| </span> | |
| <pre id="code"> | |
| var odds = evens.map(v => v + 1); | |
| var nums = evens.map((v, i) => v + i); | |
| var pairs = evens.map(v => ({even: v, odd: v + 1})); | |
| </pre> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| <script> | |
| $(function () { | |
| // zeroclipboard object | |
| var clip = new ZeroClipboard($('.btn-clipboard')); | |
| var clipElems = $(clip.elements()); | |
| // tooltip logic | |
| var tooltipOptions = {title: 'Copy to clipboard', placement: 'top'}; | |
| clipElems.tooltip(tooltipOptions); | |
| clipElems.click(function() { | |
| clipElems.data('bs.tooltip').options.title = 'Copied!'; | |
| clipElems.tooltip('show'); | |
| }); | |
| clipElems.mouseleave(function () { | |
| clipElems.data('bs.tooltip').options.title = tooltipOptions.title; | |
| }); | |
| }); | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment