dedecms 动态tab写法
项目要求要dedecms动态添加选项卡然后自己写了一个
现在需要些tab的栏目下创建子栏目 (如果是首页需要顶级栏目)
如图我在案例下添加了3个子栏目
然后每个子栏目里面添加需要在tab里面输出的内容
然后在栏目模板中添加代码如下
{dede:channel type='son' row='10' currentstyle="<li class='active' role='presentation' ><a href='~typelink~' ~rel~ role='tab' data-toggle='tab'>~typename~</a></li>"}
<li><a href='[field:typeurl/]' [field:rel/]>[field:typename/]</a></li>
{/dede:channel}
这段代码 是查询栏目 其中 type=‘son’ 代表的就是栏目下的子栏目
因为这些栏目会生成htm页面,所以每个teb标签都是一个页面。
具体位置就是你teb标题的位置如图
下面就是teb选项卡中内容的显示了代码如下
{dede:list pagesize='6'}
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="ind_thum">
<a href="[field:arcurl/]" target="_blank"><img src="[field:litpic/]" alt="[field:title/]" class="img-responsive"></a>
<h3 class="text-center"><a href="[field:arcurl/]" target="_blank">[field:title/]</a></h3>
</div>
</div>
{/dede:list}
完整的teb选项卡每一项动态添加内容如下图
完整的代码如下
<ul role="tablist" id="myTab">
{dede:channel type='son' row='10' currentstyle="<li class='active' role='presentation' ><a href='~typelink~' ~rel~ role='tab' data-toggle='tab'>~typename~</a></li>"}
<li><a href='[field:typeurl/]' [field:rel/]>[field:typename/]</a></li>
{/dede:channel}
</ul>
<!--tab-content start-->
<div class="tab-content">
<!--tab-pane start-->
<div role="tabpanel" class="tab-pane fade in active" id="vall">
<div class="row">
{dede:list pagesize='6'}
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="ind_thum">
<a href="[field:arcurl/]" target="_blank"><img src="[field:litpic/]" alt="[field:title/]" class="img-responsive"></a>
<h3 class="text-center"><a href="[field:arcurl/]" target="_blank">[field:title/]</a></h3>
</div>
</div>
{/dede:list}
</div>
<div class="dede_pages">
<ul class="pagelist">
{dede:pagelist listitem="index,end,pageno,pre,next" listsize="1"/}
</ul>
</div>
</div>
<!--tab-pane end-->
<!--tab-pane start-->
完整的样式:
好了 一个dedecms的动态的选项卡就做好了
dedecms 动态tab写法的更多相关文章
- 组件基础之动态tab组件
<template> <div id="demo31"> <p>-----------------组件基础之动态tab组件一---------- ...
- 【ABAP系列】SAP ABAP模块-ABAP动态指针写法的精髓部分
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP模块-ABAP动 ...
- Android 动态Tab分页效果实现
当前项目使用的是TabHost+Activity进行分页,目前要做个报表功能,需要在一个Tab页内进行Activity的切换.比方说我有4个Tab页分别为Tab1,Tab2,Tab3,Tab4,现在的 ...
- Android 动态Tab分页效果
当前项目使用的是TabHost+Activity进行分页,目前要做个报表功能,需要在一个Tab页内进行Activity的切换.比方说我有4 个Tab页分别为Tab1,Tab2,Tab3,Tab4,现在 ...
- 动态tab页
1.前台代码 <%-- builed by manage.aspx.cmt [ver:2015.25.26] at 2015-06-26 15:25:42 --%> <%@ Pag ...
- JS-利用ajax获取json数据,并传入页面生成动态tab
封装好的:ajax.js function ajax(url, fnSucc,fnFaild){ //1[创建] if(window.XMLHttpRequest){ var oAjax = new ...
- Vue之动态class写法总结
对象方法 最简单的绑定 :class="{ 'active': isActive }" 判断是否绑定一个active :class="{'active':isActive ...
- js的动态tab导航
html部分 <div class="container"> <h3 class="page-header">tab切换</h3& ...
- dedecms搜索框写法
<div class="bg_search"> <form id="forms" name="formsearch" ac ...
随机推荐
- 二、AspNet Core添加EF的基本方法(简略版):
_/\__ ---==/ \\ |. \|\ | ) \\\ \_/ | //|\\ / \\\/\\ 1.在Project.json的dependencies选项中添加以下引用: "Mic ...
- 【Spark2.0源码学习】-4.Master启动
Master作为Endpoint的具体实例,下面我们介绍一下Master启动以及OnStart指令后的相关工作 一.脚本概览 下面是一个举例: /opt/jdk1..0_79/ ...
- 基于Activiti的流程应用开发平台JSAAS-WF V5.3
第1章 产品概述及体系架构 1.1.概述 红迅JSAAS-WF工作流平台V5是广州红迅软件有限公司面向合作伙伴以及有IT运维团队中大型企业提供新一代的流程管理产品,它基于流行的JAVA开源技术上构建, ...
- ThinkPHP框架之空控制器
HOME代表的是模块 前台可以用Home 后台用Admin Model View Controller 统称为MVC Model 是数据模型 主要是和数据库打交道的 View代表显 ...
- Git下载、更新、提交使用总结
Git使用总结 1.下载代码到本地 1.1指定存储文件路径 1.运行git-bash.exe 2.指定盘符:cd f:work 1.2下载代码 命令:$ git clone <版本库的网址> ...
- javascript 函数和作用域(闭包、作用域)(七)
一.闭包 JavaScript中允许嵌套函数,允许函数用作数据(可以把函数赋值给变量,存储在对象属性中,存储在数组元素中),并且使用词法作用域,这些因素相互交互,创造了惊人的,强大的闭包效果.[upd ...
- 手机共享成wifi热点电脑无法上网的问题
第二次遇到这样的问题,每次百度都不能解决我遇到的问题.上一次已经自己鼓捣着解决了,后来忘记怎么弄好的.第二次遇到这个问题,又是浪费了许多时间后,偶然弄好了,突然想起来上次就是这样弄好的.所以就针对我自 ...
- Hive-1.2.1与HBase-1.1.2的整合
这里的整合是指,将HBase作为存储数据的库,由Hive作为连接桥梁 修改 Hive hive-site.xml 增加<property> <name>hbase.zookee ...
- hadoop进不去web界面
查看配置文件是否正确:hdfs-site.xml文件 <property> <name>dfs.http.address</name> <value>h ...
- Maven学习-Profile详解
Profile能让你为一个特殊的环境自定义一个特殊的构建:profile使得不同环境间构建的可移植性成为可能.Maven中的profile是一组可选的配置,可以用来设置或者覆盖配置默认值.有了prof ...