2013-06-06 133 views
1

我想在動態生成HTML的頁面上使用ZeroClipboard插件的最新版本。我嘗試了幾種不同的實現方式,但它們都具有相同的整體效果。我看起來最終會出現一個包含Flash元素的頁面,因爲當我右鍵單擊適當的元素時,彈出「關於Flash Player」彈出窗口 - 但我也看到在相同的彈出窗口中「Movie not loaded」ZeroClipboard事件沒有觸發

我正在使用JQuery 1.9.1和Twitter Bootstrap 2.3.1。我的Flash插件是v11.7.700.202。我的Web服務器IIS7.5是

我使用動態生成HTML是在一個循環中讀取用戶ID的排列,看起來像這樣的代碼:

str=str+ '<span class="bMail_address" id=span-"'+ 
    st.EmailAddresses[i]+ 
    '" data-clipboard-text="'+ 
    st.EmailAddresses[i]+ 
    '@mydomain.com">'+ 
    st.EmailAddresses[i] + 
    "@mydomain.com&nbsp;&nbsp;</span>"; 

通過數組循環和outputtng後得到的線,然後我嘗試在ZeroClipboard東西添加如下: -

// bind ZeroClipboard 
$('.bMail_address').each (function() { 
    // read text to copy from the data-clipboard-text attribute 
    var msg=$(this).attr('data-clipboard-text'); 

    //create ZeroCiplboard object 
    var clip = new ZeroClipboard(); 

    // set the text to copy 
    clip.setText(msg); 

    // setup event handlers 
    clip.on('complete', function (client, text) { 
     alert("copied: "+text+ "to clipboard"); 
    }); 

    clip.on('noflash', function (client, args) { 
     alert("You don't support flash"); 
    }); 

    // glue the object to the element 
    clip.glue($(this)); 

}); 

使用Chrome的調試工具,我可以看到迭代通過循環爲我所有新創建的對象創建新ZeroClipboard對象和有沒有未捕獲的例外,但警報從未發生過,所以我假設的「完整」事件永遠不會觸發

我敢肯定,我做了一些簡單的小白錯誤,但我看不出它

所有的想法和建議,感激地收到

回答

2

關於閃光燈錯誤:通過增加提供給瀏覽器中的 「ZeroClipboard.swf」 文件:

`ZeroClipboard.setDefaults({ moviePath: 'http://YOURSERVER/path/ZeroClipboard.swf' });` 

還看到:https://github.com/zeroclipboard/ZeroClipboard/blob/master/docs/instructions.md

第二你想添加到剪貼板什麼時候?

什麼(膠水這個)將是一個文本,什麼時候是事件(b.e.一個按鈕單擊)。

Glue()將一個點擊事件添加到您粘貼的dom級別元素。如果元素得到'data-clipboard-text',它的值將被膠水使用(你不必設置它)。

例如:點擊時添加的電子郵件地址複製到剪貼板(剪輯將爲每個電子郵件地址):

<script> 

ZeroClipboard.setDefaults({ moviePath: 'ZeroClipboard-master/ZeroClipboard.swf' }); 

$(function() { 

    st = {} 
    st.EmailAddresses = Array('test','test2','test3'); 
    $.each(st.EmailAddresses,function(i,emailadres) 
    { 

     str = '<span class="bMail_address" id=span-"'+ 
     emailadres+ 
     '" data-clipboard-text="'+ 
     emailadres+ 
     '@mydomain.com">'+ 
     emailadres + 
     "@mydomain.com&nbsp;&nbsp;</span>"; 

     $('.container').append(str); 

    }); 

    var clip = new Array(); 
    // bind ZeroClipboard 
    $('.bMail_address').each (function(i,email) { 
    //create ZeroCiplboard object 
    clip[i] = new ZeroClipboard(); 

    clip[i].on('complete', function (client, text) { 
    alert("copied: "+ text.text+ " to clipboard"); 
    }); 

    clip[i].glue(email); 
    }); 


}) 
</script> 

注:在的onComplete功能文本是一個對象,所以使用text.text來提醒它作爲字符串

+0

感謝您的建議,我會在週末嘗試 –

+0

不幸的是,它似乎並沒有工作,但感謝您的努力,而且代碼比我的更好。 –

+0

我可以看到每個「Clip [i]」被創建,並且爲每個剪輯對象內的moviePath(相同的域,不同的目錄)和處理程序創建的選項都被創建。但是,當我單擊網頁中的電影對象時,事件並未被解僱。 電影對象defintely創建因爲當我右鍵單擊我得到的「關於Adobe Flash Player」菜單,而不是通常的一個HTML元素 就如何進一步調試這個任何想法? –