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.
4
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.
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.
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.