Add a horizontal tabs element

Subscribing

This patch adds the horizontal tabs implementation from http://drupal.org/project/ux_elements

Ignore the last patch, I forgot the -N switch to add the necessary css and js files

#3: elements_horizontal_tabs.patch queued for re-testing.

Good addition to Elements.

I'd like to deprecate the tabs module in favour of a horizontal tabs element in Elements. See #1056562: Deprecate Tabs module for D7 in favor of Elements.

I'm not sure why this is failing testing. I'll have to scrub the line endings and then reroll.

Subscribing!

subscribe

Retrying with a scrubbed line ending patch

subscribe

I tested #11 and it works except that all tab titles are prepended with "Hide ". The reason is that fieldset legend is <span class="fieldset-legend"><a class="fieldset-title" href="#"><span class="fieldset-legend-prefix element-invisible">Hide</span> TAB</a><span class="summary"></span></span> and it's taken with $.text() which removes all markup including .element-invisible. I tried to use .html() instead of .text() but extra borders appear and CSS needs to be fixed too.

subscribe

subscribing

...subscribing.

+1

subscribe

+1

What is the status of this issue? How close is it to being committed?

subscribe

Subscribe.

What does this module in git posted in #17 do? Is it a repository that other modules can use to implement tabs? Is that something that could be used to port panels tabs for example?

(subscribing the end ? http://drupal.org/node/34496 - http://3281d.com/2009/03/27/death-to-subscribe-comments)

+1 for some panels tabs up in here! ...also same question.

...the git branch is what the word says, a 'fork' of the main module code that will have changes only regarding this issue here. I guess Dave did this in order to not mix code changes here with other changes.

what is wrong with the current code in GIT? Is there a reason its not in main yet?

If someone wants to let me know whats wrong I can spend some time cleaning this up. I need this for a module I am moving to Drupal 7. We used to use the Tabs module, but its been deprecated in favor of elements, so I'd like to see this make it into the next release of elements.

+1

subscribe

subscribey - would really like to take a crack at using this in a panels style or porting panels tabs. +1 on #28, any new status since #14 test?

Might as well just use Quick tabs with Panels now.

Thanks, had never heard of quicktabs. I can't tell if it offers a panels style plugin (which would be ideal) but will check it out.

You can make quicktabs and then insert them into panels, like content panes

+1

+1

Subscribing.

#32-#34 describes a solution to your tab needs. It doesn't appear the maintainer is interested in this.

Tabs + Panel Tabs modules also work well.

could be of interest to merge Tabs into Elements.

I pointed zuuperman and Stalski (the maintainers of Field Group) to this issue by email.

subscribe.

Included is a first patch.
Crosslinking #1036184: Move horizontal tabs to elements module

There was still one link to field_group module in it, this really works :)

After a quick review by Damien, I moved the library requirement to the element_info hook instead of the theme function.
Fieldgroup keeps working.

No idea why the test bot fails, but I think you're patch is missing horizontal-tabs.js and horizontal-tabs.css...

Yeah, damnd, the whole folder library folder actually. Forgot to add :(

Cool, patch is looking good. I applied it and tested it with References Tabs. It's working fine apart from one issue:

In line 137, horizontal-tabs.js tries to call $.fn.drupalGetSummary(), which is defined in form.js. The system/drupal.form library is not loaded if there's no form, and I therefore get errors which prevent the tabs from being rendered (this.fieldset.drupalGetSummary() is not a function).

A simple fix is to simply load the library (patch attached). Not sure that's the best solution, as e.g. many people might not even need "tab summaries"; but then form.js is relatively small anyway...

Hm.

Correct. That's one that I forget and did not test through. I added the form library within the field_group module before.
Patch is good.

We should declare the form.js dependency in elements_library() instead of having to add the library just like system_library() does for vertical tabs.

Like this? ;-)

Hm, without --no-prefix then...

Why a custom horizontal tab element? What is wrong with Jquery UI Tabs? There is also a patch here
#1263616: jQuery UI form elements? for this module

PS: I found the reasons here #1056562: Deprecate Tabs module for D7 in favor of Elements...

@giorgio79 The horizontal tabs described here are a copy of the vertical tabs element in core. It is currently defined within field_group.
We cannot suddenly give people something totally different, introduce new bugs as lot of code would be rewritten in field_group. The module has now over 10000 users and I can't just suprise every user when upgrading. It can be inbedded in sites as it is and so on ...

You could certainly go further with the other elements that are related in usability. The future will tell us which way to go and probably that will be the way drupal8 tabs will end up using. There is absolutely nothing wrong with jquery ui tabs but that's another approach than the consistent vertical/horizontal issue.

For now, we start with this and go from there.

suscribing

Can someone test the patch in #56 ?

I can confirm that it works fine with References Tabs. That is, the following works: create a form element of #type horizontal_tabs, add fieldsets as children and on each fieldset set #group to the id of the horizontal_tabs element. This produces horizontal tabs. (As far as I can tell this works essentially the same as vertical_tabs in core).

I can also confirm that it works fine, tested and used with a "port" of panels tabs for d7 => http://drupal.org/sandbox/jsacksick/1251912

