ZeroClipboardを複数使うサンプル

曲名: (Untitled)
パート1 -
クリップボードにコピー


パート2 -
クリップボードにコピー


パート3 -
クリップボードにコピー


パート4 -
クリップボードにコピー


パート5 -
クリップボードにコピー



説明とか

MML置き場ビルダーのコピーボタンについての解説です。

class属性が "mmlclip" のdiv要素をZeroClipBoardに関連付けします。

必要なもの
使い方

FC2 blogで利用する場合は、MML置き場ビルダーを参照ください

(0) サーバに必要なファイルを配置

(1) HEADのところに・・・

<link rel="stylesheet" href="css/mmlclip4fc2.css" />
<script type="text/javascript" src="js/ZeroClipboard.js"></script>
<script type="text/javascript" src="js/mmlclip4fc2.js" charset="UTF-8"></script>

(3) テキストエリア&ボタンの作成

title要素のところが、コピーされる内容になります。

<div class="mmlclip" title="MML@mml1">クリップボードにコピー<div>
<div class="mmlclip" title="MML@mml2">クリップボードにコピー<div>
<div class="mmlclip" title="MML@mml3">クリップボードにコピー<div>
<div class="mmlclip" title="MML@mml4">クリップボードにコピー<div>
<div class="mmlclip" title="MML@mml5">クリップボードにコピー<div>
実行速度

MMLコピーボタンの処理時間を計測してみました。

実際に Zeroclipboard の表示がされるまでには、もっとかかります。

2011/08/30 - 計測

MMLボタンの数Firefox6Chrome13IE9
24ms29ms63ms
3049ms707ms1041ms

©2011 たんらる