ZeroClipboard 多個複製按鈕,多個複製連結 實現方式

龐順龍發表於2019-05-11

ZeroClipboard 多個複製按鈕,多個複製連結 實現方式

下面為簡要參考程式碼

<script src="../../Js/jquery/jquery.min.1.10.2.js" type="text/javascript"></script>
<script src="../../Js/layer/layer.min.js" type="text/javascript"></script>
<script src="../../Js/ZeroClipboard/ZeroClipboard.js" type="text/javascript"></script>
<script type="text/javascript">
    var clip = null; //ZeroClipboard.Client物件  
    var current_id = null; //當前所在的文字元素id  
    //指定ZeroClipboard.swf位置  
    ZeroClipboard.setMoviePath("../../Js/ZeroClipboard/ZeroClipboard.swf");
    $(function () {
        clip = new ZeroClipboard.Client(); //建立ZeroClipboard.Client物件  
        clip.setHandCursor(true); //滑鼠移動到元素上之後顯示手型  
        clip.glue('textid1'); //預設第一個
        //新增複製成功之後的操作  
        clip.addEventListener('complete', function () {
            //alert('複製成功,內容為:' + clip.clipText);
            layer.msg("複製成功:" + clip.clipText, 1, 9); 
         });
         //新增mouseover事件,當滑鼠移到該元素上面的時候,將flash div 也移到到該元素位置  
         $("div.clip_button").each(function () {
              $(this).bind('mouseover', function () {
                    var button_id = $(this).attr('id'); //複製div的id  
                    var text_id = button_id + '_text'; //要複製的元素id  
                    move_swf(text_id, button_id);
                });
            });
        });

    //移動浮動flash div到指定的地方,從而只需要使用一個flash即可在多個地方實現複製功能  
    function move_swf(text_id, button_id) {
    //重新指定flash浮動div位置,用reposition  
    clip.reposition(button_id);
    clip.setText($('#' + text_id).val());
    }  
</script>



var counts = 1;
foreach (var m in Model.OrganizationAgentOpenAccountList)
{
    var name = "textid" + counts + "_text";
    var btnID = "textid" + counts; 
    
	<tr style="height: 35px;">
		<td>
			<input type='text' disabled="disabled" id='@name' value="@m.StatisticsOpenAccountName" />
			@m.StatisticsOpenAccountName
		</td>
		<td align="right">
			<div id='@btnID' class='clip_button' style=" border:0px solid gray; width:60px; color:Blue;">
				複製連結
			</div>
		</td>
	</tr> 

    counts++;

}


龐順龍最後編輯於:4年前

內容均為作者獨立觀點,不代表八零IT人立場,如涉及侵權,請及時告知。

相關文章