浮层 poshytip.js样例 和 jquery复制span的内容到剪切板
程序员文章站
2022-05-15 23:53:32
...
1. 引入js和样式
<link rel="stylesheet" type="text/css" href="css/demo/overview.css">
<script type="text/javascript" src="js/libs/poshytip.js"></script>
2.js代码
floatDiv=function(){
$('.trigger').poshytip({
followCursor: true,
alignX: 'center',
alignY: 'top',
showTimeout: 200,
className: 'float-tips',
showOn: 'hover',
alignTo: 'target',
content: function() {
let name = $(this).data('name');
let number = $(this).data('number');
return '<div class="float-tips__cont">\n' +
' <div class="float-tips__cont-info">\n' +
' <p>名称:<span class="float-tips__data" id="copydata1">'+name+'</span></p>\n' +
' <p>编号:<span class="float-tips__data" id="copydata2">'+number+'</span></p>\n' +
' </div>\n' +
' <div class="float-tips__cont-op">\n' +
' <a class="float-tips__copy icon icon-copy" id="copytip1" title="复制" οnclick="copy(1);" data-clipboard-text="'+name+'" href="javascript:;"></a>\n' +
' <a class="float-tips__copy icon icon-copy" id="copytip2" title="复制" οnclick="copy(2);" data-clipboard-text="'+number+'" href="javascript:;"></a>\n' +
' </div>\n' +
' </div>';
},
offsetY: 5
});
}
copy=function (copydata) {
if(copydata==1){
var cont = $("#copydata1").text();
}else{
var cont = $("#copydata2").text();
}
var flag = copyText(cont);
alert(flag ? "复制成功!" : "复制失败!");
};
//赋值到剪切板
copyText = function (cont) {
var textarea = document.createElement("input");//创建input对象
var currentFocus = document.activeElement;//当前获得焦点的元素
document.body.appendChild(textarea);//添加元素
textarea.value = cont;
textarea.focus();
if(textarea.setSelectionRange)
textarea.setSelectionRange(0, textarea.value.length);//获取光标起始位置到结束位置
else
textarea.select();
try {
var flag = document.execCommand("copy");//执行复制
} catch(eo) {
var flag = false;
}
document.body.removeChild(textarea);//删除元素
currentFocus.focus();
return flag;
}
3.html 代码
鼠标焦点移到span上显示浮层
<span class="trigger" data-name="张三" data-number="001">张三(001)</span>
上一篇: 好玩趣图:再不疯狂我们就被人类吃掉了~