Dynamisch HTML-Elemente über CSS und jQuery einfügen
15. April 2014
weblication cms html css css-only javascript jquery dynamisch
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:
