systemantics

jQue­ry Co­lum­ni­ze ist ein Plu­gin für die Ja­vas­cript-Bi­blio­thek jQue­ry, mit der ein Spal­ten-Lay­out wie in ei­ner Zei­tung er­zeugt wer­den kann. Der ur­sprüng­li­che HTML-Co­de muss da­bei nur mi­ni­mal verändert wer­den. In den meis­ten Fällen kommt er auch ganz oh­ne Ände­rung aus.

Do­ku­men­ta­tion

Die Ver­wen­dung des Co­lum­ni­ze-Plug­ins ist ein­fach:

$("#text").co­lum­ni­ze()

setzt den In­halt des DOM-Kno­tens mit der ID ›text‹ in ein zwei­spal­ti­ges Lay­out mit aus­ge­gli­che­nen Spal­tenlängen.

Das Plu­gin ver­steht ver­schie­de­ne Op­tio­nen, die in ge­schweif­ten Klam­mern an­ge­ge­ben wer­den können.

Op­tio­nen

• ba­lan­ce: ›true‹, wenn die Spal­ten au­to­ma­tisch aus­ge­gli­chen wer­den sol­len. ›fal­se‹, wenn die Spal­ten die Höhe des um­ge­ben­den Ele­ments über­neh­men sol­len. Vor­ein­stel­lung: ›true‹
• co­lumn: Die CSS-Klas­se, wel­che Spal­ten zu­ge­wie­sen wird. Vor­ein­stel­lung: ›co­lumn‹
• co­lumns: Die An­zahl der Spal­ten bei ein­ge­schal­te­tem ba­lan­ce-Mo­dus. Vor­ein­stel­lung: ›2‹
• con­ti­nued: Die CSS-Klas­se, wel­che in der nächs­ten Spal­te fort­ge­setz­ten DOM-Kno­ten zu­ge­wie­sen wird. Vor­ein­stel­lung: ›con­ti­nued‹

Tipps

Wenn der ba­lan­ce-Mo­dus ab­ge­schal­tet wird, muss für das Ele­ment, auf wel­ches das Spal­ten-Lay­out an­ge­wen­det wird, per CSS-Ei­gen­schaft ›max-height‹ ei­ne Ma­xi­malhöhe fest­legt sein. Die Spal­ten wer­den dann höchs­tens lang, wie die­se Ma­xi­malhöhe er­laubt.

Auch bei ein­ge­schal­te­tem ba­lan­ce-Mo­dus wird die Ma­xi­malhöhe berück­sich­tigt. Würde das Aus­glei­chen der Spal­tenlängen die Ma­xi­malhöhe über­schrei­ten, schal­tet er­zeugt das Plu­gin den ba­lan­ce-Mo­dus au­to­ma­tisch ab. Das Plu­gin er­zeugt dann mehr Spal­ten als durch co­lumns an­ge­ge­ben.

Die Spal­ten­brei­te be­stimmt sicht aus den CSS-Ei­gen­schaf­ten für die Spal­ten. Sie können die­se Brei­te durch die in der Op­tion co­lumns an­ge­ge­be­ne CSS-Klas­se be­ein­flus­sen. Tpyi­sche Wer­te dafür sind die fol­gen­den:

float: left
wid­th: 200px
mar­gin-right: 1em

Für ein gleichmäßiges Lay­out soll­ten Sie außer­dem die CSS-Ei­gen­schaft ›li­ne-height‹ ver­wen­den. Wenn Sie ei­ne Zei­lenhöhe aus­drück­lich set­zen und al­le ver­ti­ka­len Ab­stände als Viel­fa­che der Zei­lenhöhe be­stim­men, stel­len Sie si­cher, dass al­le Grund­li­ni­en auf das glei­che Ras­ter fal­len.

Bei­spie­le

• $("#text").co­lum­ni­ze({co­lumns: 3})
  Drei­spal­ti­ger Satz mit aus­ge­gli­che­nen Spal­tenlängen.
• $("#text").co­lum­ni­ze({co­lumns: 3, ba­lan­ced: fal­se})
  Drei­spal­ti­ger Satz mit aus­ge­gli­che­nen Spal­tenlängen, so­fern die Spal­tenlänge die Ma­xi­malhöhe des Ele­ments nicht über­schrei­tet. Sonst gibt das Plu­gin den drei­spal­ti­ge Satz auf und er­zeugt so vie­le Spal­ten, wie für den Text not­wen­dig sind.
• $("#text").co­lum­ni­ze({ba­lan­ced: fal­se})
  Satz mit Spal­ten bis zur Ma­xi­malhöhe des Ele­ments. Die An­zahl der Spal­ten wird durch die Men­ge an Text fest­ge­legt.

Li­zenz

jQue­ry Co­lum­ni­ze ist ein Bei­trag zur jQue­ry-Com­mu­ni­ty und wird des­halb als Open Sour­ce-Soft­wa­re ver­trie­ben. Das Plu­gin steht un­ter der GNU Les­ser Ge­ne­ral Pu­blic Li­cen­se.

--> website