I can also confirm that it works fine, tested and used with a "port" of panels tabs for d7 [...]

So... RTBC? (Sorry if I'm being rash)

Good for me. There is a change made in horizontal tabs, so I'll resubmit a patch.
Also see #1036184: Move horizontal tabs to elements module which needs review.

Any progress on the updated patch, Stalski?

The branch 7.x-2.x in field_group does not have horizontal tabs anymore. It also works with the renderable elements module. I'll talk to Dave about this and I hope I can commit this patch.
Bumping this :)

Yeah, this module deserves a fresh dev with this included.

Friendly 3-week bump :)

Hey Dave, how about that review?

Patch still works fine, waiting for the next dev release ;-)

Btw, with Google Chrome I've got a ugly orange border around & below the tabs, the following fixed it:

.horizontal-tabs ul.horizontal-tabs-list li:focus {
outline: none !important;
}

Ping some life back into this hopefully. The Tabs module recommends this module for this functionality and is one of the reasons that it is not being ported to Drupal 7.

Create summary.

I had a crack at capturing status in a summary for the issue. Corrections/additions would be great.

Bumping to "needs review" as current patch hasn't yet received serious review.

This sort of UI patch tends to be challenging to review as it includes significant complexity in CSS and Javascript as well as PHP. But don't feel like you need to master CSS, Js and PHP to contribute. Separate reviews of each of these three would be a good start.

CSS review: A nit-pick, but these are examples of overqualified specificity, and should be trimmed down to just classes, if possible.

+div.horizontal-tabs {

+div.field-group-htabs-wrapper .field-group-format-wrapper {

+.horizontal-tabs fieldset.horizontal-tabs-pane {

Some of the files you're adding are missing newlines at the end of the file.

I would agree, in principle, with the feedback in #72, but ideally, there would be a consistent "focus" behaviour for all tabs, not just horizontal ones.

When i am trying embed field collection item in as horizontal tam, i dont see any result, am i missing something,
I have field collection items in prfile2 , and wanted to display each of them as a horizontal tab. it is not working, can some one throw some light please?

What's the reasoning behind fieldsets being used for horizontal tabs?

Wether or not used in forms, both render valid for W3C - but semantically this doesn't seem be correct. For example, AnySurfer (http://www.anysurfer.be/en), a Belgian quality mark for accessible websites, does not condone the use of fieldsets outside of forms.

http://stackoverflow.com/questions/314457/does-the-use-of-the-fieldset-h... is an interesting resource about this matter, and most of the opinions seem to agree.

Anyone have a feel for the status of this issue?

Im not sure if my issue is related to this or field groups but I get no answer on that module...

I am using fieldgroup to make a node type tabbed, using horizontal tabs...
And have spend hours now trying to hide a field with drupals hide($content['field_name']);
Could not make it work until I tried dragging the field out of my horizontal tabs and to the top of all the other fields, and then it worked..... So I'm guessing this is related to fieldgroup module....

If I wanna hide the body i do hide($content['body']); But should the field naming scheme be different now that it is encapsulated in fieldsets?

Any thoughts on this? Im using the patch on #56

But to answer #80 it seems to be working just fine beside my theming issue...
I'm using it here to make nodes like mini pages, the black menu buttons is horizontal tabs...
It's a live site so dont register or anything :-) horizontal tabs in use

I'm using the patch from 56 too ... was more interested in the "needs review" status

I've removed my post about tabs for fields added to a single node as that functionality, however un-intuitive, is, indeed, in the core. Thank you!

I got this error after enabling the module with the patch from #56:

Error: Cannot redeclare form_process_horizontal_tabs() (previously declared in /sites/all/modules/contrib/field_group/field_group.module:1200) in /sites/all/modules/patched/elements/elements.module, line 259

@Rob_Feature: you can avoid the error by ugprading the field_group module to the 2-x version...

Sorry I don't know how to submit a patch yet but this could be added to the above patch around line 285

This helps to mimic the classes field group had for horizontal tabs.

//Add numbering classes to tabs to mimic field group functionality
var tcount = 0;
$('> li', tab_list).each( function() {
	$(this).addClass('horizontal-tab-button-' + tcount);
	tcount++;
});

Also, I suck at coding ^_^

@bforchhammer, from the field_group project page:

The 7.x-2.x branch will not be supported any longer...
Note: Current changes are made in the 1 branch.

@DigitalFrontier... Thanks, good to know.

It's seem that latest version of field_group already supports horizontal_tab

It's seem that latest version of field_group already supports horizontal_tab

Correct. The point of this issue was that it would be better located within the elements module instead of the fieldgroup module, and therefore the functionality should be moved...

Does the module version 7.x-1.4 contain horizontal tabs? haven't found mentioning of horizontal tabs in its code. Applied the patch 56 to it on D7.23, it said that the patch was applied partially. How can horizontal tab be added now programmatically to a form?

#56: elements_horizontal_tabs_1034690_56.patch queued for re-testing.

Will Elements-based tabbed Views work with the EVA module? I'd like to attach a tabbed view to a node.