Block Dialog Tabs Issue
Permalink
I'm working on a block, and I need to have a 'Settings' tab in the block form dialog. I can't get mine to work! What is the basic syntax for this? How is it done? Please show code examples. Thanx!
I am looking for this as well. all the C5 examples I have found do not work... but I am using c5.7, and perhaps that is why... but still it is not clear to me why they are not working.
Hi growthcurve,
Just to make sure I understand what you mean by tabs. I attached an image that has three tabs "Feed Details", "Feed Settings", and "Text and Colors".
Are these the type of tabs you are referring to?
If so, I can write up the syntax and a code example.
Just to make sure I understand what you mean by tabs. I attached an image that has three tabs "Feed Details", "Feed Settings", and "Text and Colors".
Are these the type of tabs you are referring to?
If so, I can write up the syntax and a code example.
as for me, this is perfect! Thanks
No problem, I will write it up tonight.
1. Tab use in forms uses the concrete ui helper.
Core::make('helper/concrete/ui')
2. The concrete ui helper will use the tabs method.
Core::make('helper/concrete/ui')->tabs()
3. The tabs() method takes an array of "tab info" arrays.
tabs($tabs, $jstabs=true, $callback= 'ccm_activateTabBar')
- the first value of a tab info array is the data-tab name used in the data-tab hook for JavaScript
- the second value of a tab info array is the displayed tab title used as the label for the tab
- the third value is a boolean that sets the initial active tab
Example:
array('feed-details', t('Feed Details'), true)
- "feed-details" is the data-tab name
- "Feed Details" is the tab title
- "true" means this tab will be the initial active tab
4. Each tab section is wrapped in an element with a specific id and class.
- the id is the data-tab name prefixed with "ccm-tab-content-" - e.g. an id with the data-tab of "settings" would be "ccm-tab-content-settings"
- the class is "ccm-tab-content"
5. Place the desired form elements inside each tab section wrapper.
I attached a screenshot of what the example tabs would look like.
Example: form with three tabs
Example: the HTML output for the tabs
Core::make('helper/concrete/ui')
2. The concrete ui helper will use the tabs method.
Core::make('helper/concrete/ui')->tabs()
3. The tabs() method takes an array of "tab info" arrays.
tabs($tabs, $jstabs=true, $callback= 'ccm_activateTabBar')
- the first value of a tab info array is the data-tab name used in the data-tab hook for JavaScript
- the second value of a tab info array is the displayed tab title used as the label for the tab
- the third value is a boolean that sets the initial active tab
Example:
array('feed-details', t('Feed Details'), true)
- "feed-details" is the data-tab name
- "Feed Details" is the tab title
- "true" means this tab will be the initial active tab
4. Each tab section is wrapped in an element with a specific id and class.
- the id is the data-tab name prefixed with "ccm-tab-content-" - e.g. an id with the data-tab of "settings" would be "ccm-tab-content-settings"
- the class is "ccm-tab-content"
5. Place the desired form elements inside each tab section wrapper.
I attached a screenshot of what the example tabs would look like.
Example: form with three tabs
<?php defined('C5_EXECUTE') or die("Access Denied."); print Core::make('helper/concrete/ui')->tabs(array( array('feed-details', t('Feed Details'), true), array('feed-settings', t('Feed Settings')), array('text-colors', t('Text and Colors')) )); ?> <div id="ccm-tab-content-feed-details" class="ccm-tab-content"> <div class="form-group"> <?php echo $form->label('text1', t('Text 1'));?> <?php print $form->text('text1', $text1)?> </div> </div> <div id="ccm-tab-content-feed-settings" class="ccm-tab-content"> <div class="form-group">
Viewing 15 lines of 25 lines. View entire code block.
Example: the HTML output for the tabs
<ul class="nav-tabs nav" id="ccm-tabs-13192"> <li class="active"> <a href="#" data-tab="feed-details">Feed Details</a> </li> <li class=""> <a href="#" data-tab="feed-settings">Feed Settings</a> </li> <li class=""> <a href="#" data-tab="text-colors">Text and Colors</a> </li> </ul>
WOOHOO! Works like a charm!
No way I would ever have figured this one out on my own. Even with all the searching I did I never ran across anything that was so c57 specific.
Thanks!
No way I would ever have figured this one out on my own. Even with all the searching I did I never ran across anything that was so c57 specific.
Thanks!
I am new to concrete5 in general, so 5.7 was the first version I was exposed to.
Before there was any documentation, and now limited documentation, I went through all the core blocks to try and figure out how they worked.
I also downloaded all the free blocks in the marketplace to look at how they were built too.
I am looking forward to extensive documentation and seeing how I can contribute.
You are an experienced programmer, I bet you've found out how to do things a bunch of us would like to know. We all need to pool it together.
Before there was any documentation, and now limited documentation, I went through all the core blocks to try and figure out how they worked.
I also downloaded all the free blocks in the marketplace to look at how they were built too.
I am looking forward to extensive documentation and seeing how I can contribute.
You are an experienced programmer, I bet you've found out how to do things a bunch of us would like to know. We all need to pool it together.
yeah the 5.7 docs are a bit sad currently.... and I also downloaded a bunch of blocks to see how they work (some of which I still don't understand), but was still lacking in the tabs dept.
I plan on writing a how-to on the hows and whys of blocks that generate blocks... and the huge advantages that can have... bit I need to get a bit more polished in c57.
I plan on writing a how-to on the hows and whys of blocks that generate blocks... and the huge advantages that can have... bit I need to get a bit more polished in c57.
That would be great. I look forward to them.
