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

update data-attributes

Browse Source
This commit is contained in:
Mauricio Soares 2015-09-28 14:16:53 -03:00
parent 82e40ac466
commit 0f1b243a4a
1 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
index.html
View File

@ -69,14 +69,14 @@ allowtransparency="true" frameborder="0" scrolling="0" width="156" height="30"><
<h3>Copy text from another element</h3>
<p>A pretty common use case is to copy content from another element. You can do that by adding a <code>data-target</code> attribute in your trigger element.</p>
<p>A pretty common use case is to copy content from another element. You can do that by adding a <code>data-clipboard-target</code> attribute in your trigger element.</p>
<p>The value you include on this attribute needs to match another's element <code>id</code> attribute.</p>
<div id="example-target" class="example">
<div class="input-group">
<input id="foo" type="text" value="https://github.com/zenorocha/clipboard.js.git">
<span class="input-group-button">
<button class="btn" type="button" data-target="foo">
<button class="btn" type="button" data-clipboard-target="foo">
<img class="clippy" src="assets/images/clippy.svg" width="13" alt="Copy to clipboard">
</button>
</span>
@ -87,13 +87,13 @@ allowtransparency="true" frameborder="0" scrolling="0" width="156" height="30"><
&lt;input id="foo" value="https://github.com/zenorocha/clipboard.js.git"&gt;
&lt;!-- Trigger --&gt;
&lt;button class="btn" data-target="foo"&gt;
&lt;button class="btn" data-clipboard-target="foo"&gt;
&lt;img src="assets/clippy.svg" alt="Copy to clipboard"&gt;
&lt;/button&gt;</code></pre>
<h3>Cut text from another element</h3>
<p>Additionally, you can define a <code>data-action</code> attribute to specify if you want to either <code>copy</code> or <code>cut</code> content.</p>
<p>Additionally, you can define a <code>data-clipboard-action</code> attribute to specify if you want to either <code>copy</code> or <code>cut</code> content.</p>
<p>If you omit this attribute, <code>copy</code> will be used by default.</p>
<div id="example-action" class="example">
@ -101,7 +101,7 @@ allowtransparency="true" frameborder="0" scrolling="0" width="156" height="30"><
<textarea id="bar" cols="62" rows="5" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga.</textarea>
</div>
<div class="form-actions">
<button class="btn" type="button" data-action="cut" data-target="bar">
<button class="btn" type="button" data-clipboard-action="cut" data-clipboard-target="bar">
Cut to clipboard
</button>
</div>
@ -111,7 +111,7 @@ allowtransparency="true" frameborder="0" scrolling="0" width="156" height="30"><
&lt;textarea id="bar"&gt;Mussum ipsum cacilds...&lt;/textarea&gt;
&lt;!-- Trigger --&gt;
&lt;button class="btn" data-action="cut" data-target="bar"&gt;
&lt;button class="btn" data-clipboard-action="cut" data-clipboard-target="bar"&gt;
Cut to clipboard
&lt;/button&gt;</code></pre>
@ -119,14 +119,14 @@ allowtransparency="true" frameborder="0" scrolling="0" width="156" height="30"><
<h3>Copy text from attribute</h3>
<p>Truth is, you don't even need another element to copy its content from. You can just include a <code>data-text</code> attribute in your trigger element.</p>
<p>Truth is, you don't even need another element to copy its content from. You can just include a <code>data-clipboard-text</code> attribute in your trigger element.</p>
<div id="example-text" class="example">
<button class="btn" data-action="copy" data-text="Just because you can doesn't mean you should — clipboard.js">Copy to clipboard</button>
<button class="btn" data-clipboard-action="copy" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">Copy to clipboard</button>
</div>
<pre><code class="html">&lt;!-- Trigger --&gt;
&lt;button class="btn" data-text="Just because you can doesn't mean you should — clipboard.js"&gt;
&lt;button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js"&gt;
Copy to clipboard
&lt;/button&gt;</code></pre>