> > Feature (approved)

Splitting form fields and options into several tabs

Summary

approved
Sep 25, 2006
100%
Sep 25, 2006 / pixtur
Jan 5, 2009 / phsouzacruz
pixtur, tino
 

Attached files

No files uploaded
 
taskEdit_shaded.png

4 Comments

pixtur:please contact me before doing this...

8 years ago

Hi Tino... I also started with this task. I planned to use this code:
<div id="pm3">

<style id="pm3-style" type="text/css">
.pm3-tabs {
 display:table;
}
.pm3-tabs UL {
 margin:0;
 padding:0;
 list-style:none;
}
.pm3-tabs LI.pm3-tab A {
 color:#777;
 border:0;
 display:block;
 padding:.3em .6em;
}
.pm3-tabs LI.pm3-tab {
 background-color:#eee;
 float:left;
 margin-right:.3em;
}
.pm3-tabs LI.Active {
 background-color:#ddd;
}
.pm3-tabs LI.Active A {
 color:#000;
}
.pm3-tabs DIV {
 padding:.5em .7em;
 background-color:#ddd;
 clear:both;
}
</style>

<div id="pm3-module">
  <div class="pm3-tabs">
    <ul>
      <li class="pm3-tab" id="pm3-tab1"><a href="#">One</a></li>
      <li class="pm3-tab" id="pm3-tab2"><a href="#">Two</a></li>
      <li class="pm3-tab" id="pm3-tab3"><a href="#">Three</a></li>
    </ul>
    <div id="pm3-tab1-body">I'm the one's tab content.</div>
    <div id="pm3-tab2-body">I'm the two's tab content<br />and a 2nd line.</div>
    <div id="pm3-tab3-body">Guess who am I -- says the three's tab content.</div>
  </div>
</div>

<script id="pm3-script" type="text/javascript">
pm3 = {
  init: function() {
    $('.pm3-tabs').each(function(){
      var f = pm3.click;
      var group = this;
      $('.pm3-tab', group).each(function(){
        this.group = group;
        $(this).click(f);
        $('#'+this.id+'-body').hide();
      }).filter(':first').trigger('click');
    });
    $('.pm3-tabs ul li:first').addClass('Active');
    $('.pm3-tabs div:first').show();
  },
  click: function(e) {
    e.preventDefault();
    var tab = $('#'+this.id+'-body').get(0);
    $('.pm3-tab', this.group).each(function(){
      $(this).removeClass('Active');
      $('#'+this.id+'-body').hide();
    });
    $(this).addClass('Active');
    $(tab).show();
    this.blur();
  }
};
pm3.init();
</script>

</div>

pixtur:Hi Tino...

8 years ago

As I told you, I implemented some stuff in the train (two hours of Deutsche Bahn each day gives me some time to hack).

Could you have a look at the code and play around with the menu (see projEdit) in the latest revision.

tino:Reply to Hi Tino...

8 years ago

Hello Tom,

yes I will check the code and play a bit as soon as possible - maybe today but definitely tomorrow!

tino:Reply to Hi Tino...

8 years ago

Hey Tom,

I looked at the code and it looks fine!

It works quite well and looks pretty cool...

Some notesπ

  • Error after upgrading to latest revision in render/render_page.inc.php (PageElement extends BaseElement doesn't work, killed extends BaseElement and it works!)
  • tabs (css) just implemented in theme clean
  • some nice tabs are shown in http://www.web.de (where you can switch between "Suche" and "FreeMail")

Next Steps to implement tabsπ

  • persons profile edit
  • task edit
  • company edit