Typecho自定义字段设置字段过多tab优化

434 阅读 暂无评论 308 字

Typecho自定义段,设置太多了,并且过长,看起来头晕目眩的,如果设置了tab的话,那么就舒服多了。

未优化

Typecho自定义字段设置字段过多tab优化

优化后

Typecho自定义字段设置字段过多tab优化

不过多口水下面开始教程

第一步:将下面代码添加到 functions.php

//自定义字段扩展
Typecho_Plugin::factory('admin/write-post.php')->bottom = array('diyfield', 'one');
Typecho_Plugin::factory('admin/write-page.php')->bottom = array('diyfield', 'one');
class diyfield {
    public static function one()
    {
    ?>
    <style>
        .tabss{margin:10px;clear:both;display:block;height:30px;padding:0}.tabss a{outline:none!important}
    </style>
  
    <script>
        $(function(){
            var tabs = '<ul class="typecho-option-tabs tabss" style=""><li class="current" id="t-basics"><a href="javascript:;">基础设置</a></li><li class="" id="t-seo"><a href="javascript:;">SEO设置</a></li></ul>';
            $("#custom-field-expand").after(tabs);
        
            //初始化,全部隐藏
            $("#custom-field>table>tbody").find("tr").hide();
        
            //初始化显示
            $(".tabss>li.current").parent().siblings("table").find('.t-basics-find').parent().parent().parent().show();
        
        
            $(".tabss li").click(function(){
                var clasz = this.id;
                //删除同胞的current
                $(this).siblings().removeClass('current');
                //自身添加current
                $(this).addClass('current');
                //全部隐藏
                $("#custom-field>table>tbody").find("tr").hide();
                //显示自身底下的子元素
                $(".tabss>li.current").parent().siblings("table").find('.'+clasz+'-find').parent().parent().parent().show();

            });
        
        
        });
    </script>

<?php
    }
}

对Tab的ID等解释

<ul class="typecho-option-tabs tabss">
    <li class="current" id="t-basics"><a href="javascript:;">基础设置</a>
    </li>
    <li class="" id="t-seo"><a href="javascript:;">SEO设置</a>
    </li>
</ul>

这里的li标签,是一个导航标题的添加,然后第一个li建议添加class类,current,也就是默认的

后面的li呢,id是自定义的id,需要与显示内容的class一致(下文会说到)

知道这些后,我们需要在每个自定义段添加的时候,添加多一行class的定义

Typecho自定义字段设置字段过多tab优化

$articletype->input->setAttribute('class', 't-basics-find');

以上内容,在哪个位置,作为主题开发者,应该都知道,这里解释一下

t-basics-find

为什么写这个,因为我基础设置的id是: t-basics

所以说,标题的id要与内容自身的id前缀一致

标题: t-basics 内容: t-basics-find

文章评论 (0)
QQ咨询
QQ号码
979779692
微信咨询
微信二维码
在线咨询
微信咨询 QQ咨询
客服头像

截屏,微信识别二维码

微信号:itx2021

(点击微信号复制,添加好友)

微信号已复制,请打开微信添加好友!