JQuery - Widget Tabs funktioniert nicht

Gesperrt
plishas
Beiträge: 3
Registriert: Fr 15. Feb 2013, 11:56
Kontaktdaten:

JQuery - Widget Tabs funktioniert nicht

Beitrag von plishas »

ich bin neu bei Contenido, versuche gerade JQuery einzubauen.
Jetzt probiere ich Widget "Tabs" aus.
http://jqueryui.com/tabs/

Die Seite sieht total zerschossen aus. Ein Teil der Seite wird an irgendeine Stelle reinkopiert, die Laschen funktionieren nicht.
aber der CSS von ui geht.

Habe den Queltext in eine Datei kopiert, und wenn ich dort die folgende Zeichenkette rausnehme, funktionieren die Laschen....

Code: Alles auswählen

<base href="http://mydomain/contenido_test/cms/" />
Habe keine Ahnung woran es liegt. Habe AMR ausgemach, das Problem blieb.
Andere Sachen mit JS, CSS funktionieren.

in Layout:

Code: Alles auswählen

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
...
    <link rel="stylesheet" href="css/jquery-ui.css" />  
    <script src="js/jquery-1.8.3.js"></script>  
    <script src="js/jquery-ui.js"></script>
...   
</head>
in einem Artikel als HTMl:

Code: Alles auswählen

<script type="text/javascript">// <![CDATA[
     $(function() {  $( "#tabs" ).tabs();  });
// ]]></script>
<div id="tabs">  
     <ul>
          <li><a href="http://jake/contenido_test/cms2/#tabs-1">Nunc tincidunt</a></li>
          <li><a href="http://jake/contenido_test/cms2/#tabs-2">Proin dolor</a></li>
          <li><a href="http://jake/contenido_test/cms2/#tabs-3">Aenean lacinia</a></li>
     </ul>
     <div id="tabs-1">
          <p>Test text 1</p>
     </div>
     <div id="tabs-2">
          <p>Test Text 2</p>
     </div>
     <div id="tabs-3">
          <p>Test Text 3</p>
     </div>
</div>
Zuletzt geändert von plishas am Mo 18. Feb 2013, 14:58, insgesamt 1-mal geändert.
Spider IT
Beiträge: 1416
Registriert: Fr 3. Dez 2004, 10:15

Re: JQuery - Widget Tabs funktioniert nicht

Beitrag von Spider IT »

Hallo und willkommen plishas,
plishas hat geschrieben:... und wenn ich dort die Zeichenkette volgende rausnehme, dann funktionieren die Laschen....

Code: Alles auswählen

<base href="http://mydomain/contenido_test/cms/" />
Und wo hast du die Dateien für deine Tabs abgelegt?
Die Angabe base href wird im Grunde vor allen Angaben gesetzt, also wird aus

Code: Alles auswählen

js/jquery-1.8.3.js
dann

Code: Alles auswählen

http://mydomain/contenido_test/cms/js/jquery-1.8.3.js
Diese Angabe wird im Übrigen gerade beim Einsatz von AMR benötigt, da sich sonst die Angaben zu Bildern, Stylesheets und Scripts auf die aktuelle URL beziehen und es diese "Verzeichnisse" gar nicht gibt.

Gruß
René
plishas
Beiträge: 3
Registriert: Fr 15. Feb 2013, 11:56
Kontaktdaten:

Re: JQuery - Widget Tabs funktioniert nicht

Beitrag von plishas »

vielen Dank für die Antwort!
Die js-Dateien von JQuery liegen im js Verzeichnis des Mandanten "contenido_test/cms2/js". Sie sind sichtbar für den Browser - man kann die Datei über die entsprechende URL direkt öffnen. In der .htaccess sind die .js Dateien aus mode_rewrite ausgeschlossen.

Die Tabs von JQuery funktionieren fehlerhaft und zerschiessen das DOM der Seite. Zusätzlich zum Inhalt der Tabs wird ein Teil der Startseite zusätzlich mit ausgegeben. Wenn die JQuery Dateien aus dem Internet geladen werden funktioniert alles einwandfrei:

Code: Alles auswählen

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
wenn die JQuery Dateien lokal eingebunden werden, treten die Probleme auf:

Code: Alles auswählen

<link rel="stylesheet" href="css/jquery-ui.css" rel="stylesheet" type="text/css" />  
<script src="js/jquery-1.8.0.js"></script>  
<script src="js/jquery-ui.js"></script>
Wenn der generierte Quelltext als html-Datei gespeichert wird und das Base-Tag

Code: Alles auswählen

<base href="http://mydomain/contenido_test/cms2/" />
gelöscht wird, funktioniert auch alles.
Was kann ich machen, um das Problem zu lösen? Vielen Dank für jeden Hinweis.

Gruß Grigory
plishas
Beiträge: 3
Registriert: Fr 15. Feb 2013, 11:56
Kontaktdaten:

Re: JQuery - Widget Tabs funktioniert nicht

Beitrag von plishas »

Nach langem rumprobieren funktionieren die JQuery-Tabs jetzt problemlos.

Ich habe die CSS, die JQuery Bibliothek und die JQUery UI im Layout eingebunden und den Javascriptcode einem Modul hinzugefügt.

Folgende Dateien werden als lokale Kopie im Layout eingebunden: Meiner Meinung nach ist es ein Versionsproblem von JQuery mit Contenido, da andere Versionen der Bibliothek nicht den gewünschten Erfolg brachten.

Vielen Dank für die aktive Mithilfe
Gesperrt