Allow user to change web page layout

Question

I have a webpage that allows users to insert form input objects with a label. When they add a new object, I automatically add it to a table with two columns, the left column is the label and the right is the form control.

I want to give the user more control over how the page is laid out. I was wondering if there are any examples, templates or suggestions that will help me with this. The only example I found is in Liferay, where you can select various layout templates and then put the portlets on this page according to the layouts and the order.

Update:

I would like to keep the layout they create.

I have already preserved the form. HTML is not saved, I generate it on the fly when the form is requested. I would also like to keep the layout of the form.

I'm not looking for anything too detailed. Mostly just thoughts and suggestions.

thanks

Answer 1

This is how I did something like this in the past using the .sortable() method. Use jQuery to track data that has been regrouped. Ajax - the order in the database field, which can then be called later. There will be something like "42,12,6,4" in the database field

 function saveSortChanges () { var qString = $("#sortable").sortable("serialize"); // this should produce something like 'artOrder[]=5&artOrder[]=27&artOrder[]=3 $.ajax({ type: 'get', url: 'ajax.php', data: qString, success: function(txt) { } }); } $("#sortable").sortable({ cursor: 'move', update: function(event,ui) { saveSortChanges(); } }); 

and html is like

 <div id="sortable"> <div class="editindex" id="artOrder_22"><!--stuff--></div> <div class="editindex" id="artOrder_12"><!--stuff--></div> <div class="editindex" id="artOrder_4"><!--stuff--></div> </div> 

Answer 2

The easiest and safest way to do this would be through jQuery or another JavaScript library. Check out jQuery UI and YUI . Both have widgets that allow you to resize, resize and other settings. However, it becomes more complex if you want custom changes to be permanent.

Answer 3

Do you have a login system? If so, I think you need to have a separate table in which you save user settings in the database.

In addition, you can use cookies or SESSION variables to suit your needs.

The clean way is to have separate CSS files and just store the css file id / name in a session variable (or db table). Let the main HTML that you emit remain the same, just change the css rel link (don't use the built-in css).

There is a way to have CSS with parameters (I forgot the technical term), but it seems that IE is no longer supporting IE9, so it may not be very compatible with the browser.

Answer 4

JP19 had very good general advice.

What do you use for your back-end? If you use ASP.NET because they have personalization and themes specially designed specifically for this purpose. It might be worth considering personalization as well as ASP.NET WebParts to get an idea of ​​how to implement this.

Answer 5

Take a look at DropThings . It may have what you are looking for.

Answer 6

I think the layout is mainly related to some css attributes, such as width, height, position, float, margin, padding, etc., you can let the user edit these attributes and save them using the input object in your persistent layer .