问题描述
|
我们广泛使用它，但是我有一个问题。
我正在尝试使用以下脚本的（更多/更少）功能来控制所显示文本的数量。但是，因为我是通过PHP提取文本，所以无法正常工作。
有任何想法吗。
带有扩展器div的html是：
<div class=\"expandable\"><p><?=stripslashes(nl2br($r[\'description\']));?></p></div>
$(document).ready(function() {
// simple example,using all default options
$(\'div.expandable p\').expander();
// *** OR ***
// override some default options
$(\'div.expandable p\').expander({
slicePoint: 120,// default is 100
expandText: \'...more\',// default is \'read more...\'
collapseTimer: 10000,// re-collapses after 5 seconds; default is 0,so no re-collapsing
userCollapseText: \'...less\' // default is \'[collapse expanded text]\'
});
});
The main expander js is:
(function($) {
$.fn.expander = function(options) {
var opts = $.extend({},$.fn.expander.defaults,options);
var delayedCollapse;
return this.each(function() {
var $this = $(this);
var o = $.Meta ? $.extend({},opts,$this.data()) : opts;
var cleanedTag,startTags,endTags;
var allText = $this.html();
var startText = allText.slice(0,o.slicePoint).replace(/\\w+$/,\'\');
startTags = startText.match(/<\\w[^>]*>/g);
if (startTags) {startText = allText.slice(0,o.slicePoint + startTags.join(\'\').length).replace(/\\w+$/,\'\');}
if (startText.lastIndexOf(\'<\') > startText.lastIndexOf(\'>\') ) {
startText = startText.slice(0,startText.lastIndexOf(\'<\'));
}
var endText = allText.slice(startText.length);
// create necessary expand/collapse elements if they don\'t already exist
if (!$(\'span.details\',this).length) {
// end script if text length isn\'t long enough.
if ( endText.replace(/\\s+$/,\'\').split(\' \').length < o.widow ) { return; }
// otherwise,continue...
if (endText.indexOf(\'</\') > -1) {
endTags = endText.match(/<(\\/)?[^>]*>/g);
for (var i=0; i < endTags.length; i++) {
if (endTags[i].indexOf(\'</\') > -1) {
var startTag,startTagExists = false;
for (var j=0; j < i; j++) {
startTag = endTags[j].slice(0,endTags[j].indexOf(\' \')).replace(/(\\w)$/,\'$1>\');
if (startTag == rSlash(endTags[i])) {
startTagExists = true;
}
}
if (!startTagExists) {
startText = startText + endTags[i];
var matched = false;
for (var s=startTags.length - 1; s >= 0; s--) {
if (startTags[s].slice(0,startTags[s].indexOf(\' \')).replace(/(\\w)$/,\'$1>\') == rSlash(endTags[i])
&& matched == false) {
cleanedTag = cleanedTag ? startTags[s] + cleanedTag : startTags[s];
matched = true;
}
};
}
}
}
endText = cleanedTag && cleanedTag + endText || endText;
}
$this.html([
startText,\'<span class=\"read-more\">\',o.expandPrefix,\'<a href=\"#\">\',o.expandText,\'</a>\',\'</span>\',\'<span class=\"details\">\',endText,\'</span>\'
].join(\'\')
);
}
var $thisDetails = $(\'span.details\',this),$readMore = $(\'span.read-more\',this);
$thisDetails.hide();
$readMore.find(\'a\').click(function() {
$readMore.hide();
if (o.expandEffect === \'show\' && !o.expandSpeed) {
o.beforeExpand($this);
$thisDetails.show();
o.afterExpand($this);
delayCollapse(o,$thisDetails);
} else {
o.beforeExpand($this);
$thisDetails[o.expandEffect](o.expandSpeed,function() {
$thisDetails.css({zoom: \'\'});
o.afterExpand($this);
delayCollapse(o,$thisDetails);
});
}
return false;
});
if (o.userCollapse) {
$this
.find(\'span.details\').append(\'<span class=\"re-collapse\">\' + o.userCollapsePrefix + \'<a href=\"#\">\' + o.userCollapseText + \'</a></span>\');
$this.find(\'span.re-collapse a\').click(function() {
clearTimeout(delayedCollapse);
var $detailsCollapsed = $(this).parents(\'span.details\');
reCollapse($detailsCollapsed);
o.onCollapse($this,true);
return false;
});
}
});
function reCollapse(el) {
el.hide()
.prev(\'span.read-more\').show();
}
function delayCollapse(option,$collapseEl) {
if (option.collapseTimer) {
delayedCollapse = setTimeout(function() {
reCollapse($collapseEl);
option.onCollapse($collapseEl.parent(),false);
},option.collapseTimer
);
}
}
function rSlash(rString) {
return rString.replace(/\\//,\'\');
}
};
// plugin defaults
$.fn.expander.defaults = {
slicePoint: 500,// the number of characters at which the contents will be sliced into two parts.
// Note: any tag names in the HTML that appear inside the sliced element before
// the slicePoint will be counted along with the text characters.
widow: 4,// a threshold of sorts for whether to initially hide/collapse part of the element\'s contents.
// If after slicing the contents in two there are fewer words in the second part than
// the value set by widow,we won\'t bother hiding/collapsing anything.
expandText: \'... more\',// text displayed in a link instead of the hidden part of the element.
// clicking this will expand/show the hidden/collapsed text
expandPrefix: \'… \',collapseTimer: 0,// number of milliseconds after text has been expanded at which to collapse the text again
expandEffect: \'fadeIn\',expandSpeed: \'\',// speed in milliseconds of the animation effect for expanding the text
userCollapse: true,// allow the user to re-collapse the expanded text.
userCollapseText: \'\',// text to use for the link to re-collapse the text
userCollapsePrefix: \' \',beforeExpand: function($thisEl) {},afterExpand: function($thisEl) {},onCollapse: function($thisEl,byUser) {}
};
})(jQuery);
<p><?=stripslashes(nl2br($r[\'description\']));?></p>
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）