做了个截取字符串长度的插件,当字符超过指定个数后截取字符,并鼠标跟随显示完整的内容提示。
单独写功能的时候是可以实现的,但用下面的方式做成插件后,发现鼠标跟随的内容都是最后一条的,而且不管字符有没有超过都会显示最后一条的内容,因为有部分内容时动态加载的,所以用了事件委托的方式。
(function($, window, document, undefined) {
// 创造一个公共变量来构建一个私有方法
var privateFunction = function() {}
var methods = {
// 字符截取,鼠标触发跟随详情提示框
subString: function (options) {
return this.each(function(index) {
var $this = $(this);
var defaults = {
el: '', // 目标元素
charNum: 22, // 截取字符个数
hasDot: true, // 是否显示省略号
// dotColor: '#666' // 省略号颜色
allTextp: '#allText', // 鼠标跟随完整文本框的p
isPrompt: true // 是否显示提示框
};
var settings = $.extend({}, defaults, options),
allTextp = settings.allTextp.replace(/[#|.]/g, ''),
strText = $(settings.el).eq(index).text(),
chineseRegex = /[^\x00-\xff]/g,
strLength = strText.replace(chineseRegex, '**').length,
newLength = 0,
newStr = '',
singleChar = '';
function _subString(str, len, hasDot) {
for (var i = 0; i < strLength; i++) {
singleChar = str.charAt(i).toString();
singleChar.match(chineseRegex) != null ? newLength += 2 : newLength++;
if (newLength > len) break;
newStr += singleChar;
}
if (hasDot && strLength > len) newStr += '...';
return newStr;
}
// 截取字符串
$this.html(_subString(strText, settings.charNum, settings.hasDot));
// 鼠标跟随是否显示完整文本框
if ( (strLength > settings.charNum) && settings.isPrompt ) {
$(document).on('mouseover', settings.el, function(event) {
if ( settings.allTextp.indexOf('#') != -1 ) $('body').append('<p id="' + allTextp + '" />');
if ( settings.allTextp.indexOf('.') != -1 ) $('body').append('<p class="' + allTextp + '" />');
});
$(document).on('mousemove', settings.el, function(event) {
$(settings.allTextp).text(strText).show().css({
left: event.pageX + 30,
top: event.pageY
});
});
$(document).on('mouseout', settings.el, function(event) {
$(settings.allTextp).remove();
});
// $this.mouseover(function() {
// if ( settings.allTextp.indexOf('#') != -1 ) $('body').append('<p id="' + allTextp + '" />');
// if ( settings.allTextp.indexOf('.') != -1 ) $('body').append('<p class="' + allTextp + '" />');
// });
// $this.mousemove(function(event) {
// $(settings.allTextp).text(strText).show().css({
// left: event.pageX + 30,
// top: event.pageY
// });
// });
// $this.mouseout(function() {
// $(settings.allTextp).remove();
// });
}
});
}
};
$.fn.inCommonUseJsPlugin = function() {
var method = arguments[0];
if(methods[method]) {
method = methods[method];
arguments = Array.prototype.slice.call(arguments, 1);
} else/* if( typeof(method) == 'object' || !method ) {
method = methods.init;
} else */{
$.error( 'Method ' + method + ' does not exist on jQuery.pluginName' );
return this;
}
return method.apply(this, arguments);
}
})(jQuery, window, document);
上班时间脑子浆糊了,回家重新写了一遍,已经解决了,换个思路问题就简单很多了!
像这种写法,
allTextp
算局部的还是全局的?据说某些比较老的浏览器会认为是全局的。这样的话,鼠标跟随内容都是最后一条就可以解释了。目前从代码来看我还看不出来其它可能造成这一现象的问题。