jquery-zclip復制鏈接----小功能實現

github項目：https://github.com/patricklodder/jquery-zclip

但是項目是很早以前的，有一些star，因為功能很小，可以接受

支持的鈎子函數，夠我用的了

 

 

復制鏈接

 

實現上面這個效果，這個沒有引入js復制效果沒能出來，但是我把代碼放在下面

 css

.copyinput {
  width: 350px;
  height: 36px;
  line-height: 36px;
  background: #F5F7FA;
  border: 1px solid #AAB8D4;
  border-radius: 4px;
  font-size: 0;
  overflow: hidden;
  margin: 0 auto;
}
.copyinput input {
  display: inline-block;
  width: 77%;
  height: 34px;
  border: 0;
  font-size: 14px;
  color: #42455F;
  text-indent: 5px;
  background: #F5F6FA;
}
.copyinput span {
  display: inline-block;
  width: 23%;
  color: #4A5FE2;
  background: #CFDEFC;
  border-radius: 0 4px 4px 0;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
}

html

<div class="copyinput">
<input type="text" value="http://www.baidu.com" readonly="readonly" />
<span>復制鏈接</span>
</div>

js

<script src="default/js/global/jquery.js"></script>
<script src="default/js/global/jquery.zclip.js"></script>
<script>
$(function(){
$('.copyinput span').zclip({
　　//記得把這個文件引入
    path: 'default/js/global/ZeroClipboard.swf',
    copy: function () {//復制內容
        return $(this).siblings('input').val();
    },
    afterCopy: function () {//復制成功
        alert("復制成功")
    }
});
})
</script>