登录 注册

登录

  1. 论坛
  3. Joomla! CMS 相关讨论
  5. Joomla! 第三方扩展
  7. content builder怎么写表单的布局代码呢?

问题 content builder怎么写表单的布局代码呢?

更多
2017年05月13日 11:42 #1 作者： 武松
武松 创建了话题： content builder怎么写表单的布局代码呢? 
<table style="height: 246px; width: 705px;">
	<tbody>
		<tr>
			<td>
				<div class="control-group form-inline">
					<div class="control-label">{ItemNumber:label}</div>
					<div class="controls">{ItemNumber:item}</div>
				</div>
				<div class="control-group form-inline">
					<div class="control-label">{projectname:label}</div>
					<div class="controls">{projectname:item}</div>
				</div>
				<div class="control-group form-inline">
					<div class="control-label">{Projectmanager:label}</div>
					<div class="controls">{Projectmanager:item}</div>
				</div>
				<div class="control-group form-inline">
					<div class="control-label">{Itemclassification:label}</div>
					<div class="controls">{Itemclassification:item}</div>
				</div>
				<div class="control-group form-inline">
					<div class="control-label">{projectsource:label}</div>
					<div class="controls">{projectsource:item}</div>
				</div>
			</td>
			<td>
				<div class="control-group form-inline">
					<div class="control-label">{Projectlevel:label}</div>
					<div class="controls">{Projectlevel:item}</div>
				</div>
				<div class="control-group form-inline">
					<div class="control-label">{Projectbase:label}</div>
					<div class="controls">{Projectbase:item}</div>
					<div>&nbsp;</div>
				</div>
			</td>
		</tr>
	</tbody>
</table>

请 登录 或者   注册一个会员帐号 来参与讨论

更多
2017年05月13日 11:42 #2 作者： 武松
武松 回复了话题： content builder怎么写表单的布局代码呢?
这个代码前台显示不理想，底下有空格，我删了保存，还是会出来，是什么问题？这个布局的目的是显示双栏。

请 登录 或者   注册一个会员帐号 来参与讨论

更多
2017年05月13日 23:25 #3 作者： Joomla之门
Joomla之门 回复了话题： content builder怎么写表单的布局代码呢?
请提供一下网站前后台的相关账号、网址，以及具体问题的截图（比如你说的“底下有空格”到底指什么？）。由于我对 content builder 这个组件很陌生，所以需要你尽可能提供详细的资料，以便我准确理解你的问题。
付费下载 Joomla 3 扩展汉化版： 我要付费支持 Joomla 之门！

请 登录 或者   注册一个会员帐号 来参与讨论

更多
2017年05月14日 01:02 #4 作者： 武松
武松 回复了话题： content builder怎么写表单的布局代码呢?
就是我贴的代码地下有这个“&nbsp”空格，我删掉在编辑器里保存就会又生成。

请 登录 或者   注册一个会员帐号 来参与讨论

更多
2017年05月14日 08:57 #5 作者： Joomla之门
Joomla之门 回复了话题： content builder怎么写表单的布局代码呢?
你在第一个帖子里面提供的代码，末尾就有一行：
<div>&nbsp;</div>

这个代码就表示一个空格。你把这一行删除试试。
付费下载 Joomla 3 扩展汉化版： 我要付费支持 Joomla 之门！

请 登录 或者   注册一个会员帐号 来参与讨论

更多
2017年05月14日 09:34 #6 作者： 武松
武松 回复了话题： content builder怎么写表单的布局代码呢?
删掉保存就又出现了，这段代码有什么问题吗？

请 登录 或者   注册一个会员帐号 来参与讨论

更多
2017年05月14日 09:49 #7 作者： 武松
武松 回复了话题： content builder怎么写表单的布局代码呢?
本帖含有机密信息

本帖含有机密信息

这个前台单栏，想布局上双栏，怎么写代码呢？
文件附件:

文件附件:

请 登录 或者   注册一个会员帐号 来参与讨论

更多
2017年05月15日 22:04 #8 作者： Joomla之门
Joomla之门 回复了话题： content builder怎么写表单的布局代码呢?
刚才根据你提供的管理员账号，我进入了你网站后台，进入了那个 view 的编辑界面，看到编辑器窗口里面输入的是以大括号（花括号）表示的替换标记。如果将编辑器切换到源代码模式，就能看到 DIV 容器包含着这些替换标记。

看到这里，我有个疑问：

这些替换标记是你自己输入的，还是系统自动生成的？
如果是你自己输入的，你是在“源代码模式”直接输入 DIV 容器那种格式，还是在“WYSIWYG”模式输入花括号这样的格式？
你想要“双栏”是怎么个双栏法？能否说明白点？


另外，你所说的那个“删不掉的空格”的问题，解决了没有？我登录进去好像找不到那个空格了，看到的代码与你在第一个帖子里面提供的代码都不同。不知道是我进错了页面，还是你已修改了代码，还是你已经解决了问题？

