Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

The screen shot shows the magento product upload page.

The left nav allows you to switch to different options for the product. Basically each option in the left nav appears as a different page. However when you save and close, it will save all the updates made on each page.

Using Foundation4, html, css, js - what would be the best approach to replicating something similar? Say I want 3 pages and one save button option.

Using http://foundation.zurb.com/docs/components/section.html#panel2 and having the save buttons the top line form level seems a possible option.

Magento screen shot

share|improve this question
    
You could put all your form elements in one page and use tabs to seperate them nicely for the user. –  Tasos K. Nov 16 '13 at 18:06
    
Ok, so the tabs basically share the fields across them, but the save button is at the page level so will capture all the data? –  Dano007 Nov 16 '13 at 19:46
    
Of course. You need to put the save button outside of any tab show that it will be visible any time. –  Tasos K. Nov 16 '13 at 19:53
add comment

3 Answers

As mentioned by @codingstill, Tabs will do. But from the users perspective its not a good design.

It depends on the user. If a user doesn't have much experience with the web then he/she might not know that the form will be saved even if you move to different tabs. or they might click save everytime before moving between tabs.

share|improve this answer
add comment

Perhaps you should re-think your design. Instead of displaying options on a separate page, display them within a div. And if you need to display more info than the div has room for, display it in a floating hidden div that you fill, show and hide when appropriate. That way everything remains on one page.

I can think of umpteen relatives who would be confused with tabs. When purchasing something they tend to assume: 1) there is only 1 submit/save button; and 2) a running total is being displayed in the right hand column.

share|improve this answer
add comment

I just had an idea I used once in an example project for a class. It's sort of a workaround, but with proper organisation it could even be called good code.

Basically, you would set up a JavaScript object at the start of your page containing all the settings. You would then build your tabs' content in separate pages. Each page will contain both the controls and text you need in each tab and a script that sets the object's respective attributes on change.

On the main page, bind AJAX calls to each tab that load the chosen tab's content and destroy the previously loaded content.

It's not tested software, just a possible solution that came to mind. I've done something similar regarding changing variables set by one page in a script that has been AJAX loaded. Just make sure the event listener for change is bound to all inputs after every AJAX request and it should work fine.

Upon submitting (saving), make the last AJAX call sending the mentioned object via POST. jQuery offers a wonderful shortcut for it.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.