資訊專欄INFORMATION COLUMN
雙十一已經(jīng)來臨，天貓雙11活動已經(jīng)啟動了，超級紅包活動也啟動了，如何給自己的網(wǎng)站添加一鍵復(fù)制淘口令功能？
第一步：下載JS文件
clipboard.js 是一個 Github 上的開源項目，可以實現(xiàn)純 JavaScript 的瀏覽器內(nèi)容復(fù)制到系統(tǒng)剪貼板的功能！
第二步：引用JS文件
將下載的 clipboard.min.js 上傳到網(wǎng)站根目錄，在 WordPress 的 footer.php 的末尾添加如下代碼：
<script src="/clipboard.min.js" type="text/javascript"></script>
<script>
var clipboard = new Clipboard('.itemCopy');
clipboard.on('success',
function(e) {
if (e.trigger.disabled == false || e.trigger.disabled == undefined) {
e.trigger.innerHTML = "復(fù)制成功";
e.trigger.disabled = true;
setTimeout(function() {
e.trigger.innerHTML = "一鍵復(fù)制";
e.trigger.disabled = false;
},
2000);
}
});
clipboard.on('error',
function(e) {
e.trigger.innerHTML = "復(fù)制失敗";
});
</script>CSS美化代碼：
.red_tkl {
color: #faffffde;
border: solid 1px #980c10;
background: #d81b21;
background: -webkit-gradient(linear, left top, left bottombottom, from(#ed1c24), to(#aa1317));
background: -moz-linear-gradient(top, #ed1c24, #aa1317);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
.red_tkl:hover {
background: #b61318;
background: -webkit-gradient(linear, left top, left bottombottom, from(#c9151b), to(#a11115));
background: -moz-linear-gradient(top, #c9151b, #a11115);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115');
}
.red_tkl:active {
color: #de898c;
background: -webkit-gradient(linear, left top, left bottombottom, from(#aa1317), to(#ed1c24));
background: -moz-linear-gradient(top, #aa1317, #ed1c24);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');
}
.button_tkl {
display: inline-block;
*display: inline;
vertical-align: baselinebaseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button_tkl:hover {
text-decoration: none;
}
.button_tkl:active {
position: relative;
top: 1px;
}第三步：使用教程
JS與CSS文件引用之后，在文章中的某個需要復(fù)制的地方放一個按鈕就可以了，代碼如下：
<button class="itemCopy red_tkl button_tkl" id="TKLS" type="button" data-clipboard-text="需要復(fù)制的內(nèi)容">一鍵復(fù)制</button>
本文首發(fā)于好主機(jī)
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/128236.html
摘要：新手站長網(wǎng)整理了一下從阿里云服務(wù)器購買服務(wù)器節(jié)點選擇及備案使用寶塔面板實現(xiàn)云服務(wù)器環(huán)境一鍵配置安裝到網(wǎng)站上線全過程阿里云服務(wù)器購買阿里云服務(wù)器購買還是很簡單的，直接去官網(wǎng)選擇適合自己的配置即可。阿里云服務(wù)器應(yīng)該算是國內(nèi)云服務(wù)器中的NO.1，很多新手站長最初都是從虛擬主機(jī)開始搭建網(wǎng)站的，剛剛接觸云服務(wù)器的站長要自己搭建Web環(huán)境有些亂，其實我們使用阿里云服務(wù)器結(jié)合目前國內(nèi)的主機(jī)面板即可輕松應(yīng)對...
摘要：阿里云服務(wù)器應(yīng)該算是國內(nèi)云服務(wù)器中的，很多新手站長最初都是從虛擬主機(jī)開始搭建網(wǎng)站的，剛剛接觸云服務(wù)器的站長要自己搭建環(huán)境有些亂，其實我們使用阿里云服務(wù)器結(jié)合目前國內(nèi)的主機(jī)面板即可輕松應(yīng)對。阿里云服務(wù)器應(yīng)該算是國內(nèi)云服務(wù)器中的NO.1，很多新手站長最初都是從虛擬主機(jī)開始搭建網(wǎng)站的，剛剛接觸云服務(wù)器的站長要自己搭建Web環(huán)境有些亂，其實我們使用阿里云服務(wù)器結(jié)合目前國內(nèi)的主機(jī)面板即可輕松應(yīng)對。新手...
摘要：本文將介紹在云廠商購買服務(wù)器之后，為了確保服務(wù)器的安全，開發(fā)者應(yīng)該要做的一些配置。新建云服務(wù)器實例在開始配置之前，我們先新建一個云服務(wù)器實例。 推薦理由： 許多個人開發(fā)者在云服務(wù)器上搭建網(wǎng)站時，喜歡使用 Ubuntu 操作系統(tǒng)；那么在云廠商購買 了Ubuntu 服務(wù)器之后，如何確保服務(wù)器的安全，以及如何正確配置它，我覺得這點很關(guān)鍵；而我今天推薦的這篇文章，就介紹了在購買 Ubuntu ...
