js实现长按显示全部内容
js实现文字超出省略号显示时长按显示全部
元素内容超出省略号显示时长按该元素,生成toast弹窗(id:toolkitContainer),以显示全部内容
#toolkitContainer {
max-width: 150px;
position: absolute;
z-index: 999;
background-color: #f6f6f6;
border-radius: 5px;
color: #000;
padding: 5px 15px;
border: solid 1px #ddd;
opacity: .95;
font-size: 12px;
}
window.onload = () => {
initListener();
//调用
$('td').each(function() {
if($(this).width() < $(this).text().length * 14) {
$(this).addClass('toolkit');
}
});
};
//字浮动显示逻辑
var initListener = function() {
$('body').on('touchstart', '.toolkit', function(e) {
var toolkit = $('#toolkitContainer');
var body = $('body');
var _this = $(this);
if(toolkit.length == 0) {
toolkit = $('<div></div>').attr('id', 'toolkitContainer')
.appendTo($('body'));
}
_this.on('touchend', function() {
$('#toolkitContainer').remove();
_this.off('touchend');
_this.off('touchcancel');
});
_this.on('touchcancel', function() {
$('#toolkitContainer').remove();
_this.off('touchend');
_this.off('touchcancel');
});
toolkit.html($(this).attr('tText') || $(this).html());
if(!toolkit.html()) {
return;
}
var tx = e.originalEvent.touches[0].pageX - toolkit.width() / 2;
tx = tx < 0 ? 0 : tx;
tx = tx + toolkit.width() > body.width() ? tx - toolkit.width() : tx;
var ty = e.originalEvent.touches[0].pageY - toolkit.height() - 30;
ty = ty < 0 ? 0 : ty;
toolkit.css('top', ty + 'px');
toolkit.css('left', tx + 'px');
toolkit.css('opcaity', '0.2');
toolkit.show();
toolkit.animate({
opcaity: 1
}, 300);
});
};