websitebaker testseite
Private Testseite WB 2.10.0 (Rev.66)

bulletColor

LibraryAdmin / jQueryAdmin Plugin

Mit diesem jQuery-Plugin ist es möglich einer Liste bunte Listenpunkte zu verpassen.

 

Anleitung

Beispiel einfarbige Listenpunkte
 

  •  Plugin downloaden und in LibraryAdmin oder jQueryAdmin installieren
  •  Preset für die gewünschte Seite oder global erstellen und das Plugin dafür auswählen
  •  Im Editor eine Liste erstellen
  •  Im Editor den Quellcode-Button (oben links) betätigen
  •  Eine ID für ul vergeben ( ul id="by_color" )

 

HTML

<ul id="by_color">
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
</ul>

Preset

jQuery('#by_color').bulletcolor({ color : '#b22222' });

 

Beispiel mehrfarbige Listenpunkte
 

  1. Lorem ipsum dolor sit amet
  2. Lorem ipsum dolor sit amet
  3. Lorem ipsum dolor sit amet
  4. Lorem ipsum dolor sit amet
  5. Lorem ipsum dolor sit amet
  6. Lorem ipsum dolor sit amet
  7. Lorem ipsum dolor sit amet

 

HTML

<ol id="color_array">
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
</ol>

Preset

jQuery('#color_array').bulletcolor({ 
        color_array : ['#0000ff',
                       '#ff0000',
                       '#00ff00']
});


Hier sind nur die Beispiele aufgeführt bei denen man die Farbe im Preset ändert. Es gibt eine weitere Möglichkeit wo die Farbe per CSS hinterlegt ist (siehe Autor-Seite).

Natürlich kann man bunte Listenpunkte auch ohne jQuery lösen und einfach in jedes Listenelement noch ein Span mit class setzen und dazu per CSS etwas definieren.


Autor und mehr Beispiele: http://www.fluidbyte.net/color-ul-and-ol-bullets-separately-from-content-using-jquery
Wir verwenden Cookies zur Verbesserung der Usability. (Snippet Cookie Permission for WebsiteBaker)