Profiel in tabs

Vorige onderwerp Volgende onderwerp Ga naar beneden

Suggestie Profiel in tabs

Bericht van Benzema op di 24 jun 2014 - 11:41

Profiel in tabs met RPG Sheets

Hoi allemaal! Ik wil jullie laten zien hoe je het profiel in tabs kunt zetten. Dit is alleen te gebruiken als je het Roleplay Game Sheet gebruikt, anders heb je niet veel om in de tweede tab te zetten  Wink 

Stap 1 | De javascript Eerst plaatsen we de javascript code.

Beheerderspaneel Profiel in tabs Arrow10 Module Profiel in tabs Arrow10 HTML & Javascript Profiel in tabs Arrow10 Javascript code beheer

Voeg de volgende javascriptcode toe en sla op.

Code:
       $(function(){
      var d=function(){if($(this).is(".selected")) return;var a=$(this).closest(".systab");a.find(".selected").removeClass("selected").filter(".content")[a.is(".s_slide")?"slideUp":a.is(".s_fade")?"fadeOut":"hide"](+((a.attr("class")||"").match(/^[sS]*(?:^|s)s_trans([0-9]+)(?:s|$)[sS]*$/)||["",500])[1]);$(this).addClass("selected").data("content").addClass("selected").stop(!0,!0)[a.is(".s_slide")?"slideDown":a.is(".s_fade")?"fadeIn":"show"](+((a.attr("class")||"").match(/^[sS]*(?:^|s)s_trans([0-9]+)(?:s|$)[sS]*$/)||["",500])[1])};$("div.systab").each(function(){var a=$("> div",this).detach(),c=[],b;$(this).html('<div class="'+($(this).is(".s_bottom")?"contents":"tabs")+'"></div><div class="'+($(this).is(".s_bottom")?
    "tabs":"contents")+'"></div>');$(a).each(function(){b=$(this).children(":first");b.is("span")?(c=$(c).add($(b).addClass("tab").data("content",$(this))),$(this).addClass("content").data("tab",b)):$(this).remove()});$("> div.tabs",this).append(c);$("> div.contents",this).append(a);b=$(".content:first,.content.selected",this).last();$(b).addClass("selected").siblings().hide();$(b).data("tab").addClass("selected")}).on("click",".tab",d).filter(".s_hover").on("mouseenter",".tab",d)
    });


Stap 2 | De template Om het profiel (aantal berichten, woonplaats, enz.) te scheiden van de Character sheet (aanvullende informatie over je karakter), hebben we dus 2 tabs nodig. Hiervoor moeten we eerst wat in de templates aanpassen.
   
Beheerderspaneel Profiel in tabs Arrow10 Display Profiel in tabs Arrow10 Templates Profiel in tabs Arrow10 Algemeen Profiel in tabs Arrow10 viewtopic_body

Zoek in de template naar de volgende code en vervang die...

Code:
    <!-- BEGIN profile_field -->
     {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
     <!-- END profile_field -->
     {postrow.displayed.POSTER_RPG}

... door deze code.

Code:
    <div class="systab">
    <div  class="selected">
        <span>PROFIEL</span>
        <!-- BEGIN profile_field -->
                {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                <!-- END profile_field --></div>
      <div>
        <span>RPG SHEET</span>{postrow.displayed.POSTER_RPG}
      </div>
    </div>

Nu hebben we de tabs voor het profiel gemaakt. Klik op verzenden en publiceer de template om hem te laten werken.

Stap 3 | De CSS Om de tabs te personaliseren, kun je de volgende code in de CSS sheet plaatsen.

Beheerderspaneel Profiel in tabs Arrow10 Display Profiel in tabs Arrow10Plaatjes en Kleuren Profiel in tabs Arrow10 Kleuren Profiel in tabs Arrow10 Cascading Style Sheet

Code:
    /* de tab */
    .systab .tab {
      padding: 2px 5px;
      margin-right: 5px;
      color: #000;
      background: #fff;
      border: 1px solid #000;
      cursor: pointer;
    }
    /* hovereffect van tab */
    .systab .tab:hover {
      background: #b8efa1;
      color: #487f31;
      border-color: #487f31;
    }
    /* geselecteerde tab */
    .systab .tab.selected{
      color: #ccc;
      background: #333;
    }
    /* inhoud tab  */
    .systab .contents {
      margin-top: 1px;
      margin-bottom: 1px;
      color: #000;
      background: #fff;
      border: 1px solid #000;
      padding: 10px;
    }
    /* stijl van tab */
    .systab.s_float .tab,.systab.s_float .tab {
      display: block;
      margin: 5px;
    }
    /* plaats van inhoud  */
    .systab.s_float .tabs,.systab.s_float .contents {
      float: left;
    }

____________

Tada! Als het goed is, ziet het er als volgt uit...

Klik om te bekijken:
Profiel in tabs 256rcy10

Als er problemen naar voren komen, kunnen die altijd via pm gemeld worden! Veel plezier ermee Smile

Benzema

Benzema
Medaille Forumlid
Medaille Forumlid

Vrouw Aantal berichten : 195
Registratiedatum : 24-06-14
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Benzema is bedankt door de starter van dit topic.

Suggestie Re: Profiel in tabs

Bericht van 10spetter10 op di 24 jun 2014 - 13:14

Tutorial Goedgekeurd!

Het ziet er mooi uit en ik denk wel dat veel er het gaan gebruiken. Wink
10spetter10

10spetter10
Medaille Forumlid
Medaille Forumlid

Man Aantal berichten : 1223
Geboortedatum : 21-04-97
Leeftijd : 22
Taal : Nederlands
Locatie : België
Registratiedatum : 08-07-12
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

10spetter10 is bedankt door de starter van dit topic.

Vorige onderwerp Volgende onderwerp Terug naar boven


Permissies van dit forum:
Je mag geen reacties plaatsen in dit subforum