b2主题自带的代码高亮没有一键复制,遇到长代码的时候,还得选中一直滑动鼠标才可以复制,为此,暖岛站长(阿叶)写了一键复制功能,但是样式还有待美化,为此作为菜鸟的我,百度了一下代码,改了改样式,完成了一键复制功能。将下列js代码放入子主题下的child.js之中,强制刷新即可完成部署!
//复制代码(阿叶写:nuandao.cn、紫安优化:zianv.com)
window.alert = alert;
function alert(data, callback) { //回调函数
var alert_bg = document.createElement('div');
alert_box = document.createElement('div'),
alert_text = document.createElement('div'),
alert_btn = document.createElement('div'),
textNode = document.createTextNode(data ? data : ''),
btnText = document.createTextNode('确 定');
// 控制样式
css(alert_bg, {
'position': 'fixed',
'top': '0',
'left': '0',
'right': '0',
'bottom': '0',
'z-index': '999999999'
});
css(alert_box, {
'width': '270px',
'max-width': '90%',
'font-size': '16px',
'text-align': 'center',
'background-image': 'linear-gradient(90deg, #006eff, #13adff)',
'border-radius': '5px',
'position': 'absolute',
'top': '50%',
'left': '50%',
'transform': 'translate(-50%, -50%)'
});
css(alert_text, {
'padding': '20px 0 0 20px',
'text-align': 'left',
'color':'#fff',
});
css(alert_btn, {
'padding': '10px 0',
'color': '#007aff',
'cursor': 'pointer',
'text-align': 'right',
'margin-right': '30px',
'color':'#fff',
});
// 内部结构套入
alert_text.appendChild(textNode);
alert_btn.appendChild(btnText);
alert_box.appendChild(alert_text);
alert_box.appendChild(alert_btn);
alert_bg.appendChild(alert_box);
// 整体显示到页面内
document.getElementsByTagName('body')[0].appendChild(alert_bg);
// 确定绑定点击事件删除标签
alert_btn.onclick = function() {
alert_bg.parentNode.removeChild(alert_bg);
if (typeof callback === 'function') {
callback(); //回调
}
}
}
function css(targetObj, cssObj) {
var str = targetObj.getAttribute("style") ? targetObj.getAttribute('style') : '';
for (var i in cssObj) {
str += i + ':' + cssObj[i] + ';';
}
targetObj.style.cssText = str;
}
for (var i = 0; i < $(".prettyprint").length; i++) {
$(".prettyprint").eq(i).append('一键复制');
$(".prettyprint").eq(i).attr('id','copy'+ i);
}
var clipboard = new ClipboardJS('.copy');
clipboard.on('success', function(e) {
//console.info(e.text); 提示
e.clearSelection();
alert('复制成功!');
});
一键复制
THE END
暂无评论内容