2. PHPRunner Tips and Tricks
  3. How to add tabs on the add/edit pages
This topic is locked

How to add tabs on the add/edit pages

 		10/21/2009 8:06:33 AM
PHPRunner Tips and Tricks
J
 Jane author

Code from Dynamic Drive DHTML Scripts

http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm'>http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm
Here is a step-by-step instruction:

  1. download tabcontent.css, tabcontent.js, shade.gif, shadeactive.gif, indentbg.gif and indentbg2.gif files:

    http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm'>http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm

    Place these files in the generated output directory.
  2. add these files to the page.

<link rel="stylesheet" type="text/css" href="tabcontent.css" />

<script type="text/javascript" src="tabcontent.js">

</script>



To add this snippet open add or edit page in Visual Editor, switch to HTML mode, find the closing </HEAD> tag and insert code snippet right before it.
3. add JavaScipt code at the end of the page on the Visual Editor tab:

<script type="text/javascript">

var mytabs=new ddtabcontent("customtabs")

mytabs.setpersist(true)

mytabs.setselectedClassTarget("link")

mytabs.init(2000)

</script>


4. modify table with fields in the following way:

<UL class=shadetabs id=customtabs>

<LI><A href="#" rel=tcontent1 class=selected>Page 1</A>

<LI><A href="#" rel=tcontent2>Page 2</A> </LI>

</UL>

<div style="border:1px solid gray; margin-bottom: 1em; padding: 10px">
<TABLE id="fields_block{$id}" cellSpacing=0 cellPadding=4 border=0>

<tr><td>
<div id="tcontent1" class="tabcontent">

<table id="fields_block{$id}" cellSpacing=0 cellPadding=4 border=0 width=100%>

{BEGIN FieldName1_fieldblock}<TR><TD class=editshade_b style="PADDING-LEFT: 15px" width=150>FieldName1</TD>

<TD class=editshade_lb style="PADDING-LEFT: 10px" width=250>{$FieldName1_editcontrol} </TD></TR>{END FieldName1_fieldblock}

{BEGIN FieldName2_fieldblock}<TR><TD class=editshade_b style="PADDING-LEFT: 15px" width=150>FieldName2</TD>

<TD class=editshade_lb style="PADDING-LEFT: 10px" width=250>{$FieldName2_editcontrol} </TD></TR>{END FieldName2_fieldblock}

{BEGIN FieldName3_fieldblock}<TR><TD class=editshade_b style="PADDING-LEFT: 15px" width=150>FieldName3</TD>

<TD class=editshade_lb style="PADDING-LEFT: 10px" width=250>{$FieldName3_editcontrol} </TD></TR>{END FieldName3_fieldblock}

</table>

</div>
<div id="tcontent2" class="tabcontent">

<table id="fields_block{$id}" cellSpacing=0 cellPadding=4 border=0 width=100%>

{BEGIN FieldName4_fieldblock}<TR><TD class=editshade_b style="PADDING-LEFT: 15px" width=150>FieldName4</TD>

<TD class=editshade_lb style="PADDING-LEFT: 10px" width=250>{$FieldName4_editcontrol} </TD></TR>{END FieldName4_fieldblock}

{BEGIN FieldName5_fieldblock}<TR><TD class=editshade_b style="PADDING-LEFT: 15px" width=150>FieldName5</TD>

<TD class=editshade_lb style="PADDING-LEFT: 10px" width=250>{$FieldName5_editcontrol} </TD></TR>{END FieldName5_fieldblock}

{BEGIN FieldName6_fieldblock}<TR><TD class=editshade_b style="PADDING-LEFT: 15px" width=150>FieldName6</TD>

<TD class=editshade_lb style="PADDING-LEFT: 10px" width=250>{$FieldName6_editcontrol} </TD></TR>{END FieldName6_fieldblock}

</table>

<DIV>
</td></tr>

</TABLE>



</div>
Pfeiffer 12/9/2009

Hello Support,
PHPR 5.2 will change the html-sides because of the new features.
If I now edit and change these pages following your suggestion ..

will work in 5.2 too with the NEW features ?
I assume that PHPR 5.2 will have to recreate the html-pages.

What about this changes for TAB .. will I have to do this work again .. ?

I would like to change a lot of pages with a lot of fields and want to use a lot of TABS.
Maybe it is better to wait for 5.3 (perhaps this feature is included in this version) ..
Best regards

Uwe Pfeiffer
C
 		charly1211 1/17/2010

