所以我有这个界面供用户构建自己的显示。它允许他们添加 jQuery Tabs 1st 和 2nd 级别。在第二层,他们可以添加文本框和图像框等模块。
这是界面截图
所以从截图中你可以看到第一级标签可以有任意数量的标签,第二级也是如此。只有第 2 级有模块。
我不知道如何在 PHP 中处理这个表单。如何成功保存并在需要时将其吐出?你们会怎么处理这件事?
谢谢...
界面不错。我该做什么:
数据库结构:
将标签分层存储在:{tabid}|{parentid}|{tabname} 将文本和图像存储在:{id}|{tabid}|{content}|{type}
html结构:
构建一个表单并将您的选项卡结构放入其中。也许看看:http: //twitter.github.io/bootstrap/javascript.html#tabs
例子:
<form method="post" action="savetabbedinterface">
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#profile">Profile</a></li>
<li><a href="#messages">Messages</a></li>
<li><a href="#settings">Settings</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">...</div>
<div class="tab-pane" id="profile">...</div>
<div class="tab-pane" id="messages">...</div>
<div class="tab-pane" id="settings">...</div>
</div>
</form>
当您的表单将被提交时,所有选项卡内容将被保存一次。
使用带有索引的表单输入(数组的数组)请参阅:如何将数据发布为数组的索引数组(不指定索引)
行动:
当用户添加选项卡时: - 向表单添加隐藏字段:name="tabs[0][{numberoftabs+1}]" value="{tabname}"
当用户添加子选项卡时: - 向表单添加隐藏字段: name="tabs[parenttabid][{numberofsubtabsforthisparent+1}]" value="{tabname}" - 创建内容
当用户添加图片框时:在内容中添加一个 name="images[{tabid}][]"
当用户添加文本框时:在内容中添加一个 name="texts[{tabid}][]">
使用 javascript 或 jQuery 动态添加此元素。
当表单提交后,您可以迭代 $_POST['tabs'] 等来存储界面的信息。
除了 {numberoftabs+1} 您还可以使用空数组 [] 在这种情况下,您必须在提交后保存选项卡的顺序。
只有数字的表单字段索引可能会导致问题。在数字前添加一个字符以防止这种情况发生:name="tabs[p0][t{numberoftabs+1}]"
祝你好运
更新:我生成了一个用于添加和保存选项卡的原型,请参阅:http ://bootply.com/61771 。该原型使用 Twitter Bootstrap 和 jQuery。
添加选项卡和子选项卡将生成如下形式:
<input type="hidden" value="Tab 1" name="tabs[p0][t1]">
<input type="hidden" value="Tab 2" name="tabs[p0][t2]">
<input type="hidden" value="Tab 3" name="tabs[p0][t3]">
<input type="hidden" value="SubTab 1" name="tabs[p2][t1]">
<input type="hidden" value="SubTab 2" name="tabs[p2][t2]">
<input type="hidden" value="SubTab 3" name="tabs[p2][t3]">
<input type="hidden" value="SubTab 1" name="tabs[p1][t1]">
<input id="savebutton" class="btn" type="submit" value="save interface">
提交表单后,您可以使用 php 保存输入,print_r[$_POST]
:
Array ( [tabs] => Array ( [p0] => Array ( [t1] => Tab 1 [t2] => Tab 2 [t3] => Tab 3 ) [p2] => Array ( [t1] => SubTab 1 [t2] => SubTab 2 [t3] => SubTab 3 ) [p1] => Array ( [t1] => SubTab 1 ) ) )