1、简单tab标签页
我们经常会遇到使用tab标签制作多页面,如下面的布局。具体效果,可参见样例系统的订单详情。
使用奇点太极框架,如何制作呢?我们需要用到模块功能。
在项目管理页面,点击左边导航“模块管理”。如下图所示。
添加1个新模块:订单详情,如下图所示。
填入代码如下。具体的实现思路:创建tab标签页的布局,点击tab标签时,通过ajax去加载页面,然后填充到div区域即可。
提示:CSDN的代码编辑器有bug,会将HTML代码中的onclick方法改名为οnclick,看得出这2个的区别吗?看不出来吧,我也看不出来,但是这2个onclick里面的第1个o就是不一样。所以下面的代码复制到编辑器后,再手动的把复制的οnclick替换为onclick。编辑器的搜索功能,是能够认得出来这2个不一样的。而且IDE工具也能识别不正确的onclick。不相信的话,你就在当前的网页上,按CTRL+F,搜索onclick试试看,看这2个onclick不一样吧。
<div class="row m-b-lg">
<div class="col-lg-12">
<div class="tabs-container">
<ul class="nav nav-tabs" role="tablist">
<!--通过tab标签的onclick方法,调用loadUrl,填充到panel-body区域-->
<li><a class="nav-link active" data-toggle="tab" href="#"
οnclick="loadUrl('panel-body', 'taijiWidget.do?widgetId=35&action=edit&dataId=${Request:dataId}');"> 基本信息</a></li>
<li><a class="nav-link" data-toggle="tab" href="#"
οnclick="loadUrl('panel-body', 'taijiWidget.do?widgetId=55&OrderId=${Request:dataId}');">成本支出</a></li>
<li><a class="nav-link" data-toggle="tab" href="#"
οnclick="loadUrl('panel-body', 'taijiWidget.do?widgetId=43&OrderId=${Request:dataId}');">收款记录</a></li>
<li><a class="nav-link" data-toggle="tab" href="#"
οnclick="loadUrl('panel-body', 'taijiWidget.do?widgetId=55&OrderId=${Request:dataId}');">开票记录</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active">
<!--此处的panel-body指定了id属性-->
<div class="panel-body" id="panel-body">
</div>
</div>
</div>
</div>
</div>
</div>
<script>
//初始化时,需要加载第一个tab内容
loadUrl("panel-body", "taijiWidget.do?widgetId=35&action=edit&dataId=${Request:dataId}");
</script>
在loadUrl的链接中,我们使用了${Request:dataId},这是一个太极框架中定义的标签。关于标签的使用,请参阅模块的标签章节。此处使用的标签,用于从订单列表中传递订单id过去。
2、tab标签页的复杂布局
如果在tab标签的内部页面中,还有上下布局(如下图所示),或者左右布局。则有2种方式实现。
第一,将复杂布局的内页,再创建为1个模块。点击tab标签时,loadUrl调用模块的链接。通过模块来加载复杂布局页面。
第二,在点击tab标签时,同时加载多个div的区域。
我们就第二种方法,做一个示例。因为第一种方法,就是创建模块,方法类似,不做累述。
模块的代码,调整有2个地方:
1、tab标签点击时,会调用2个loadUrl,分别用于填充页面中2个div区域。
2、tab-content内容区域,在panel-body区域中,加入了2个div,分别作为填充加载。
如果我们要把div的内容清空,则在调用loadUrl时,第2个参数传入空即可。如下面的样例,第1个标签页只有详情,没有列表;第2个和第3个标签页,有详情,有列表;第4个标签页,没有详情,只有列表;
<div class="row m-b-lg">
<div class="col-lg-12">
<div class="tabs-container">
<ul class="nav nav-tabs" role="tablist">
<!--此时的onclick方法,加载了2个loadUrl,分别填充到panel-body的2个div区域-->
<li><a class="nav-link active" data-toggle="tab" href="#"
οnclick="loadUrl('tab-body-form', 'taijiWidget.do?widgetId=35&action=edit&dataId=${Request:dataId}');
loadUrl('tab-body-list', '');">基本信息</a></li>
<li><a class="nav-link" data-toggle="tab" href="#"
οnclick="loadUrl('tab-body-form', 'taijiWidget.do?widgetId=56&action=view&dataId=${Request:dataId}');
loadUrl('tab-body-list', 'taijiWidget.do?widgetId=55&OrderId=${Request:dataId}');">成本支出</a></li>
<li><a class="nav-link" data-toggle="tab" href="#"
οnclick="loadUrl('tab-body-form', 'taijiWidget.do?widgetId=44&action=view&dataId=${Request:dataId}');
loadUrl('tab-body-list', 'taijiWidget.do?widgetId=43&OrderId=${Request:dataId}');">收款记录</a></li>
<li><a class="nav-link" data-toggle="tab" href="#"
οnclick="loadUrl('tab-body-form', '');
loadUrl('tab-body-list', 'taijiWidget.do?widgetId=55&OrderId=${Request:dataId}');">开票记录</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active">
<div class="panel-body">
<!--这里添加了2个div-->
<div id="tab-body-form"></div>
<div id="tab-body-list"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
//初始化时,需要加载第一个tab内容
loadUrl("tab-body-form", "taijiWidget.do?widgetId=35&action=edit&dataId=${Request:dataId}");
</script>
至此,我们通过模块的方式,可以创建复杂的tab标签页效果。进行各个区域的数据加载。