-w-jquery

Mögliche WerteBeschreibungEinsatzgebiet
beliebigen jQuery-Code

Führt den angegebenen jQuery-Code aus.
Zu maskierende Sonderzeichen (geschweifte Klammern und Semikolon):

  • {
    maskiert: \7B
  • }
    maskiert: \7D
  • ;
    maskiert: \3B
Universell

Beispiele / Anwendungsfälle

Beispiel 1: Blendet das Suche-Feld bei Klick über jQuery ein

#blockTop  #searchBox #searchTerm          {opacity:0;cursor:pointer;width:20px !important;height:20px;transition:width 0.2s ease-in-out;-w-jquery:jQuery(this).focus(function()\7BjQuery(this).parent().addClass('focused')\7D).blur(function()\7BjQuery(this).parent().removeClass('focused')\7D)}

Beispiel 2: Fügt innerhalb #blockTopInner als erstes Element ein h1 Überschriften-Element mit xxx Inhalt ein

#blockTopInner  {-w-jquery:jQuery(this).prepend('<h1>xxx</h1>')}

Beispiel 3: Erweitert die URL der Listeneinträge um einen navid-Parameter mit definierter NavID

/* ... */
.listDefault_var0 .listEntry         {-w-levelheadline:3;-w-jquery:var curLink = jQuery(this).attr('data-url')\3Bvar newLink = curLink+'?navid=942129942129'\3BjQuery(this).attr('data-url',newLink)}
.listDefault_var0 .listEntryTitle a  {-w-jquery:var curLink = jQuery(this).attr('href')\3Bvar newLink = curLink+'?navid=942129942129'\3BjQuery(this).attr('href',newLink)}
/* ... */

Beispiel 4: Erweitert das A-Tag der Überschrift der Listeneinträge um das Attribut class, um dies als Fancybox-Ziel zu definieren

/* ... */
/* Setzt class="box" über jQuery, um das A-Tag für ein Fancybox-Ziel zu definieren (Abfrage über design.js): */
/* über addClass (empfohlen): */
.listDefault_var0 .listEntryTitle a  {-w-jquery:jQuery(this).addClass('box');}
/* über attr (Attribut hinzufügen: */
.listDefault_var0 .listEntryTitle a  {-w-jquery:jQuery(this).attr('class', 'box');}
/* ... */
/* alternativ kann auch das target mit Fancybox-Ziel gesetzt werden: */
.listDefault_var0 .listEntryTitle a  {-w-jquery:jQuery(this).attr('target', 'fancy');}
/* oder beides gleichzeitig: */
.listDefault_var0 .listEntryTitle a  {{-w-jquery:jQuery(this).addClass('box').attr('target', 'fancy');}}
/* ... */

Beispiel 5: Erweitert das listEntry-Element der Listeneinträge um die Fancybox-Funktionalität mit blank-Dokument

/* ... */
/* Setzt zu den Listeneinträgen den Cursor und per onclick die Fancybox/wLightbox Funktionalität */
.listDefault_var0 .listEntry {cursor:pointer;-w-jquery:jQuery(this).attr('onclick', '').click(function(event)\7BwLightbox(\7B'type':'iframe','href':jQuery(this).data('url')+'?viewmode=blank'\7D)\3Breturn false\3B\7D)}
/* ... */

Beispiel 6: Entfernt das onclick-Event der Listeneinträge bzw. setzt dies auf false

/* ... */
/* zum Entfernen des Event: */
.listDefault_var0 .listEntry {-w-levelheadline:3;-w-jquery:jQuery(this).attr('onclick', '')}
/* ... */
/* alternativ zum Setzen auf false: */
.listDefault_var0 .listEntry {-w-levelheadline:3;-w-jquery:jQuery(this).attr('onclick', 'return false')}
/* ... */

/*
Hinweis:
Das onclick einer Liste kann auch einfach über -w-clickable:no deaktiviert/entfernt werden.
*/

Beispiel 7: Zeigt den Dateinamen (ohne Endung) eines Bildes (Umsetzung ohne data-Attribut)

/* ... */
/* Anzeige des Dateinamens ohne Endung (z.B. CIMG0815.JPG) - (Bildergalerie Variante 0) */
.listPictureGallery_var0 .listEntries .listEntryTitle  {display:block;-w-jquery:var urlPath = jQuery(this).parents('.listEntryInner').find('img.listEntryImage').attr('src') \3B var name = urlPath.split('/').pop().split('.').shift() \3B if (urlPath.indexOf('/weblication/wThumbnails') != -1) \7B name = name.substr (0, name.indexOf('-')) \3B \7D jQuery(this).html( name )}
/* Anzeige des Dateinamens ohne Endung (z.B. CIMG0815.JPG) - (Bildergalerie Variante 53) */
.listPictureGallery_var53 .listEntriesPreview .listEntryTitle  {display:block;padding:8px;-w-jquery:var urlPath = jQuery(this).parents('.listEntryInner').find('img.listEntryImage').attr('src') \3B var name = urlPath.split('/').pop().split('.').shift() \3B if (urlPath.indexOf('/weblication/wThumbnails') != -1) \7B name = name.substr (0, name.indexOf('-')) \3B \7D jQuery(this).html( name )}
/* ... */

/* Anzeige des Dateinamens mit Endung (z.B. CIMG0815.JPG) - (Bildergalerie Variante 53) */
.listPictureGallery_var53 .listEntriesPreview .listEntryTitle  {display:block;padding:8px;-w-jquery:var urlPath = jQuery(this).parents('.listEntryInner').find('img.listEntryImage').attr('src') \3B var name = urlPath.split('/').pop().split('.').shift() \3B if (urlPath.indexOf('/weblication/wThumbnails') != -1) \7B name = name.substr (0, name.indexOf('-')) +'.'+ urlPath.split('/').pop().split('.').pop() \3B \7D jQuery(this).html( name );}

/*
Hinweis:
Bilder mit Bindestrich im Dateinamen sollten nicht verwendet werden,
da der Name des Vorschaubildes am ersten Bindestrich abgeschnitten wird.
z.B. CIMG0815-137cbd47593bb39b67ca2ebf15dbe2cb.JPG -> CIMG0815)
*/

Beispiel 8: Zeigt den Dateinamen eines Bildes direkt über das data-Attribut

/*
Das data-srcname Attribut steht mit aktuellstem Bildergalerie-Weblic 2.x und CMS 10.x zur Verfügung.
*/
/* Anzeige des gesamten Dateinamens (z.B. CIMG0815.JPG) */
.listPictureGallery_var53 .listEntriesPreview .listEntryTitle  {display:block;padding:8px;-w-jquery:var name = jQuery(this).parents('.listEntry').attr('data-srcname')\3B jQuery(this).html( name );}

/* ... */
/* Anzeige des Dateinamens ohne Endung (z.B. CIMG0815) */
.listPictureGallery_var53 .listEntriesPreview .listEntryTitle  {display:block;padding:8px;-w-jquery:var name = jQuery(this).parents('.listEntry').attr('data-srcname')\3B name = name.substr (0, name.indexOf('.'))\3B jQuery(this).html( name );}
/*
Hinweis:
Bilder mit Punkt im Dateinamen sollten nicht verwendet werden,
da der Name des Vorschaubildes am ersten Punkt abgeschnitten wird.
z.B. CIMG0815.JPG -> CIMG0815)
*/
api.jquery.com: jQuery API Documentation