17488 Posts in 4473 Topics by 1978 members
|
Page:
1
|
Go to End | |
| Author | Topic: | 1693 Views |
-
Help with tabstrip
12 June 2007 at 1:22am
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;loginAt 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 -
Re: Help with tabstrip
12 June 2007 at 11:00am
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.htmlthe tabsets use the tabsetfieldholder template, so it should give you an idea of what you have to work with there
-
Re: Help with tabstrip
12 June 2007 at 8:36pm
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!?
-
Re: Help with tabstrip
13 June 2007 at 4:55am
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
-
Re: Help with tabstrip
13 June 2007 at 11:43am
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> -
Re: Help with tabstrip
14 June 2007 at 4:28am
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;
}
| 1693 Views | ||
|
Page:
1
|
Go to Top |