顺便提醒一下：麻烦你以后提问的时候，把问题描述清楚、清楚、清楚、清楚，重要的事情我说了4遍，不知道能否让你明白？我每次看你提的问题都非常辛苦，几乎不来来回回问几遍是弄不明白你的问题的。
付费下载 Joomla 3 扩展汉化版： 我要付费支持 Joomla 之门！

请 登录 或者   注册一个会员帐号 来参与讨论

更多
2017年05月15日 23:51 #9 作者： 武松
武松 回复了话题： content builder怎么写表单的布局代码呢?
是系统自动生成的布局，前台看表是单栏的，想变成双栏好看点，你看前台，添加记录的表格很长，感觉不太好，怎么写代码，变成双栏，是这个问题。前面的代码不管了

请 登录 或者   注册一个会员帐号 来参与讨论

更多
2017年05月16日 09:05 #10 作者： Joomla之门
Joomla之门 回复了话题： content builder怎么写表单的布局代码呢?
既然是系统自动生成的，那就直接针对系统生成的结果来处理。直接看源代码：
<div class="control-group form-inline">
<div class="control-label">{copyright_owner:label}</div>
<div class="controls">{copyright_owner:item}</div>
</div>
<div class="control-group form-inline">
<div class="control-label">{Registration_number:label}</div>
<div class="controls">{Registration_number:item}</div>
</div>
<div class="control-group form-inline">
<div class="control-label">{The_name_of_the_copyright:label}</div>
<div class="controls">{The_name_of_the_copyright:item}</div>
</div>
<div class="control-group form-inline">
<div class="control-label">{Publication_date:label}</div>
<div class="controls">{Publication_date:item}</div>
</div>
<div class="control-group form-inline">
<div class="control-label">{All_authors:label}</div>
<div class="controls">{All_authors:item}</div>
</div>
<div class="control-group form-inline">
<div class="control-label">{Type_of_copyright:label}</div>
<div class="controls">{Type_of_copyright:item}</div>
</div>
<div class="control-group form-inline">
<div class="control-label">{The_original_work:label}</div>
<div class="controls">{The_original_work:item}</div>
</div>


这段代码没有使用表格（table），而是用了 DIV。实现双栏的话，table 方式最简单， DIV 稍微复杂一些。从上述源代码看，原本的设计是“单栏”布局，因为同一级的 DIV 容器默认是“纵向排列（上下）”，而不是横向排列。所以，如果你想改成双栏，就需要手工添加一些额外的 DIV 容器对这些同级 DIV 进行分组，把上述字段变成每组两个字段为同一级，接下来两个字段为同一级，而他们的上一级则为同一级。简单示范如下：

<div class="row1">
<div class="control-group form-inline  left">
<div class="control-label">{copyright_owner:label}</div>
<div class="controls">{copyright_owner:item}</div>
</div>
<div class="control-group form-inline right">
<div class="control-label">{Registration_number:label}</div>
<div class="controls">{Registration_number:item}</div>
</div>
</div>
 
<div class="row2">
<div class="control-group form-inline left">
<div class="control-label">{The_name_of_the_copyright:label}</div>
<div class="controls">{The_name_of_the_copyright:item}</div>
</div>
<div class="control-group form-inline right">
<div class="control-label">{Publication_date:label}</div>
<div class="controls">{Publication_date:item}</div>
</div>
</div>
 
 
<div class="row3">
<div class="control-group form-inline left">
<div class="control-label">{All_authors:label}</div>
<div class="controls">{All_authors:item}</div>
</div>
<div class="control-group form-inline right">
<div class="control-label">{Type_of_copyright:label}</div>
<div class="controls">{Type_of_copyright:item}</div>
</div>
</div>
 
<div class="row4">
<div class="control-group form-inline left">
<div class="control-label">{The_original_work:label}</div>
<div class="controls">{The_original_work:item}</div>
</div>
</div>

我添加了几个 DIV 容器，对你的字段进行了分组及分级。请仔细看新增 DIV 及新增的 class，原来纵向排列的 1 3 5 7 增加了 “left” 这个类，原来的 2 4 6 增加了 “right” 这个类。

然后，通过自定义 CSS 来实现 DIV 的双栏效果（让 left 属性的字段靠左，让 right 属性的字段靠右）：

#adminform .left {
  margin-left: 10%;
  width: 40%;
}
 
#adminform .right {
  float: right;
  margin-right: 10%;
  position: relative;
  top: -71px;
  width: 40%;
}

从前台看，这7个字段就被分成了两栏（第4行只有1个字段所以仍然靠左）。我已经帮你操作了，你验收结果即可。

最后解释一下：我并非编程高手，也不是 CSS 专家。上述代码或许仍有不够高明之处，暂且抛砖引玉。如果题主对 DIV 分栏这种技术有兴趣，建议自行百度（或谷歌）进行深入学习。
付费下载 Joomla 3 扩展汉化版： 我要付费支持 Joomla 之门！

请 登录 或者   注册一个会员帐号 来参与讨论

  1. 论坛
  3. Joomla! CMS 相关讨论
  5. Joomla! 第三方扩展
  7. content builder怎么写表单的布局代码呢?