Hi,
I've explained exactly that one and a half years ago in August 2008, but it hadn't found its way in phprunner yet! see http://www.asprunner.com/forums/topic/12055-ajax-tabs/pagehlcharly1211fromsearch1
I would appreciate that because I have the same problem to recreate hundreds of pages new with the tabs in each version since phpr 4.1!
I would love it if it was possible to integrate that in PHPR standard version!
Charly
A
 		aalekizoglou 3/3/2010



Hi,
I've explained exactly that one and a half years ago in August 2008, but it hadn't found its way in phprunner yet! see http://www.asprunner...fromsearch1
I would appreciate that because I have the same problem to recreate hundreds of pages new with the tabs in each version since phpr 4.1!
I would love it if it was possible to integrate that in PHPR standard version!
Charly


Hi,
based on Jane's post, I have created a php library file with a procedure making all the required modifications on the template for tabs to work. What I have to do is add some definitions in my add/edit/view pages for where I want each tab to start (e.g, {$tabstart} {$tab1} {$tab2} {$tabend}). Definitions in Visual Editor are version safe, and always the best way to create template modifications that are upgrade safe and still even after adding or removing fields on a given page.
After that in the event editor I include the library file and call the procedure with the required parameters, $xt the template, and an array with the tab captions.

Of course I have altered the template and style files under Program Files in order to include Dynamic Drive's css and a required presentation style.
I have used this way for a lot of projects, some of them currently upgrading to PHPR 5.2, and found it very safe. If required I can make a post with the files and a sample to show a way of how to do this.
C
 		charly1211 3/20/2010

Hi Athanasios,
I would be glad if you could post this template or mail me that to charly1211@gmx.de.
Thanks a lot!
Charly
C
 		clark40 3/25/2010

A cross tabulation (often abbreviated as cross tab) displays the joint distribution of two or more variables. They are usually presented as a contingency .
C
 		clark40 3/25/2010

A cross tabulation (often abbreviated as cross tab) displays the joint distribution of two or more variables. They are usually presented as a contingency .
woodey2002 3/26/2010

Hi Athanasios,
I would be happy if you could post this template or mail me that to woodey2002@hotmail.com
Thanks and kind regards.
James
B
 		bobdansei 3/26/2010

this worked perfect for me <img src='https://asprunner.com/forums/file.php?topicimage=1&fieldname=reply&id=48796&image=1&table=forumreplies' class='bbc_emoticon' alt=':)' /> nice
V
 		V500 5/15/2010



Hi,
based on Jane's post, I have created a php library file with a procedure making all the required modifications on the template for tabs to work. What I have to do is add some definitions in my add/edit/view pages for where I want each tab to start (e.g, {$tabstart} {$tab1} {$tab2} {$tabend}). Definitions in Visual Editor are version safe, and always the best way to create template modifications that are upgrade safe and still even after adding or removing fields on a given page.
After that in the event editor I include the library file and call the procedure with the required parameters, $xt the template, and an array with the tab captions.

Of course I have altered the template and style files under Program Files in order to include Dynamic Drive's css and a required presentation style.
I have used this way for a lot of projects, some of them currently upgrading to PHPR 5.2, and found it very safe. If required I can make a post with the files and a sample to show a way of how to do this.
V
 		V500 5/15/2010

Hi Athanasios,
I am new to this and I am having problems making the Tabs work correctly. PHPR seems to be changing things.

Is it possible to send me you solution to the problem as you described?

I am not very good at this but I would like to give it a try if you would be willing/able to send me some instructions.

Thank you for your time.
Vance
[email="advancedesign@btconnect.com"]Email me[/email]
A
 		aalekizoglou 5/15/2010

Vance,
I will send you the required files and instructions. Hope you can use this.
K
 		kdatlanta 5/17/2010

Hi Athanasios,
Would you please send me your solution also?

Thank you for your time.
Lamont

kdatlanta007@gmail.com
A
 		aalekizoglou 5/18/2010

Lamont,
I've already sent it to you.
V
 		vcane 5/31/2010

Hi Athanasios,
Would you please send me your class?

Thank you for your time.
Virgilio

vcaneleon@hotmail.com
W
 		webbear 6/30/2010

Hi Athanasios,
I wish to receive your class

Thanks a lot
webbear
webbear@tiscali.it
P
 		paxys 12/18/2010

Hi Athanasios,
I would be happy if you could mail me that class.
Thanks and kind regards.
Paxys
libericco@libero.it