最近、リンクをコピーするボタンをクリックしてこの問題を解決する必要がありました。最後に、クリップボード操作
を実装するオープン ソースの js Flash である ZeroClipBoard というソリューションを見つけました。しかし、多くの例を検索したところ、ほとんどの例では、ページ
に対して 1 つの固定コピー操作しか導入されていないことがわかりました。
そして私の要件はこれです
動的リピーターは各アドレスとコピーボタンを動的にロードします。
このソリューションの原理は次のとおりです。
js を使用して透明なフラッシュを動的にロードし、クリックしたいボタン上でそれをカバーし、フラッシュのホスト要素にイベントをバインドして値を動的に転送します。
フラッシュに複数のボタンを追加すると、大量のメモリが消費され、動的コードを作成するのが難しくなります。
最終的な解決策は次のとおりです:
1.ボディ内の非表示フラッシュ コンテナー 絶対位置
varLocalUrlManage ={
Clip:null,
ClipContainer:null,
InitClip:function(){
LocalUrlManage.Clip=newZeroClipboard.Client();
LocalUrlManage.ClipContainer=$("#ClipSwf ");
LocalUrlManage.Clip .setHandCursor(true);
LocalUrlManage.Clip.setCSSEffects(true);
LocalUrlManage.Clip.addEventListener("complete",function(client,text){
Tip.RightTip("#UrlAdd"," "コピー成功!");
LocalUrlManage.ClipContainer.html(LocalUrlManage.Clip.getHTML(80,25)); }}
2. ページの読み込み時に js を使用してクリップボード オブジェクトを初期化し、マウス ジェスチャとホスト コンテナーを設定してから、Flash を HTML に出力してコンテナーに出力します。 >
コードをコピーします
コードは次のとおりです: onmouseover="LocalUrlManage.SetClipValue(this,' #copyUrlValue<%#Eval("Id")%>')" >クリックしてコピー
//BrowserClip.IEClip($(SelectorEl).val()) ;
varoffset=$(obj).offset();
LocalUrlManage.offset({left:offset.left,top:offset.top}); SelectorEl).val());
}.
3. 各コピー ボタンにイベントを動的にバインドし、コピーする対応する値またはコントロールを関数に渡します。非表示の Flash コンテナーの上部のマージンを、イベントをトリガーして配置するボタン上に浮くようにします。コピーされる値は、
Clip.setText('text') (プラグインによって提供されるメソッド) を通じてフラッシュに渡されます。 ) これにより、複数のボタンをコピーする機能が実現されました。
ボタンの元の hovercss 切り替え効果は、その後は柔軟性が低下します。 jqueryで動的にスタイルを追加する効果はあまり良くありません。