Difference between revisions of "Adding jQuery UI tabs to listing submit page"

From JReviews Documentation
Jump to: navigation, search
m
Line 1: Line 1:
−
First you need to make the tabs library load on the listing submit page.
+
To add the tabs to the listing submit form, edit this theme file:
 +
*<span style="color: blue">/com_jreviews/jreviews/views/themes/default/listings/create_form.thtml</span>
  
−
Edit this theme file:
 
−
*<span style="color: blue">\com_jreviews\jreviews\views\helpers\assets.php</span>
 
  
 +
We will modify the code to display each field group in its own tab.
  
−
Add 'jq.ui.tabs' to the js array in function ListingsCreate():
+
First add this code on top of the file, inside php tags:
  
 
<source lang="php">
 
<source lang="php">
−
function ListingsCreate()
+
// Separate field groups into tabs.
−
{
+
$groups = array();
−
$assets = array(
+
foreach($listing_fields AS $group=>$fields){
−
'js'=>array('jreviews','jquery','jq.ui.core','jq.ui.tabs','jq.ui.rating','jq.ui.datepicker'
+
    $groups[$group] = array($group=>$fields);
−
,'jq.tooltip','jq.selectboxes','jq.jreviews.plugins'),
+
}
−
'css'=>array('theme','theme.form','jq.tooltip','jq.ui.core','jq.ui.rating')
+
−
);
+
−
 
+
 
</source>
 
</source>
  
  
−
and to the function ListingsEdit():
+
Next, add this javascript code also on top of the theme file, but outside php tags:
−
 
+
 
<source lang="php">
 
<source lang="php">
−
function ListingsEdit()
+
<script type="text/javascript">
 +
jQuery(document).ready(function()
 
{
 
{
−
$assets = array(
+
    jQuery(".jr_tabs").tabs();
−
'js'=>array('jreviews','jquery','jq.ui.core','jq.ui.tabs','jq.ui.rating','jq.ui.datepicker'
+
});
−
,'jq.tooltip','jq.selectboxes','jq.jreviews.plugins'),
+
</script>
−
'css'=>array('theme','theme.form','jq.tooltip','jq.ui.core','jq.ui.rating')
+
</source>
−
);
+
  
 +
 +
Find the code that output custom fields:
 +
<source lang="php">
 +
<?php echo $CustomFields->makeFormFields($listing_fields,'listing',null,__t("Select",true));?>
 
</source>
 
</source>
  
  
−
Next, download this file (for JReviews v2.2.07.182 and above):
+
and replace it with this:
−
*[http://docs.reviewsforjoomla.com/downloads/jreviews/create_form.zip create_form.zip]
+
  
−
extract create_form.thtml and replace the same file in this folder:
+
<source lang="php">
−
*<span style="color: blue">/com_jreviews/jreviews/views/themes/default/listings</span>
+
<div id="jr_tabs" class="jr_tabs" style="margin-bottom: 15px;">
 +
    <ul>
 +
    <?php $i=0;foreach($groups AS $title=>$fields):$i++;?>
 +
    <li><a href="#field_group<?php echo $i;?>"><span><?php echo $title;?></span></a></li>
 +
    <?php endforeach;?>
 +
    </ul>
 +
    <?php $i=0;foreach($groups AS $title=>$fields):$i++;?>
 +
    <div id="field_group<?php echo $i;?>"><?php echo $CustomFields->makeFormFields($fields,'listing',null,__a("Select",true));?></div>
 +
    <?php endforeach;?>   
 +
</div>
 +
</source>
  
  
−
The modified file places all "general" fields into the first tab, and all field groups will be placed in their own tabs.
 
  
−
Your submit form will look similar to this:
+
Your submit form will look similar to this, each field group outputted in a different tab:
  
 
[[File:SubmitFormTabs.png]]
 
[[File:SubmitFormTabs.png]]
Line 48: Line 56:
  
  
−
For more details on how to customize the tabs, read this article:
+
If you want to add other things into tabs like summay/description text areas or images, you can add new tabs and move the existing code in the file into new tabs. To learn how to add new custom tabs read this article:
 
*[[Adding jQuery UI tabs to listing detail page]]
 
*[[Adding jQuery UI tabs to listing detail page]]
 +
 +
and check examples on the official jQuery UI Tabs documentation:
 +
*http://jqueryui.com/demos/tabs/
  
  

Revision as of 14:05, 23 August 2011

To add the tabs to the listing submit form, edit this theme file:

  • /com_jreviews/jreviews/views/themes/default/listings/create_form.thtml


We will modify the code to display each field group in its own tab.

First add this code on top of the file, inside php tags: 

// Separate field groups into tabs.
$groups = array();
foreach($listing_fields AS $group=>$fields){
    $groups[$group] = array($group=>$fields);
}


Next, add this javascript code also on top of the theme file, but outside php tags: 

<script type="text/javascript">
jQuery(document).ready(function()
{
    jQuery(".jr_tabs").tabs();
});
</script>


Find the code that output custom fields: 

<?php echo $CustomFields->makeFormFields($listing_fields,'listing',null,__t("Select",true));?>


and replace it with this: 

<div id="jr_tabs" class="jr_tabs" style="margin-bottom: 15px;">
    <ul>
    <?php $i=0;foreach($groups AS $title=>$fields):$i++;?>
    <li><a href="#field_group<?php echo $i;?>"><span><?php echo $title;?></span></a></li>
    <?php endforeach;?>
    </ul>
    <?php $i=0;foreach($groups AS $title=>$fields):$i++;?>
    <div id="field_group<?php echo $i;?>"><?php echo $CustomFields->makeFormFields($fields,'listing',null,__a("Select",true));?></div>
    <?php endforeach;?>    
</div>


Your submit form will look similar to this, each field group outputted in a different tab:

SubmitFormTabs.png


If you want to add other things into tabs like summay/description text areas or images, you can add new tabs and move the existing code in the file into new tabs. To learn how to add new custom tabs read this article:

and check examples on the official jQuery UI Tabs documentation:

Retrieved from "https://docs.jreviews.com/index.php?title=Adding_jQuery_UI_tabs_to_listing_submit_page&oldid=2041"