【b2主题】美化之代码高亮一键复制

释放双眼,带上耳机,听听看~!

b2主题自带的代码高亮没有一键复制,遇到长代码的时候,还得选中一直滑动鼠标才可以复制,为此,暖岛站长(阿叶)写了一键复制功能,但是样式还有待美化,为此作为菜鸟的我,百度了一下代码,改了改样式,完成了一键复制功能。将下列js代码放入子主题下的child.js之中,强制刷新即可完成部署!

代码

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('复制成功!');
});

 

温馨提示:本文最后更新于 2022-12-11 01:45 ,某些文章具有时效性,若有错误或已失效,请在下方留言或联系逆念

给TA打赏
共{{data.count}}人
人已打赏
网络技术

【日主题V2主题美化】微信内关闭商城-二开教程

2022-5-23 22:48:04

网络技术

【B2主题】免插件实现文章页相关文章

2022-5-23 23:14:32

重要声明

本站资源大多来自网络,如有侵犯你的权益请联系管理员,QQ508044570 我们会第一时间进行审核删除。站内资源为网友个人学习或测试研究使用,未经原版权作者许可,禁止用于任何商业途径!请在下载24小时内删除!


如果遇到付费才可观看的文章,建议升级终身VIP。全站所有资源任意下免费看”。本站资源少部分采用7z压缩,为防止有人压缩软件不支持7z格式,7z解压,建议下载7-zip,zip、rar解压,建议下载WinRAR

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索