asosking Posted April 14, 2013 Share Posted April 14, 2013 Hi, how can I do something like this: 4 tabs and in one of this always a contact form.thanks Link to comment Share on other sites More sharing options...
kongondo Posted April 14, 2013 Share Posted April 14, 2013 You mean like this? So as to do this...If yes, there's a solution right on that post. Link to comment Share on other sites More sharing options...
asosking Posted April 14, 2013 Author Share Posted April 14, 2013 Hi kongondo, thanks for your answer, but this isn't what I will. I give a example: 4 jquery tabs: Tab1 name +Tab1 content Tab2 name +Tab2 content And now: Tab3 contact us (as name) +and as content for this tab:contact-form I hope it is now clear enough and SORRY for my English. Thanks anyway Link to comment Share on other sites More sharing options...
diogo Posted April 14, 2013 Share Posted April 14, 2013 Still not clear. You say 4 tabs, but there are only 3 there. Can you make a quick sketch to explain? Link to comment Share on other sites More sharing options...
Macrura Posted April 15, 2013 Share Posted April 15, 2013 this should be not a problem.. don't reinvent the wheel? just make your tabs (css or jquery based) and then embed your form in the last tab maybe you need to buy some tabs on codecanyon? http://codecanyon.net/item/tabs-accordion/2906434?sso?WT.ac=search_item&WT.seg_1=search_item&WT.z_author=Lamovo http://codecanyon.net/item/zozo-tabs/3327836?sso?WT.ac=search_item&WT.seg_1=search_item&WT.z_author=ZozoUI Link to comment Share on other sites More sharing options...
asosking Posted April 15, 2013 Author Share Posted April 15, 2013 @diogo Sorry my mistake, 3 tabs and the last have this contact form.thanks Link to comment Share on other sites More sharing options...
Luis Posted April 15, 2013 Share Posted April 15, 2013 Mh Joshs html kickstart,Twitter bootstrap,zurbs Fundation, gumby... pick one of those. They all provide some tab thingy Link to comment Share on other sites More sharing options...
asosking Posted April 16, 2013 Author Share Posted April 16, 2013 hi Luis, thanks, but my problem is:how can I make a pw template like this,should I make this with repeater fields, I don't understand how, but I will learn this. Link to comment Share on other sites More sharing options...
Macrura Posted April 16, 2013 Share Posted April 16, 2013 you can do the tabs with fields, repeaters or pages; depends on how flexible you need and the specific application. I've done tabs with all 3 scenarios; here are examples – note you will have to use the structure and class/ID names needed by your scenario (bootstrap etc..) 1.) Tabs using 2 fields on a page: <div class="tabs tab-container"> <ul class="etabs"> <li class="tab"><a href="#tab-1">Japanese</a></li> <li class="tab"><a href="#tab-2">English</a></li> </ul> <div class="panel-container"> <div id="tab-1"> <?php echo $page->bio_jp; ?> </div> <div id="tab-2"> <?php echo $page->bio_en; ?> </div> </div><!-- end panel container --> </div><!-- end tab-container --> Example 2 - tabs using repeaters: <?php //check to see if there are tabs if(count($page->tabs)) { ?> <div class="clear"></div> <div class="tabs tab-container"> <ul class="etabs"> <li class="tab"><a href="#tab-0">Additional Album Information</a></li> <?php $counter = 0; foreach($page->tabs as $tab) { $counter++; ?> <li class="tab"><a href="#tab-<?php echo $counter ?>"><?php echo $tab->tab_title ?></a></li> <?php } ?> </ul> <div class="panel-container"> <div id="tab-0"> <p>Please use the tabs to select further info.</p> </div> <?php $counter = 0; foreach($page->tabs as $tab) { $counter++; ?> <div id="tab-<?php echo $counter ?>"> <?php echo $tab->tab_content ?> </div><?php } ?> </div> <!-- end panel container --> </div><!-- end tab container --><?php } ?> Example 3 using child pages (bootstrap) <div class="content-tabs"> <!-- wrapper required --> <?php $tabs = $page->children; ?> <ul class="tabs"> <?php foreach ($tabs as $tabtitle) { ?> <li class="tab"> <a href="#<?php echo $tabtitle->name; ?>"><?php echo $tabtitle->title ?></a> </li><?php } ?> </ul> <div class="panels"> <?php foreach ($tabs as $tabcontent) { ?> <div class="pane" id="<?php echo $tabcontent->name; ?>"> <?php echo $tabcontent->body . "\n"; ?> </div> <!--close #<?php echo $tabcontent->name; ?> --><?php } ?> </div> <!--close panels--> </div> <!-- /.content-tabs--> 3 Link to comment Share on other sites More sharing options...
MatthewSchenker Posted April 16, 2013 Share Posted April 16, 2013 Greetings, It's also easy to create tabs with a simple JQuery snippet. I put together a Fiddle, which I use on a lot of my sites: http://jsfiddle.net/matthewschenker/avP9W/ Just insert your own ProcessWire references, similar to what you see in the basic structure below: <ul id="simple-tabs"> <li><a id="tab1">Form 1</a></li> <li><a id="tab2">Form 2</a></li> <li><a id="tab3">Form 3</a></li> </ul> <div class="simple-tabs-container" id="tab1C"> <h2><?php $page->form1_name; ?></h2> [YOUR FORM1 ELEMENTS HERE] </div> <div class="simple-tabs-container" id="tab2C"> <h2><?php $page->form2_name; ?></h2> [YOUR FORM2 ELEMENTS HERE] </div> <div class="simple-tabs-container" id="tab3C"> <h2><?php $page->form3_name; ?></h2> [YOUR FORM3 ELEMENTS HERE] </div> Just call the JQuery script directly below the code shown above, then style it with your own CSS. Thanks, Matthew 3 Link to comment Share on other sites More sharing options...
kongondo Posted April 16, 2013 Share Posted April 16, 2013 Matthew, Thanks for this. Small typo, the last li -> a also has id= 2 instead of id = 3. Good example! 1 Link to comment Share on other sites More sharing options...
MatthewSchenker Posted April 16, 2013 Share Posted April 16, 2013 Hello, Thanks kongondo! I was copying a two-tab example into a three-tab example. Fixed in the post above. Thanks again, Matthew Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now