Dynamisch HTML-Elemente über CSS und jQuery einfügen

15. Apr 2014

Nutzen Sie die Weblication® CMS Technologien, um Inhalte dynamisch ins HTML zu generieren, ohne das XSL-Template anzufassen.

Weblication® CMS bietet mit der Projektbasis BASE und den Weblics® unzählige Möglichkeiten, die Darstellung von Weblication® Listen o.ä. rein über CSS (CSS-Only) zu beeinflussen. Ohne Anpassung in XSL-Templates lassen sich bereits viele Umsetzungen über CSS-Only realisieren.

Entsprechende Beispiele finden Sie nachfolgend, welche Sie gerne als Anregung für eigene, abgewandelte Umsetzungen heranziehen können.

Beispiel 1: Facebook Like-Button über eine Liste per CSS-Only (jquery) einfügen

Ohne Anpassung im Listen-Template default.wFilelist.php soll zu den eingelesenen Meldungen jeweils ein Facebook Like-Button angezeigt werden.

Ein möglicher Weg ist der Einsatz von jQuery über CSS (CSS-Only-Eigenschaft -w-jquery). Um die design.css übersichtlicher zu halten, sprechen Sie über -w-jquery lediglich eine Javascript-Funktion an, die in der design.js ausgelagert ist. Nachfolgend ist dies beispielhaft für die Standard-Liste (Variante 0) und die CSS-Only-Variante 10 der Liste (dreispaltige Boxdarstellung) angeführt.

zu Beispiel 1: Auszug aus der design.css

/* eingebunden in der Standard-Liste */
.listDefault_var0 .listEntry               {-w-jquery:jQuery(this).addSocialMediaButtons()}
/* ... */

/* oder eingebunden in der dreispaltigen Boxdarstellung der Liste, siehe Screen unten */
.listDefault_var10 .listEntry             {-w-add-objectdata:fblike;/* ... */}
/* ... */
.listDefault_var10 .listEntryData-fblike  {-w-jquery:jQuery(this).addSocialMediaButtons();position: absolute;margin: auto 10px;bottom: 12px;}

In der design.js Ihres Projektes definieren Sie die im CSS angesprochene Funktion. Dieses Beispiel definiert den Code für den Facebook Like-Button ("Gefällt mir").

zu Beispiel 1: Auszug aus der design.js

// ...
jQuery.fn.addSocialMediaButtons = function(){

  jQuery.each(jQuery(this), function(){
    var url = jQuery(this).attr('data-url');
    //jQuery(this).css({'border' : 'solid 3px red'});
    jQuery(this).append('<div id="fb-root"/><div class="fb-like" style="overflow: hidden; height:20px;" data-href="' + url + '" data-layout="button_count" data-action="like" data-send="false" data-width="80" data-show-faces="false" data-font="arial"/>');
  });

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) return;
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));                   
}; 
// ...

Die individuell angepasste Listen sieht je nach Projekt und Umsetzung z.B. wie folgt aus:

Liste Aktuelles mit Facebook Like-Button über CSS-Only und jQuery
Liste Aktuelles mit Facebook Like-Button über CSS-Only und jQuery

Ähnliche Seiten

Entwicklerbereich Weblication® CMS - © Scholl Communications AG