1、头部加
<script type="text/javascript" src="{$=$global.assetspath}/js/jtbc.frontend.js"></script>

2、尾部加
<script type="text/javascript">$(document).ready(function() { jtbc.frontend.ready(); });</script>

3、list页面加
<script>
    $(function () {
        $('.hold_events').on('click', function () {
            $('.contact_box').show(200);
        })
        $('.close').on('click', function () {
            $('.contact_box').hide(200);
        })
        $('.sure_btn').on('click', function () {
            $('.contact_box').hide(200);
        })
    })
</script>

4、list模板
<!-- 全部 最新 ... -->
<div class="news_tabs_box contain_fluid">
    <div class="selector_2">
      <ul mode="pitchon" pitchon="li[name='li{$-fid}']">
        {$=transfer('genre=universal/category;type=@order;baseurl=./;tpl=dd-list-1', array('fid' => 0, 'genre' => 'product'))}
    </ul>
        </div>
    <div class="cupboard">
  <div class="selector">
      <ul mode="pitchon" pitchon="li[name='li{$-cid}']">
        {$=transfer('genre=universal/category;type=@order;baseurl=./;tpl=li-list-1', array('fid' =>'{$-fid}', 'genre' => 'product'))}
      </ul>
    </div>
      </div>
</div>
<!-- 全部 最新 ... END  -->

5、css样式
.news_tabs_box {
    text-align: center;
    margin-bottom: 45px;
    padding: 20px 0px; 
}
.news_tabs_box > .content_box {
    position: relative;
    margin-top:18px;
}
.cupboard {
  width: 1200px; margin: auto; padding: 20px 0px; position: relative; 
}
.contain_fluid {
  width: 100%;
  min-width: 1200px; }
.selector {
  width: 100%; padding-bottom: 20px; text-align: center
}
.selector ul {
  display: inline-block; font-size: 0px
}
.selector ul li {
  display: inline-block; background: #fff; border: #ddd 1px solid; border-right: 0px
}
.selector ul li:first-child {
  border-top-left-radius: 10px; border-bottom-left-radius: 10px
}
.selector ul li:last-child {
  border-right: #ddd 1px solid; border-top-right-radius: 10px; border-bottom-right-radius: 10px
}
.selector ul li a {
  display: inline-block; font-size: 1.0rem; padding: 6px 15px
}
.selector ul li.on {
  background: #333; border-color: #333;
}
.selector ul li.on a {
  color: #fff
}
.selector_2 ul {
  display: inline-block; font-size: 0px
}
.selector_2 ul li {
  display: inline-block;
    width: 96px;
    height: 34px;
    border: 1px solid #333;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-right: 20px;
}
.selector_2 ul li a {
  display: inline-block; font-size: 1.0rem;color: #333;line-height: 34px;
}
.selector_2 ul li.on {
  background: #333;font-weight: 600;
}
.selector_2 ul li.on a {
  color: #ffffff;
}
@media screen and (max-width: 768px) {   
  .cupboard {
  width: 100%; margin: auto; padding: 10px 0px; position: relative; 
}
  .contain_fluid {
  width: 100%;
  min-width: 100%; }
  .selector_2 ul li {
  display: inline-block;
    width: 96px;
    height: 34px;
    border: 1px solid #333;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-right: 10px;
    margin-bottom: 10px;
}
}

6、/product/common/incfiles/index.inc.php文件moduleList节点
$fid = universal\category::getRootCategoryID(self::getParam('genre'), self::getParam('lang'), $category);
    $cid = universal\category::getCategoryChildID(self::getParam('genre'), self::getParam('lang'), $category);
    if($cid == '') $cid = $category;
    $variable['-category'] = $category;
    $variable['-fid'] = $fid;
    $variable['-cid'] = $cid;

导航条

<li class="navPages-item">
                <a class="navPages-action has-subMenu" href="{$=getActualRoute('product/')}" data-collapsible="navPages-790" aria-controls="navPages-790" aria-expanded="false">
    {$=take('.public.menu-3',  'lng')} <i class="icon navPages-action-moreIcon" aria-hidden="true"><svg><use xlink:href="#icon-chevron-down"></use></svg></i>
</a>
<div class="navPage-subMenu" id="navPages-790" aria-hidden="true" tabindex="-1">
        <ul class="navPage-subMenu-list">
        <li class="navPage-subMenu-item">
            <a class="navPage-subMenu-action navPages-action" href="{$=getActualRoute('product/')}">{$=take('.public.all',  'lng')} {$=take('.public.menu-3',  'lng')}</a>
        </li>
            {$=transfer('genre=universal/category;type=@order;baseurl=./;tpl=Menu-list', array('fid' => 0, 'genre' => 'product'))}
    </ul>
</div>
            </li>

            {@}
            <li class="navPage-subMenu-item">
                    <a class="navPage-subMenu-action navPages-action has-subMenu" href="/{$genre}/{$=htmlEncode($createURL('list', '{$id}', null,  '{$-genre}'))}" data-collapsible="navPages-828" data-collapsible-disabled-breakpoint="medium" data-collapsible-disabled-state="open" data-collapsible-enabled-state="closed" aria-expanded="false" aria-controls="navPages-828">
                        {$topic} <i class="icon navPages-action-moreIcon" aria-hidden="true"><svg><use xlink:href="#icon-chevron-down"></use></svg></i>
                    </a>
                    
                    {$=transfer('genre=universal/category;type=@order;baseurl=./;tpl=Menu-list-2', array('fid' => {$id}, 'genre' => 'product'))}
            </li>{@}

<ul class="navPage-childList is-open" id="navPages-1437" aria-hidden="true">
                        {@}
                        <li class="navPage-childList-item">
                            <a class="navPage-childList-action navPages-action" href="/{$genre}/{$=htmlEncode($createURL('list', '{$id}', null,  '{$-genre}'))}">{$topic}</a>
                        </li>{@}
                    </ul>

            {@}
            <li class="navPage-subMenu-item">
                    <a class="navPage-subMenu-action navPages-action has-subMenu is-open" href="/{$-genre}/{$=htmlEncode($createURL('detail', '{$id}', null,  '{$-genre}'))}" data-collapsible="navPages-1437" data-collapsible-disabled-breakpoint="medium" data-collapsible-disabled-state="open" data-collapsible-enabled-state="closed" aria-expanded="false" aria-controls="navPages-1437">
                        {$topic} <i class="icon navPages-action-moreIcon" aria-hidden="true"><svg><use xlink:href="#icon-chevron-down"></use></svg></i>
                    </a>
            </li>{@}