JQuery-Plugins

jQuery ist ein freies, umfangreiches JavaScript-Framework, das komfortable Funktionen zur DOM-Manipulation und -Navigation zur Verfügung stellt.

ZMS erweitert seinen Funktionsumfang um eine Schnittstelle zur einfachen Integration von Komponenten des Open-Source JavaScript Frameworks jQuery. Die Komponenten können als Plugins bequem ins ZMS integriert werden und werden nur geladen, wenn sie tatsächlich benötigt werden (lazy loading).
Dazu muss der headScript-Abschnitt um drei Einträge erweitert werden:

<script type="text/javascript" charset="UTF-8" src="/++resource++zms_/jquery/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="/++resource++zms_/jquery/plugin/jquery.plugin.js"></script>
<script type="text/javascript" src="/++resource++zms_/jquery/plugin/jquery.plugin.extensions.js"></script>

Noch performanter ist es, die komplette jQuery-Lib des ZMI über folgenden Eintrag einzubinden:

<script type="text/javascript" charset="UTF-8" src="/++resource++zms_/jquery/jquery-all.min.js"></script>

Zunächst wird jQuery geladen - falls erforderlich. Die zweite JS-Datei stellt den Plugin-Loader zur Verfügung. Dieser basiert auf einer für optimale ZMS-Integration modifizierten $.plugin (http://nicolas.rudas.info/ jQuery/ getPlugin/). In der dritten JS-Datei sind die Extension-Points und Dependencies der JS-Plugins definiert.

Aktuell sind dies:

jQuery UI Integration

jQuery UI 1.8.7 ist seit ZMS Version 2.13.1 Build 1284 ebenfalls vorhanden und kann durch folgenden Pfad im Header referenziert werden.

<script type="text/javascript" charset="UTF-8" src="/++resource++zms_/jquery/ui/js/jquery-ui-1.8.7.custom.min.js"></script>

Wichtiger Hinweis für Zope < 2.10

ZCML Resource-Ordner sind erst ab Zope 2.10 implementiert. Soll ZMS mit den JQuery-Plugins auf einer älteren Zope-Version (2.8 / 2.9) installiert werden, so müssen folgende Schritte ausgeführt werden:

  1. auf oberster Ebene im Zope einen Ordner --resource--zms_ und in diesem einen Ordner jquery anlegen.
  2. unterhalb des Ordners jquery alle Dateien aus der ZMS-Distribution unterhalb von $ZMS_HOME/plugins/www/jquery als Zope File-Objekte ablegen.
  3. im File jquery.plugin.extension.js müssen ggf. die Pfade von ++resource++zms_ durch --resource--zms_ ersetzt werden.
  4. in den ZMS-Instanzen müssen in der System-Konfiguration folgende Miscellaneous-Schlüssel gesetzt werden:
  5. jquery.plugin.version=/--resource--zms_/jquery/plugin/jquery.plugin.js
  6. jquery.plugin.extensions=/--resource--zms_/jquery/plugin/jquery.plugin.extensions.js
  7. ggf. müssen die neuen Pfad auch in eigenen headScript-Templates eingetragen werden.

Für (1.-3.) können ZMS-Professional Kunden ein vorkonfektioniertes ZEXP anfordern.

Für den Einsatz des Workarounds in einer Multisite hilft folgenden Python-Script, das die modifizierten Pfad-Werte für die gesamte Hierarchie explizit setzt:

# setConf2Zope29 #

request = container.REQUEST
RESPONSE = request.RESPONSE
zms = context.content
zmsclients = zms.getPortalClients()
zmsclients.append(zms)
for zmsclient in zmsclients:
  # zmsclient.delConfProperty('jquery.version')
  zmsclient.setConfProperty('jquery.version','/--resource--zms_/jquery/jquery-1.5.min.js')
  zmsclient.setConfProperty('jquery.plugin.version','/--resource--zms_/jquery/plugin/jquery.plugin.js')
  zmsclient.setConfProperty('jquery.plugin.extensions','/--resource--zms_/jquery/plugin/jquery.plugin.extensions.js')
  zmsclient.setConfProperty('zmi.all','--resource--zms_/manage_page_style-min.css')
  zmsclient.setConfProperty('jquery.all','/--resource--zms_/jquery/jquery-all.min.js')
  zmsclient.setConfProperty('jquery.ui','/--resource--zms_/jquery/ui/js/jquery-ui-1.8.9.custom.min.js')
print 'done'
return printed

TIPP: Sofern die jquery-Funktionalität in der Drittsicht vollständig verfügbar sein soll und man mit individuellem JS-Template (in standard_html_header oder headScript) arbeitet, kann man der Einfachheit halber dem oben genanten Template-Vorschlag entsprechend (mit angepassten Pfaden) direkt einsetzen:

<script type="text/javascript" src="/--resource--zms_/jquery/jquery-1.5.min.js">"></script>
<script type="text/javascript" src="/--resource--zms_/jquery/plugin/jquery.plugin.js"></script>
<script type="text/javascript" src="/--resource--zms_/jquery/plugin/jquery.plugin.extensions.js"></script>

Erstellt von: Dr. Frank Hoffmann , erstellt am:  31.03.2010 , zuletzt geändert: 05.07.2011