1. 程式人生 > >基於js原生封裝的點選顯示完整文字

基於js原生封裝的點選顯示完整文字


基於js原生封裝的點選顯示完整文字


(function(window) {
    var inner = '';
    var showCont_s = function(ele) {
        this.init.apply(this, arguments);
    }
    showCont_s.prototype = {
        //初始化,顯示
        init : function(ele, dom) {
            var els = ele.dom;
            var h = els.offsetWidth, fh = els.innerText.length;
            if (this.whether(h, fh)) {
                return;
            }
            if (els.querySelector('p')) {
                this.hiddCont_s(els)
            } else {
                inner = '<p>' + els.innerText + '</p>';
                els.innerHTML = inner;
                this.abs_rihgt(els, ele.w)
            }
        },
        //是否點選
        whether : function(h, fh) {
            var h = h, fh = fh;
            return Math.ceil(h / 14) > fh
        },
        //隱藏
        hiddCont_s : function(els) {
            var els = els;
            var p = els.querySelector('p')
            els.innerHTML = p.innerText;
        },
        //定位
        abs_rihgt : function(els, w) {
            var els = els, w = w;
            p = els.querySelector('p'), distance = els.offsetLeft;
            p.style.left = this.computed(distance, w, p.innerText.length*15) + 'px';
        },
        //計算
        computed : function(d, w, p) {
            var d = d, w = w, p = p;
            var j = d + p - w;
            var num;
            if (j < 0) {
                num = 0;
            } else if (j > 0) {
                num = w - p;
            }
            return num;
        }
    }
    window.showCont_s = showCont_s;
})(window)