Jump to:

17452 Posts in 4473 Topics by 1971 members

Archive

SilverStripe Forums » Archive » Help with tabstrip

Our old forums are still available as a read-only archive.

Moderators: martimiz, Sean, biapar, Willr, Ingo, simon_w

Page: 1
Go to End
Author Topic: 1898 Views
  • Markus
    Avatar
    Google Summer of Code Hacker
    152 Posts

    Help with tabstrip Link to this post

    Hello everyone!

    Hope you all had a great weekend... At the moment I'm trying to style the different login forms and as Sam suggested I'll try to use the tabstrip script. But unfortunately there is no documentation available (at least I can't find it) and I can't figure out how the HTML should look like.
    The result should look like https://www.iconbuffet.com/people;login

    At the moment I simple have several <form>, but it's no problem to encapsulate them into div's, ul/li's or whatever.. Can someone please tell me what the script exactly expects!?

    Thanks,
    Markus

  • qhoxie
    Avatar
    Google Summer of Code Hacker
    39 Posts

    Re: Help with tabstrip Link to this post

    it may or may not fit your needs, but you might be able to use the TabSet class

    it is basically a wrapper for the tabstrip js that helps with forms

    the api docs are here:
    http://doc.silverstripe.com/assets/classes/default/TabSet.html

    the tabsets use the tabsetfieldholder template, so it should give you an idea of what you have to work with there

  • Markus
    Avatar
    Google Summer of Code Hacker
    152 Posts

    Re: Help with tabstrip Link to this post

    Thanks for your reply. I looked at that classes, but nevertheless I couldn't figure out how it works. It seems that this classes/templates are used for a form with different fieldsets and now for different forms or different div's.

    Maybe there is somewhere a client site where something like this is used!?

  • qhoxie
    Avatar
    Google Summer of Code Hacker
    39 Posts

    Re: Help with tabstrip Link to this post

    tabsets and thus tabstrips are used pretty heavily throughout the cms in the XAdmin.php files, so they should provide some good examples for how to use it

  • Sam
    Avatar
    Administrator
    679 Posts

    Re: Help with tabstrip Link to this post

    The basic idea is that you have a <ul> with #-linked <a> tags inside of each <li>. The blocks with IDs pointed to by the # links will be hidden / shown as required.

    jsparty/tabstrip.js requires the appendLoader() method from behaviour.js. It will identify any ul.tabstrip items in the page and turn them into tab strips on load. This means that if js is missing, the tab strip will behave like a normal #-link menu to different parts of the page.

    ----
    Here's some sample HTML:

    <ul class="tabstrip">
    <li><a href="#something">something</a></li>
    <li><a href="#other">other</a></li>
    </ul>

    <div id="something">
    the content of 1 tab
    </div>

    <div id="other">
    the content of the other tab
    </div>

  • Markus
    Avatar
    Google Summer of Code Hacker
    152 Posts

    Re: Help with tabstrip Link to this post

    Thanks Sam! It works now! But I have a little problem: The tabs don't look very good with the standard BlackCandy template because some styles (margins, borders) are missing in the CSS file.

    I added the file tabs.css to resolve this issue, but at the moment those folders are not under version control. So if someone updates his working copy, he won't get the right results when he doesn't reads the log message or the entry in trac.

    Maybe the templates (at least BlackCandy) should be added to the repository and a GSoC branch would also be nice. So we can add missing things like this ones.

    Another thing is were I should put other (optional) CSS files. For example it is common that the OpenID logo is shown in OpenID login forms. I created a file "openid_login.css" and put it under mysite/css, but how can I tell everyone that such a thing exists?

    Anyway, here is the code for the two CSS files:

    ------------- mysite/css/tabs.css -------------
    div.tab {
       clear: left;
       overflow: auto;
       border: 1px #AAA solid;
       border-top: none;
       position: relative;
       top: -3px;
       margin: 0;
       padding: 10px;
       /*width: 98%;*/
    }

    div.tabset {
       border: 1px solid #fff; /* Hack for FF1.5/Win Float-Bug */
       clear: left;
       margin: 0;
    }

    ul.tabstrip li {
       margin-left: 0;
    }

    -------------- mysite/css/openid_login.css -------------
    #OpenIDLoginForm_LoginForm_OpenIDURL {
    background: url(http://openid.net/login-bg.gif) no-repeat;
    background-color: #fff;
    background-position: 0 50%;
    color: #000;
    padding-left: 18px;
    width: 284px;
    }

    1898 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.