Hallo.
Ich suche genau die Funktionalität, die letztgenanntes Script bietet.
Das funktioniert auch soweit. Problem: Es läßt sich nur auf IDs anwenden und somit ja quasi nur einmal auf einer Seite.
Ich möchte das aber für mehrere Textblöcke auf einer Seite nutzen - somit käme nach meinem Verständnis das Nutzen von Klassen in Frage.
Weiß jemand ob sich das Script entsprechend umschreiben ließe? Ich hab schon rumprobiert... aber aufgrund meiner begrenzten JS Fähigkeiten, hat das zu nichts geführt. Klassen werden doch mit $$ anstatt $ für IDs angesprochen, richtig? Ich hab schon probiert das entsprechend auszutauschen... ohne Erfolg.
Der Code des Scripts lautet:
Code:
var ExpandableText = new Class({
initialize: function(options) {
options = $merge({
'more': "[more...]",
'less': "[less]",
height: 45,
width: 300
}, options);
this.divId = options.divId;
this.more = options.more;
this.less = options.less;
this.baseHeight = options.height;
this.baseWidth = options.width;
},
start: function(){
$(this.divId).setStyle('height', "");
$(this.divId).setStyle('width', this.baseWidth);
var coordinates = null;
coordinates = $(this.divId).getCoordinates();
if(coordinates.height <= this.baseHeight){
return;
}
this.longText = $(this.divId).innerHTML;
var splitText = this.longText.split(' ');
$(this.divId).innerHTML = '';
var limit = true;
var i = 0;
var text = "";
this.shortText = "";
for (i=0; i<splitText.length&&limit; i++) {
text += (splitText[i]+" ");
$(this.divId).innerHTML = (text+this.more);
coordinates = $(this.divId).getCoordinates();
if(coordinates.height > this.baseHeight){
limit = false;
}
else {
this.shortText = text;
}
}
$(this.divId).innerHTML = this.shortText;
if (i < splitText.length)
this.addMoreLink();
},
addMoreLink: function(){
var a = new Element('a', {
events: {click: this.moreClick.bind(this)},
href: 'javascript:;'
});
a.appendText(this.more);
a.injectInside($(this.divId));
},
addLessLink: function(){
var a = new Element('a', {
events: {click: this.lessClick.bind(this)},
href: 'javascript:;'
});
a.appendText(this.less);
a.injectInside($(this.divId));
},
lessClick: function(){
$(this.divId).innerHTML = this.shortText;
this.addMoreLink();
},
moreClick: function(){
$(this.divId).innerHTML = this.longText;
this.addLessLink();
}
});
Aufgrufen wird so:
Code:
window.addEvent('domready', function(){
new ExpandableText({
divId: "textBlock",
height: 45,
width: 600
}).start();
});
Danke!
Gruß
Thomas
Suche Extension: Text erweitern
Zitieren
Zitat von magicsepp
Lesezeichen