jQuery Plugin sauber einbinden

Druckbare Version

09.12.2013, 21:59
jogoto

jQuery Plugin sauber einbinden

Ich habe dieses jQuery Tooltip Plugin in Contao 3.1 eingebunden. CSS und JS liegen in tl_files, CSS ist über "Zusätzliche Stylesheets" eingebunden, JS über "Zusätzliche <head>-Tags"

Code:

<script src="tl_files/tooltipster/jquery.tooltipster.min.js"></script>

und aktiviert ist das Plugin über diese Angabe in "Eigener Java.Script-Code"

Code:

<script> $(document).ready(function() { $('.tooltip').tooltipster(); }); </script>

Funktionieren tut alles, nur hätte ich das ganze etwas "schöner", also mehr ala Contao zum anklicken unter "jQuery-Templates". Nach einer Anleitung zu MooTools Tooltips habe ich eine j_tooltip.tpl mit dem Script-Code erstellt und in "templates" geladen. Im Backend habe ich das nun zum anklicken, bekomme aber eine Fehler beim Aufruf der Seite.
Wie muss ich das einbinden?
09.12.2013, 22:13
Dirch

huhu,

spick einfach hier: https://contao.org/de/extension-list...ouchswipe.html

Ich denke das ist genau das was du suchst.

Beste Grüße...
...Dirk

die Templates heißen heute .xhtml oder html5
09.12.2013, 23:11
jogoto

Vielen Dank,

ich hab es "kopiert", habe nun

/assets/jquery/tooltipster/jquery.tooltipster.min.js
/system/modules/jquery_tooltipster/config/autoload.php

Code:

<?php /** * Contao Open Source CMS * * Copyright (C) 2005-2013 Leo Feyer * * @package jquery_tooltipster */ /** * Register the templates */ TemplateLoader::addFiles(array ( 'j_tooltipster' => 'system/modules/jquery_tooltipster/templates', ));

/system/modules/jquery_tooltipster/languages/de/module.php

Code:

<?php /** * Contao Open Source CMS * * Copyright (C) 2005-2013 Leo Feyer * * @package jquery_tooltipster */ /** * Back end modules */ $GLOBALS['TL_LANG']['MOD']['jquery_tooltipster'][0] = 'jQuery ToolTipster Plugin';

/system/modules/jquery_tooltipster/templates/j_tooltipster.html5

Code:

<script type="text/javascript" src="<?php echo TL_ASSETS_URL; ?>assets/jquery/tooltipster/jquery.tooltipster.min.js"></script>

und kann es im Backend unter den Module sehen und unter den jQuery-Templates. Aber funktionieren tut es nicht. Erst wenn ich

Code:

<script> $(document).ready(function() { $('.tooltip').tooltipster(); }); </script>

wieder unter "Eigener Java.Script-Code" einfüge geht es. Ich habe alle noch mal kontrolliert und stehe auf dem Schlauch. :o
09.12.2013, 23:35
wulf

Dein template j_tooltipster müsste in etwas so ausssehen (ungetestet):

Code:

<script type="text/javascript" src="<?php echo TL_ASSETS_URL; ?>assets/jquery/tooltipster/jquery.tooltipster.min.js"> <script> (function($) { $(document).ready(function() { $('.tooltip').tooltipster(); }); })(jQuery); </script>

Einfach mal in ein vorhandenes j_template, zb j_slider.html5 schauen und etwas basteln und testen
09.12.2013, 23:44
jogoto

Danke, werde Deine Version nachher mal testen. Hatte es zwischenzeitlich zum laufen bekommen, in dem ich einfach den Teil mit rein kopiert habe:

Code:

<script type="text/javascript" src="<?php echo TL_ASSETS_URL; ?>assets/jquery/tooltipster/jquery.tooltipster.min.js"></script> <script> $(document).ready(function() { $('.tooltip').tooltipster(); }); </script>

Vermutlich nicht gerade sauber aber es geht. :D
09.12.2013, 23:51
wulf

Code:

(function($) { })(jQuery);

ist die etwas sichere Methode, falls mal mootools mit eingebunden wird (stichwort: no-conflict)
10.12.2013, 00:08
jogoto

Perfekt, danke! :)
17.12.2014, 11:31
m-werk

Hallo, ich möchte dieses Thema nochmals aufgreifen:

Ich verwende Contao 3.4 und habe in meinem Seitenlayout unter zusätzliche <head>-Tags folgendes eingebaut:

Code:

<script type="text/javascript" src="files/js/jquery.tooltipster.min.js"></script> <script> $(document).ready(function($) { $('.tooltip').tooltipster(); })(jQuery); </script>

Weiters habe ich das tooltipster.css importiert und unter interne Stylesheets eingebunden.

Nun habe ich einen Artikel erstellt mit einem Texthinhalt und im html-Bereich sieht's so aus:

HTML-Code:

<div class="tooltip" title="test test test test">Test 1</div>

Leider tut sich nichs.

Kann mir hier jemand bitte unterstützen?
17.12.2014, 12:16
joe

Schau dir mal http://ck2013.may17.de/javascript-einbinden.html an

Was sagt den die Developer Toolbar?
17.12.2014, 13:12
m-werk

Die sagt mir jetzt gar nix. Es scheint so, als würde es gar nicht funktionieren.

Der Link ist jetzt mal richtig. Auch das CSS ist eingebunden. Mir verwundert nur, daß im CSS alles mit .tooltipster-default, .tooltipster-base usw. definiert ist.

LG, Andi
17.12.2014, 13:30
m-werk

So, bin jetzt nochmals von ganz vorne alles durchgegangen.

Ich sehe jetzt zwar auch das Tooltip, aber nicht formatiert. Hmmmm
17.12.2014, 14:14
m-werk

So, folgendes hab ich nun gemacht.

Ich hab ein neues Template angelegt "j_tooltipster.html5" und hab folgendes hineinkopiert:

Code:

<script src="<?php echo TL_ASSETS_URL; ?>assets/jquery/tooltipster/jquery.tooltipster.min.js"></script> <script> $(document).ready(function($) { $('a[title]').tooltipster({ positionTracker:true, animation: 'fade', delay: 200, touchDevices: false, trigger: 'hover', position: 'top', theme: 'tooltipster-shadow' }); })(jQuery); </script>

Die Datei jquery.tooltipster.min.js habe ich in jenem Ordner hochgeladen, welcher auch im Script steht. (Wurde mehrmals überprüft)

Dann hab ich das dementsprechende CSS-File eingebunden in den Header-Tag, da ich es auch hochgeladen und geändert habe.

Ich bin nach dieser Anleitung herangegangen: >> hier <<

Im Artikel hab ich ein Element "hmtl" angelegt und folgendes hineingeschrieben:

HTML-Code:

<a href="#" title="Tooltip TEXT">Test 1</a>

Ich sehe zwar das Wort "Test 1" und wenn ich über das Wort fahre, auch "Tooltip TEXT" aber nicht in jener Form, wie oben bei der Anleitung. Ich sehe es ganz normal, wie wenn ich einen ganz normalen Link einfüge.

Was hab ich hier noch vergessen? Ich finde nichts mehr
17.12.2014, 14:31
m-werk

Mensch, ich hab schon wieder nicht richtig geschaut. Der Scripte-Code war falsch!
Richtg:

Code:

<script> (function($){ $(document).ready(function() { $('a[title]').tooltipster({ positionTracker:true, animation: 'fade', delay: 200, touchDevices: true, trigger: 'hover', position: 'right', theme: 'tooltipster-shadow' }); }); })(jQuery); </script>

Jetzt funktioniert es.