• Wenn du hier im Forum ein neues Thema erstellst, sind schon Punkte aufgeführt die du ausfüllen musst. Das dient im Allgemeinen dazu die notwendigen Informationen direkt mit der Frage bereitzustellen.
    Da in letzter Zeit immer wieder gerne das Formular gelöscht wurde und erst nach 3 Seiten Nachfragen die benötigten Infos für eine Hilfe kommen, werde ich nun jede Fragestellung die nicht einmal annähernd das Formular benutzt, sofort in den Sondermüll schicken.
    Füllt einfach die abgefragte Daten aus und alle können euch viel schneller helfen.

Tabs in Ad Template

principia

principia

Bekanntes Mitglied
Registriert
16. Jan. 2011
Beiträge
2.000
Punkte
163
Heute habe ich ein wenig mit jquery rumgespielt.
Ziel war es im ad template below "visitor panel" tabs einzubauen.
Nicht ganz einfach, wenn man eigentlich von sowas keine Ahnung hat :)

Ich habs dann aber hinbekommen und es sieht so aus (sind nur Demolinks drin):
gut.png

soweit so gut. Wenn ich aber auf die Portalansicht gehe, sieht das nur noch so aus:
die Links werden alle abgeschnitten
nicht gut.png
:(
hat jemand eine Erklärung, warum?
 
Hab den Democode von der jqueryseite genommen und angepasst.(xxxx=meine serveradresse)

Code: 
<div class="section">
      <div class="secondaryContent">
        <h3>interessante Links</h3>
<title>jQuery Tools standalone demo</title>

    <!-- include the Tools -->
    <script src="http://XXXXXXXXX/forum/js/jquery/jquery-1.5.2.min.js"></script>

    <!-- tab styling -->
    <link rel="stylesheet" type="text/css" href="XXXXXXXXXX/forum/js/jquery/tabs.css" />

    <!-- tab pane styling -->
    <style>

/* tab pane styling */
.panes div {
    display:none;
    padding:15px 10px;
    border:1px solid #999;
    border-top:0;
    height:100px;
    font-size:14px;
    background-color:#fff;
}

    </style>
</head>

<body>

<!-- the tabs -->
<ul class="tabs">
    <li><a href="#">Artikel</a></li>
    <li><a href="#">Hilfe</a></li>
    <li><a href="#">Test</a></li>
</ul>

<!-- tab "panes" -->
<div class="panes">
<!-- tab1-->
    <div><a href="http://XXXXXXX/pages/Artikeluebersicht/">Artikelübersicht</a><br />
          <a href="http://XXXXXXXXX/forums/Trainingsplaene/">Trainingspläne</a> | <a href="http://XXXXXXXXX/forums/Sonstiges/">Sonstiges</a><br />
          <a href="http://XXXXXXXXX/forums/Trainingsgrundlagen/">Trainingsgrundlagen</a> | <a href="http://XXXXXXXXXX/forums/Artikeldiskussionen/">Artikeldiskussionen</a><br /></div>
<!-- tab2-->
    <div>zweiter Tab</div>
<!-- tab3-->
    <div>dritter Tab</div>
</div>

<!-- This JavaScript snippet activates those tabs -->
<script>

// perform JavaScript after the document is scriptable.
$(function() {
    // setup ul.tabs to work as tabs for each div directly under div.panes
    $("ul.tabs").tabs("div.panes > div");
});
</script>
</body>
 
autsch:p

Code: 
<ul id="ragtektabs" class="Tabs tabs" data-panes="#ragtek > li"> li><a href="#">Artikel</a></li>     <li><a href="#">Hilfe</a></li>     <li><a href="#">Test</a></li> </ul> <ul id="ragtek"> <li>artikel inhalt</li> <li>hilfe inhalt</li> <li>test inhalt</li> </ul>

sollte es auch tun und benötigt keine externen extra js & css dateien:)
 
wieso? jquery ist doch eh in xf integriert.
werd ich gleich mal ausprobieren.
 
weil
<link rel="stylesheet" type="text/css" href="XXXXXXXXXX/forum/js/jquery/tabs.css" />

nicht im standard xf enthalten ist;)

dazu kommt noch, das xf eben den einen tab handler hat und du absolut keinen extra js code brauchst, das element braucht nur die richtige css klasse zu haben
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben