之前我們實現實現剪貼簿功能都用到了flash外掛,加上自己對javascript也不是很熟也寫不出來,現在我們可以用Clipboard.js庫類實現無需Flash的剪貼簿的功能了
工具/原料
sublime text 3編輯器
Clipboard.js庫
jquery1.8以上 ,這個是layer要用到的
layer.js web彈層元件
方法/步驟
先開啟submit text 3編輯器新建一個html檔案,然後去下載jquery1.8以上的隨便一個版本,也可以使用百度的
//例項化Clipboard物件並把複製按鈕的類.btn傳進去
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
//這裡是layer.js的一個彈層提示效果
layer.msg('複製成功');
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
第四步就是實現複製DIV裡面的內容了
DIV程式碼和複製按鈕程式碼如下:
javascript程式碼如下:
//例項化Clipboard物件並把複製按鈕的類.btn1傳進去
var clipboard1 = new Clipboard('.btn1');
clipboard1.on('success', function(e) {
//這裡是layer.js的一個彈層提示效果
layer.msg('複製成功',{
time: 3000, //3s後自動關閉
btn: ['明白了', '知道了']
});
console.log(e);
});
clipboard1.on('error', function(e) {
console.log(e);
});
全部的程式碼如下:
* {margin: 0; padding:0; font-family: '微軟雅黑'}
#con {width: 800px; overflow: hidden; padding: 10px; margin: 20px auto; background: #F9F9F9; border: 1px solid #ccc;}
h3 {text-align: center; color: red;}
.copy {width: 400px; height: 100px; margin: 10px auto;}
.inp {width: 288px; height: 38px; border: 1px solid #3BB4F2; border-right: 1px; outline:none; float: left; font-size: 20px; color:red; padding: 0 5px;}
.btn {width: 100px; height: 40px; border: none; float: left; color: #fff; background: #3BB4F2; outline:none; font-size: 24px;}
.btn1 {border-radius: 5px; margin-left:150px; margin-top: 10px;}
.div_copy {width: 400px; height: 100px; margin: 10px auto; text-align: center;}
#dd {border: 1px solid #ccc; padding: 5px; color: red;}
複製表單裡面的
複製DIV裡面的
//例項化Clipboard物件並把複製按鈕的類.btn傳進去
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
//這裡是layer.js的一個彈層提示效果
layer.msg('複製成功');
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
//例項化Clipboard物件並把複製按鈕的類.btn1傳進去
var clipboard1 = new Clipboard('.btn1');
clipboard1.on('success', function(e) {
//這裡是layer.js的一個彈層提示效果
layer.msg('複製成功',{
time: 3000, //3s後自動關閉
btn: ['明白了', '知道了']
});
console.log(e);
});
clipboard1.on('error', function(e) {
console.log(e);
});