Hallo wie oder wo genau muss ich das $('.counter').jCounter() einsetzen um den Counter nutzen zu können?
jCounter nutzen?
- Shorty
- Erledigt
-
-
Hallo,
das ganze muss in einen <script>-Tag, der Selektor sollte entsprechend natürlich auf dein Plugin abgestimmt sein.
-
Ich würde es auch gerne für die Titelzeile und im Texteditor nutzen, vllt kann einer sagen welches Template dazu angepasst werden muss oder vllt für uns die sich damit nicht so gut auskennen, den Code wie es mit jCounter aussehen sollte, rein stellen?
-
Hallo,
das ganze muss in einen <script>-Tag, der Selektor sollte entsprechend natürlich auf dein Plugin abgestimmt sein.
Leider kann ich mir nicht wirklich vorstellen,wie ich das machen soll im Script und auf mein Plugin abstimmen.Ich würde es auch gerne für die Titelzeile und im Texteditor nutzen, vllt kann einer sagen welches Template dazu angepasst werden muss oder vllt für uns die sich damit nicht so gut auskennen, den Code wie es mit jCounter aussehen sollte, rein stellen?
Ich kenne mich Zwar etwas mit der Materie aus,aber auch ich würde eine anleitung oder besser erklärung zum anwenden begrüssen. -
Hallo,
um den jCounter in einem Plugin nutzen zu können, musst du eigenes JavaScript einbinden, dies geht zum Beispiel über einen Template-Listener wie den folgenden:
XML
Alles anzeigen<?xml version="1.0" encoding="UTF-8"?> <data xmlns="http://www.woltlab.com" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.woltlab.com http://www.woltlab.com/XSD/templateListener.xsd"> <import> <templatelistener name="meinJavaScriptInclude"> <environment>user</environment> <templatename>MEIN_GEWÜNSCHTES_TEMPLATE</templatename> <eventname>MEIN_GEWÜNSCHTES_EVENT</eventname> <templatecode><![CDATA[<script data-relocate="true" src="{@$__wcf->getPath()}js/mein.paketbezeichner.bla{if !ENABLE_DEBUG_MODE}.min{/if}.js"></script>]]></templatecode> </templatelistener> </import> </data>
Hier müssen dann der Name des Listeners, der Name des Templates in dem dieser greifen soll (z.B. headInclude (wäre dann auf jeder Seite)), der Name eines in diesem Template vorhandenen Events; welches am besten geeignet ist, muss je nach Situation entschieden werden (im headInclude würde sich javascriptInclude anbieten), und der Name der JavaScript-Datei angepasst werden.
In der im Template-Listener angegeben Datei mein.paketbezeichner.bla.js und mein.paketbezeichner.bla.min.js (letztere ist minimiert und wird genutzt, wenn das WCF nicht im Debug-Modus ist), reicht es aus, einen Code wie diesen zu nutzen:
Wenn die Elemente mit der Klasse .meineKlasse nun unterstütze Elemente sind, wird dort der jCounter eingebaut.
Natürlich lassen sich hier auch komplexere Selektoren nutzen, z.B. $('#content > div > .meineKlasse.mitNebenklasse + .foo'); hier sollte man sich dann vielleicht einmal die CSS-Selektore ansehen, dann lassen sich diese auch leicht mit Tools wie Firebug finden (wobei der mitlerweile afaik auch CSS-Selektoren für Elemente findet, sind aber sicher nicht immer optimal ).==============================
Im CKEditor kann der jCounter allerdings nicht genutzt werden.Zum jCounter in der PostAddForm im Titel-Eingabefeld:
Dort könnte ein Template-Listener auf das Template postAdd mit dem Event informationFields funktionieren (wenn Tim eben das passende Event rausgesucht hat ).
Im JavaScript müsste dann einfach $('#subject').jCounter(); genutzt werden.Achja, falls nicht schon bekannt, der jCounter hat auch noch ein paar Optionen:
JavaScript
Alles anzeigen$('.bla').jCounter($('#blubb')); // Nutze das Element mit der ID #blubb als Container für den jCounter $('.bla').jCounter(null, {colors: ['red', 'orange', 'yellow']}) // übergebe keinen zu nutzenden Container, aber ein Objekt mit dem Schlüssel "color", der die möglichen Zustandsfarben für die Badges enthält; möglich ist theoretisch jede Klasse, nur sollte man sich bei zu veröffentlichenden Plugins auf die Standardklassen der Badges begrenzen $('.bla').jCounter(null, {countUp: true}); // aktiviert das Hoch- statt Runterzählen $('.bla').jCounter(null, {max: 100}); // legt die Höchstgrenze für Zeichen auf 100 fest, hat das Element jedoch das Attribut "maxlength" gesetzt (<input maxlength="40" />), so wird dieses präferiert $('.bla').jCounter($('#blubb'), {colors: ['red', 'orange', 'yellow'], countUp: true, max: 100}); // alles kombiniert ;) // oder in etwas lesbarer: var container = $('#blubb'); $('.bla').jCounter(container, { colors: ['red', 'orange', 'yellow'], countUp: true, max: 100 });
-
Danke, ich werde es mal testen, sollte ja nicht so schwierig sein mit dem Eigenen TL Plugin aus dem Store
-
Danke Max soweit verstehe ich es,was ich noch nicht verstanden habe ist was muss ich in dem Script Code <script data-relocate="true" src="{@$__wcf->getPath()}js/mein.paketbezeichner.bla{if !ENABLE_DEBUG_MODE}.min{/if}.js"></script> eintragen wenn ich den Counter für den Editor beim Thema/Beitrag erstellen anzeigen möchte?
-
-
Hallo,
Ok angezeigt wird er,aber an der Falschen stelle und Zählen tut er auch nicht. -
Hallo,
der jCounter funktioniert nur bei normalen Eingabefeldern und nicht im WYSIWYG-Modus des Editors.
-
Ok danke kann man in einer der nächsten Version mit einer änderung dazu rechnen?
-
Hallo,
Ok danke kann man in einer der nächsten Version mit einer änderung dazu rechnen?
Prinzipiell ist es geplant, aber versprechen können wir natürlich nichts. Der Editor ist sehr komplex.
-
Ok danke
-
WoltLab wird ab dem WCF 2.1 (also auch WBB4.1) einen anderen Editor
verwenden. Da sollte die Implementierung funktionieren. Versprechen kann ich nichts -
Habe es nun auch bei mir gemacht im Forum, nur wie kriege ich es ins Blog, Kalender und Galerie? Kann mir jemand dort auf die Sprünge helfen?
Edit; Also ich meine die Kommentarfunktion -
Edit; Also ich meine die Kommentarfunktion
Hi,da könnte Folgender Selektor funktionieren: $('.commentList input').jCounter().
-
Leider haut das irgendwie nicht hin
Habe sämtlich Variationen probiert, als Bsp: der BlogMeine Javascript sieht so aus
Zitat$('.commentList input').jCounter();
und heißt
ZitatjCounter.CommentList.js
so eingebunden:Zitat<![CDATA[<script data-relocate="true" src="{@$__wcf->getPath()}js/jCounter.CommentList.js"></script>]]>
Template:
oder
oder
oder
Event:
ZitatmessageFields
oder
ZitatinformationFields
-
-
-
Heyho,
ich habe, auf Tims Anstupser hin, noch einmal nachgeschaut:
Die Kommentarboxen werden per JavaScript eingebunden.Dein JavaScript müsste dann in etwa so aussehen: