(short english description: http://forum.phpwcms.org/viewtopic.php?p=121208#p121208)
Dieses Tutorial ist nur für phpwcms version 1.4.4, rev 386, 2009/11/29
Mit dieser neuen phpwcms Version ist es nun möglich neben mootools 1.x auch jquery zu nutzen.
Ich möchte das kurz in diesem Tutorial an einem praktischen Beispiel erklären.
Dem "Featured Slider" mit Hilfe von jQuery, jQueryUI und dem Teaser Contentpart
Demo: http://demo.webdeveloperplus.com/featur ... nt-slider/ (kein phpwcms )
Das Prinzip des Sliders wird hier erklärt: http://webdeveloperplus.com/jquery/feat ... jquery-ui/
Hier erstmal alle benötigten Dateien: 1. Bitte stell sicher, dass du phpwcms auf diese Version aktualisiert hast und in der Datei config/phpwcms/conf.inc.php der Wert
Code: Select all
$phpwcms['js_lib'] = array('mootools-1.2' => 'MooTools 1.2', 'mootools-1.1' => 'MooTools 1.1', 'jquery' => 'jQuery 1.3');
$phpwcms['allow_cntPHP_rt'] = 1;
2. Logge dich ins Backend ein und öffne dein Seitentemplate unter ADMIN > Vorlagen
Dort findest du neue Optionen, deine bevorzugte JavaScript Bibliothek auszuwählen, in unserem Falle jQuery 1.3.
Je nach Anwendungsart (Inline Javascript, Globale Javascript Funktionalität auf allen Seiten) kannst du jQuery immer laden.
Der Vorteil ist, die Bibliothek ist immer verfügbar und wird im Browsercache zwischengespeichert.
Optional kannst du die Bibliothek von Google Ajax Lib Service laden. Das wird an der einen oder anderen Stelle im Netz als Performancegewinn beim Laden der Website beschrieben.
Ansonsten wird eine Kopie von jQuery aus dem Ordner template/lib/jquery gezogen.
Das Laden der alten frontend.js wird nur empfohlen, wenn du z.B. vergrößerte Bilder in Popup Fenstern öffnest (anstatt in der hippen Lightbox), ansonsten kannst du das ignorieren.
Speichere dein Template und prüfe im Quelltext der Website ob jquery korrekt eingebunden wird.
3. Als nächstes erstellen wir das Template für den Teaser CP, das dazugehörende CSS und JavaScript, sowie den Teaser CP selbst.
Der Teaser CP soll 3 Artikel darstellen, die alle ein Listing Bild enthalten.
Diesem wird das nachfolgende Template zugewiesen - Bildgrößen müssen nicht gesetzt werden, das geschieht im Template!
3.1. Erstelle ein Template für den Teaser CP in template/inc_cntpart/teaser/featured.html
Plaziere folgenden Template Code:
Code: Select all
<div id="featured">
<!-- JS: featured_slider -->
<!-- JS: http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js -->
<!--TEASER_HEAD_END//-->
<!--TEASER_ENTRY_START//-->
[IMAGE]
<div id="fragment-{ARTICLEID}" class="ui-tabs-panel" title="{SUMMARY}">
<img src="img/cmsimage.php/435x249x1/{THUMB_ID}" width="435" height="249" alt="" />
<img class="hide" src="img/cmsimage.php/80x63x1/{THUMB_ID}" width="80" height="63" alt="" />
<div class="info" >
<h2><a href="{ARTICLELINK}">{TITLE}</a></h2>
<p>{SUBTITLE} »<a href="{ARTICLELINK}">read more</a></p>
</div>
</div>
[/IMAGE]
<!--TEASER_ENTRY_END//-->
<!--TEASER_SPACER_START//-->
<!--TEASER_SPACER_END//-->
<!--TEASER_FOOTER_START//-->
</div>
[PHP]
$GLOBALS['block']['custom_htmlhead']['featured_slider_css']="
<style>
/* -- Featured - contentslider */
#featured .hide {display:none;}
#featured{
padding-right:265px;
position:relative;
border:5px solid #ccc;
height:249px;
background:#fff;
margin-bottom:2em;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0;
left:435px;
list-style:none;
padding:0;
margin:0;
width:265px;
}
#featured ul.ui-tabs-nav li{
padding:0;
padding-left:13px;
font-size:12px;
color:#666;
}
#featured ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}
#featured ul.ui-tabs-nav li span{
font-size:11px;
line-height:18px;
}
#featured li.ui-tabs-nav-item a{
display:block;
height:73px;
color:#333;
background:#fff;
line-height:20px;
padding:5px 0;
}
#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#featured li.ui-tabs-selected{
background:url('../inc_layout/contentslider/selected-item.gif') center left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}
#featured .ui-tabs-panel{
width:400px; height:250px;
background:#999; position:relative;
}
#featured .ui-tabs-panel .info{
position:absolute;
top:179px; left:0;
height:70px;
background: url('../inc_layout/contentslider/transparent-bg.png');
overflow:hidden;
min-width:60%;
}
#featured .info h2{
font-size:18px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}
#featured .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#featured .info a{
text-decoration:none;
color:#fff;
}
#featured .info a:hover{
text-decoration:underline;
}
#featured .ui-tabs-hide{
display:none;
}
</style>
";
[/PHP]
<!--TEASER_FOOTER_END//-->
Code: Select all
jQuery(document).ready(function() {
var featured = $("#featured");
var panels = $("#featured .ui-tabs-panel");
featured.find('.hide').css('display','none'); //just make sure they are hidden ;-)
// build the featured slider list
var list = '<ul class="ui-tabs-nav">';
panels.each(function(e){
var imghide = $(this).find('.hide');
var imgsrc = imghide.attr('src');
var imgw = imghide.attr('width');
var imgh = imghide.attr('height');
console.log(imgh)
var text = $(this).find('h2').text();
var id = $(this).attr('id');
list += '<li class="ui-tabs-nav-item"><a href="#'+id+'"><img src="'+imgsrc+'" style="width:'+imgw+'px;height:'+imgh+'px" alt="" /><span>'+text+'</span></a></li>';
});
list += '</ul>';
featured.prepend(list);
featured.tabs({
fx:{opacity: "toggle"}}
).tabs("rotate", 9000, true);
});
Für den Slider wird zusätzlich die jQuery UI Lib benötigt und etwas JS Code um die im Originalbeispiel vorgegebene HTML Struktur zu generieren, da dies nicht von PHPWCMS bewerkstelligt werden kann, sowie der Aufruf der Slider Funktion.
Dazu gibt es neu den Template Replacer <!-- JS: PluginName|my.js //Whatever text -->
In unserem Falle wird zuerst die jQuery UI lib der Einfachheithalber vom Google Ajax Lib Service geladen.
Als nächstes wird unser jquery.featured_slider.js Datei geladen.
UPDATE Solltest du den Fehler:
$("#featured > ul").tabs is not a function in der Firebug Console bekommen, dann
setze den JS aufruf im Template so:
Code: Select all
<!-- JS: featured_slider -->
<!-- JS: http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js -->
# Info für Entwickler:
Alternativ können JS Dateien natürlich auch in einer template/inc_script/frontend_render/*.php Datei geladen werden.
Code: Select all
initJSPlugin('featured_slider');
Dazu bitte diese Infos beachten und die neuen php Dateien ansehen um zu verstehen was da passiert!
Sollte das JS aus unserem Beispiel via frontend_render Script global in die Seite eingefügt werden, würde ich das so machen:
Code: Select all
// load jqueryui (be sure you load jquery permanently!)
$block['custom_htmlhead']['jqueryui.js'] = getJavaScriptSourceLink('http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js');
// load jquery.featured_slider.js
initJSPlugin('featured_slider');
// print_r($block['custom_htmlhead']); just to check the order of loaded JS files
Ich benutze cmsimage.php um entsprechend ein großes und ein kleines Bild für den Slider zu erzeugen.
Um {THUMB_ID} nutzen zu können, muss [IMAGE] im Template existieren, das ist neu seit rev. 381.
Die Listenstruktur mit den kleinen Vorschaubildern wird mit jQuery erzeugt, da dies mit dem Teasertemplate nicht möglich ist.
Dazu legen wir versteckt ein kleines Bild ab
Code: Select all
<img class="hide" style="display:none;" src="img/cmsimage.php/80x63x1/{THUMB_ID}" alt="" />
Das JavaScript dafür ist von der HTML Struktur des Templates abhängig - also Vorsicht bei Änderungen!
Ja und wenn Du alles richtig gemacht hast, rotiert der Slider durch deine Teaserartikel.
PS: Dies ist nach besten Wissen erstellt worden. Es gibt mit den neuen JS Lib Funktionen in PHPWCMS mehrere Wege zum Ziel zu kommen. Ich habe das oben kurz angerissen.
Der hier vorgestellte weg, ist der einfachste, da Templatebasiert - für so kleine Anwendungen ist das ausreichend.
Je nach Arbeitsweise, können Skripte/Funktionen als einzelne Plugins abgelegt und geladen werden oder in einer einzigen Datei gepackt werden.
Dieses Tutorial ist zum lernen gedacht, wenn ein Fehler drin ist, berichtigt mich bitte, ansonsten gutes Gelingen.
Und nochwas - es ist natürlich Unsinn, für diesen Effekt gleich die gesamte jQuery-UI Bibliothek zu laden.
Den bekommt man sicher auch irgendwo als Standalone, aber wenn man sowieso jQueryUI in seiner Website Verwendet, für Dialoge, Datepicker, Slider oder weiss der Geier was, dann ist der featured_slider einfach eine fixe Erweiterung.
Versteht das Tutorial bitte als Beispiel, wie man eigene Scripte für JQuery oder Mootools in PHPWCMS einfügt.
Das sollte nicht unbedingt produktiv genutzt werden
Cheers marcus