JS的DOM之鼠標(biāo)懸浮事件

鼠標(biāo)懸浮事件之 mouseover()和 mouseout()事件
鼠標(biāo)在這塊區(qū)域時候會觸發(fā)相應(yīng)事件，將鼠標(biāo)挪開則恢復(fù)原先事件

function tableInit(excels){
        table.render({
            elem: '#partList'
            ,height: '400'
            ,cols: [[
                //設(shè)置行自增編號
                {type: 'numbers', fixed: 'left'},
                {field: 'path', title: s_path, align: 'center',templet:function (d){
                        var imgSrc = setter.atlasHost + d.path
                        return '<div class="viewItem"><img src="'+imgSrc+'" height="28px"></div>'
                    }},
                //設(shè)置列可編輯
                {field: 'number', title: '<span class="layui-icon layui-icon-edit" style="color: #5fb878;font-size: 12px;">'+s_order_number+'</span>', edit: 'text',align: 'center'},
                //鼠標(biāo)懸浮顯示列全部內(nèi)容
                {field: 'vehicleRemarks', title: '<span tips-ld="vehicleRemarks" class="layui-icon layui-icon-edit" style="color: #5fb878;font-size: 12px;">'+s_vehicleRemarks+'</span>', align: 'left',templet:function(d){
                        //TODO 需要彈層的列綁定class【remarksDom】
                        return '<label class="remarksDom">'+d.vehicleRemarks +'</label>'
                    }},
                //綁定操作列
                {title: s_action, align: 'center', toolbar: '#actionBar', fixed: 'right'}
            ]]
            ,data:excels
            ,limit:Number.MAX_VALUE
        });
    }

懸浮事件編寫

var tipsVal;
    // 1.找到觸發(fā)的事件對象（綁定全局）  2.事件處理程序
    $('body').on('mouseover','.remarksDom', function () {
        var ovText = $(this).text();
        //內(nèi)容超出長度顯示彈層，否則無需彈層
        if(ovText.length < 16){
            return;
        }
        var html = "<p style='word-wrap:break-word;width: 150px;'>" + ovText + "</p>";
        tipsVal=layer.tips(html,this,{tips:[1,"rgb(58, 61, 73)"]});
    });
    //鼠標(biāo)移出
    $('body').on('mouseout','.remarksDom', function () {
        layer.close(tipsVal);
    });

實現(xiàn)效果

?文章來源地址http://www.zghlxwxcb.cn/news/detail-515673.html

到了這里，關(guān)于Layui Table 鼠標(biāo)懸浮彈層顯示超出內(nèi)容、Table基本操作的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！