{if(!defined("RUN_MODE"))} {!die()} {/if} {if($extView = $control->getExtViewFile(TPL_ROOT . 'blog/header.html.php'))} {include $extView} {@return helper::cd()}{/if} {$navs = $control->loadModel('nav')->getNavs('desktop_blog')} {if(!empty($config->oauth->sina))} {else} {/if} {if(isset($mobileURL))} {/if} {if(isset($sourceURL))} {/if} {if(!isset($title))} {$title = ''}{/if} {if(!empty($title))} {$title .= $lang->minus}{/if} {if(!isset($keywords))} {$keywords = $config->site->keywords}{/if} {if(!isset($desc))} {$desc = $config->site->desc}{/if} {!html::title($title . $config->site->name)} {!html::meta('keywords', strip_tags($keywords))} {!html::meta('description', strip_tags($desc))} {if(isset($control->config->site->meta))} {!echo $control->config->site->meta} {/if} {!css::import($webRoot . 'zui/css/min.css')} {!css::import($themeRoot . 'common/style.css')} {$customCssFile = $control->loadModel('ui')->getCustomCssFile(CHANZHI_TEMPLATE, CHANZHI_THEME)} {if(file_exists($customCssFile))} {!css::import($control->ui->getThemeCssUrl(CHANZHI_TEMPLATE, CHANZHI_THEME), '', $version = false)} {/if} {!js::exportConfigVars()} {!js::set('theme', array('template' => CHANZHI_TEMPLATE, 'theme' => CHANZHI_THEME, 'device' => $control->app->clientDevice))} {if($config->debug)} {!js::import($jsRoot . 'jquery/min.js')} {!js::import($jsRoot . 'zui/min.js')} {!js::import($jsRoot . 'chanzhi.js')} {!js::import($jsRoot . 'my.js')} {else} {if($control->config->cdn->open == 'open')} {!js::import($control->config->cdn->host . $control->config->version . '/js/chanzhi.all.js', $version = false)} {else} {!js::import($jsRoot . 'chanzhi.all.js')} {/if} {/if} {if(isset($pageCSS))} {!css::internal($pageCSS)} {/if} {!echo isset($control->config->site->favicon) ? html::icon(json_decode($control->config->site->favicon)->webPath) : html::icon($webRoot . 'favicon.ico')} {!html::rss($control->createLink('rss', 'index', '', '', 'xml'), $config->site->name)} {!js::set('lang', $lang->js)} {if(!empty($config->oauth->sina))} {$sina = json_decode($config->oauth->sina)}{/if} {if(!empty($config->oauth->qq))} {$qq = json_decode($config->oauth->qq)}{/if} {if(!empty($sina->verification))} {$sina->verification} {/if} {if(!empty($qq->verification))} {$qq->verification}{/if} {if(empty($sina->verification) && !empty($sina->widget))} {!js::import('https://tjs.sjs.sinajs.cn/open/api/js/wb.js')}{/if} {$baseCustom = isset($control->config->template->custom) ? json_decode($control->config->template->custom, true) : array()} {if(!empty($baseCustom[CHANZHI_TEMPLATE][CHANZHI_THEME]['js']))} {!js::execute($baseCustom[CHANZHI_TEMPLATE][CHANZHI_THEME]['js'])} {/if}

tab

2016-04-11 17:40:00
徐小辉
轉貼 VIEWS_PLACEHOLDER

对于自定义内容的tab选项卡区块,大家可以直接到蝉知 官网的特效板块中搜索相关的特效导入,本文是向大家介绍如何将蝉知系统里的内容板块组成tab选项卡,这里我没有用php+MYSQL调用数据,而是使用JS控制系统提供的内容区块,以达到我们想要的效果,比如下图所示的效果,是将最新文章、最新帖子和自定义区块组成为tab选项卡。

问题:上图所示的TAB选项卡如何实现的呢?

思路:我们可以用4个区块来实现这个效果,顶部选项卡按钮,蝉知动态,热门问题和交流互动。起初区块的布局如下:

我们可以用CSS和JS配合按钮的点击,来控制下面三个区块的显隐状态,以达到我们想要的效果。即当点击某个TAB按钮时,显示其对应的区块而隐藏另外两个区块。

操作:

把4个区块编辑好,系统区块这里我就不阐述了,给大家列一下顶部自定义的按钮区块的代码:

HTML代码:


<div class="btn-group">
  <button type="button" class="btn btn-primary" id="dongtai">蝉知动态</button>
  <button type="button" class="btn btn-success" id="wenti">热门问题</button></button>
  <button type="button" class="btn btn-info" id="hudong">交流互动</button>
</div>
CSS代码:



#block283,#block242{
    display:none;
    border-top:0px;
}
#block1{
    border-top:0px;
}
#blockID .btn-group button{
    width:126px;
}
上面的block1、283、242是下面三个区块的ID,这个大家根据自己创建的区块具体ID而定。


JS代码:


$(function(){
    $("#dongtai").click(function(){
        $("#block283,#block242").css("display","none");
        $("#block1").css("display","block");
    });
    $("#wenti").click(function(){
        $("#block283").css("display","block");
        $("#block1,#block242").css("display","none");
    });
    $("#hudong").click(function(){
        $("#block283,#block1").css("display","none");
        $("#block242").css("display","block");
    });
});
对于没有代码基础的童鞋,要注意区块ID的调整和按钮ID选择器的对应。
博客分类