Question

我有一个网页，允许用户插入带有标签的表单输入对象。当他们添加新对象时，我会自动将其添加到2列表中，左列是标签，右边是表单控件。

我想让用户更好地控制页面的布局方式。我想知道是否有任何示例，模式或建议可以帮助我实现这一目标。我发现的唯一例子是Liferay，您可以在其中选择不同的布局模板，然后根据布局和顺序在该页面上定位portlet。

更新：

我想坚持他们设计的布局。

我已经将表单本身保留了下来。 HTML没有持久化，我在请求表单时动态生成它。我想要一种方法来保持表单的布局。

我不是在寻找太详细的东西。主要是思想和建议。

谢谢

Answer 1

以下是我过去使用.sortable()方法做过类似事情的方法。使用jQuery跟踪已重新排列的数据。 Ajax订单到数据库字段，然后可以在以后调用。数据库字段最终会出现类似“42,12,6,4”

的内容

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();
        }
    });

和html就像

<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

最简单，最安全的方法是通过jQuery或其他JavaScript库。查看jQuery UI和YUI。这两个功能小部件都允许重新定位，调整大小和其他自定义。但是，如果要将用户的更改设置为 persistent ，它会变得更加复杂。

Answer 3

你有登录系统吗？如果是这样，我猜你需要一个单独的表，用于在数据库中存储用户首选项。

否则，您可以根据需要使用Cookie或SESSION变量。

一种干净的方法是拥有单独的CSS文件，只需将css文件ID /名称存储在会话变量（或db表）中。让您发出的主HTML保持不变，只需更改css rel链接（不要使用内联css）。

有一种方法可以让CSS使用参数（我忘记了技术术语），但显然IE已经停止从IE9开始支持，因此它可能不是非常跨浏览器兼容。

Answer 4

JP19有一个非常好的一般建议。

你的后端有什么用途？如果您使用的是ASP.NET，因为它们具有专门为此目的而专门设计的个性化和主题。检查Personalization以及ASP.NET WebParts以了解如何实现它可能是值得的。

Answer 5

看看DropThings。它可能有你想要的东西。

Answer 6

我认为布局主要是关于一些css属性，如宽度，高度，位置，浮动，边距，填充等。您可以让用户编辑这些属性，并将它们与输入对象一起存储在持久层中。

允许用户更改网页布局

6 个答案: