【fastadmin 开发实战】自定义tab 选项卡

最新推荐文章于 2025-06-19 11:38:23 发布

hj1043

最新推荐文章于 2025-06-19 11:38:23 发布

阅读量1.1k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： fastadmin 文章标签：前端

本文链接：https://blog.youkuaiyun.com/hj1043/article/details/139995665

fastadmin 框架中的 tab 选项卡，除了官方定义的status 状态类型，如果想自定义选项卡，可以参考以下办法：

选项卡代码

<ul class="nav nav-tabs" data-field="fork">
            <li class="{:$Think.get.status === null ? 'active' : ''}"><a href="#t-all" data-value="" data-toggle="tab">{:__('All')}</a></li>
            {foreach name="statusList" item="vo"}
            {php}if(in_array($key, ['nonpayment', 'paid']) && $project['price']==0) continue;{/php}
            <li class="{:$Think.get.status === (string)$key ? 'active' : ''}"><a href="#t-{$key}" data-value="{$key}" data-toggle="tab">{$vo}</a></li>
            {/foreach}
        </ul>

js 代码，主要是监听，table 搜索参数赋值

  
            // 绑定 TAB 为事件
            $('.panel-heading a[data-toggle="tab"]').on('shown.bs.tab',function(e){
                var field = $(this).closest("ul").data("field");
                var value = $(this).data("value");