mirror/clipboard.js
1
0
Fork 0
mirror of https://github.com/zenorocha/clipboard.js.git synced 2023-08-10 21:12:48 +03:00
Code Issues Projects Releases Wiki Activity

Adds browser support and more docs

Browse Source
This commit is contained in:
Zeno Rocha 2015-09-19 02:26:13 -07:00
parent e1f8fe6cde
commit 473e6768e4
2 changed files with 72 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
demo.css
View File

@ -40,14 +40,17 @@ body {
========================================================================== */
.wrap {
margin: 0 auto 30px;
margin: 0 auto 60px;
width: 500px;
}
h1 {
margin-top: 80px;
}
h3 {
color: #333;
margin-top: 30px;
text-align: center;
margin-top: 40px;
font-size: 18px;
}
@ -128,6 +131,23 @@ pre code {
padding: 20px 5px 0;
}
/* Support
========================================================================== */
.support {
list-style: none;
}
.support li {
display: inline-block;
text-align: center;
margin: 10px 10px 0;
}
.support p {
margin: 0;
}
/* ==========================================================================
Footer
========================================================================== */

52
index.html
View File

@ -18,11 +18,31 @@
</header>
<main class="wrap">
<h1>Install</h1>
<p>You can get it on npm.</p>
<pre><code class="js">npm install clipboard --save</code></pre>
<p>Or bower, too.</p>
<pre><code class="js">bower install clipboard --save</code></pre>
<p>If you're not into package management, just <a href="https://github.com/zenorocha/clipboard.js/archive/master.zip">download a ZIP</a> file.</p>
<h1>Setup</h1>
<p>First, include the script located on the <code>dist</code> folder</p>
<pre><code class="html">&lt;script src="dist/clipboard.min.js"&gt;&lt;/script&gt;</code></pre>
<p>Now, you need to instantiate it using a DOM selector. This selector corresponds to the trigger element, i.e. <code>&lt;button&gt;</code>.</p>
<pre><code class="html">&lt;script&gt; new Clipboard('.btn'); &lt;/script&gt;</code></pre>
<h1>Usage</h1>
<p>First, you need to instantiate it using a DOM selector. This selector corresponds to the trigger element, i.e. <code>&lt;button&gt;</code>.</p>
<pre><code class="js">new Clipboard('.btn');</code></pre>
<p>There are different options for you to use and they all take advantage of <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes">HTML5 data attributes</a>.</p>
<h3>Copy text from attribute</h3>
@ -82,6 +102,32 @@
&lt;/button&gt;</code></pre>
<p>As you may expect, the <code>cut</code> action only works on <code>&lt;input&gt;</code> or <code>&lt;textarea&gt;</code> elements.</p>
<h1>Browser Support</h1>
<p>This library relies on both <a href="https://developer.mozilla.org/en-US/docs/Web/API/Selection">Selection</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand">execCommand</a> APIs. When combined, they're supported in the following browsers.</p>
<ul class="support">
<li>
<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/chrome/chrome_128x128.png" width="64" height="64" alt="Chrome logo">
<p>Chrome 42+</p>
<li>
<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/firefox/firefox_128x128.png" width="64" height="64" alt="Firefox logo">
<p>Firefox 41+</p>
</li>
<li>
<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/internet-explorer/internet-explorer_128x128.png" width="64" height="64" alt="Internet Explorer logo">
<p>IE 9+</p>
</li>
<li>
<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/opera/opera_128x128.png" width="64" height="64" alt="Opera logo">
<p>Opera 29+</p>
</li>
<li>
<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/safari/safari_128x128.png" width="64" height="64" alt="Safari logo">
<p>Safari ✘</p>
</li>
</ul>
</main>
<footer class="gradient text-center">