• H-ui框架制作选项卡


    本案例运用H-ui框架,写了一个选项卡案例

    1. html代码(固定这样写,用一个div包裹控制条tabBar和内容条tabCon)

    <div id="tab-index-cartegory">
        <div class="tabBar">
            <span class="selected">类型</span>
            <span>风格</span>
        </div>
        <div class="tabCon" style="display: block;">
            <div>
                <ul>
                    <li>
                        <a href="#" target="_blank">宋体</a>
                    </li>
                    <li>
                        <a href="#" target="_blank">楷体</a>
                    </li>
                    <li>
                        <a href="#" target="_blank">行书</a>
                    </li>
                    <li>
                        <a href="#" target="_blank">黑体</a>
                    </li>
                    <li>
                        <a href="#" target="_blank">隶书</a>
                    </li>
                    <li>
                        <a href="#" target="_blank">草书</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="tabCon" style="display: none;">
            <div>
                <ul>
                    <li>
                        <a href="#" target="_blank">流行</a>
                    </li>
                    <li>
                        <a href="#" target="_blank">舞曲</a>
                    </li>
                    <li>
                        <a href="#" target="_blank">嘻哈饶舌乐</a>
                    </li>
                    <li>
                        <a href="#" target="_blank">世界/国际</a>
                    </li>
                    <li>
                        <a href="#" target="_blank">雷盖/斯卡</a>
                    </li>
                    <li>
                        <a href="#" target="_blank">爵士</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    2. CSS样式(根据自己需要书写样式即可)

    <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #tab-index-cartegory{
                width: 1280px;
                margin: 0 auto;
            }
            #tab-index-cartegory .tabBar{
                height: 60px;
                line-height: 60px;
                background: #666666;
            }
            #tab-index-cartegory .tabBar span{
                display: inline-block;
                font-size: 16px;
                padding: 0 20px;
                color: #ffffff;
                height: 58px;
                line-height: 58px;
                border-top: 0;
                cursor: pointer;
            }
            #tab-index-cartegory .tabBar span.selected{
                color: #F4523B;
            }
    
            ul li{
                list-style: none;
                float: left
    
            }
            ul li a{
                text-decoration: none;
                display: block;
                width: 100px;
                height: 40px;
                line-height: 40px;
                cursor: pointer;
            }
        </style>

    3. 引入需要的js代码

    首先引入jquery

    <script src="jquery.min.js"></script>

    接下来引入H-ui.js

    <script src="H-ui.js"></script>

    如果不引入H-ui.js,可以直接将用到的方法复制出来

    jQuery.HUItab =function(tabBar,tabCon,class_name,tabEvent,i){
            var $tab_menu=$(tabBar);
            // 初始化操作
            $tab_menu.removeClass(class_name);
            $(tabBar).eq(i).addClass(class_name);
            $(tabCon).hide();
            $(tabCon).eq(i).show();
    
            $tab_menu.bind(tabEvent,function(){
                $tab_menu.removeClass(class_name);
                $(this).addClass(class_name);
                var index=$tab_menu.index(this);
                $(tabCon).hide();
                $(tabCon).eq(index).show();
            });
        }

    4. 书写js代码

    $(function () {
         $.HUItab("#tab-index-cartegory .tabBar span","#tab-index-cartegory .tabCon","selected","click","0")
    })
    // #tab-index-cartegory 父级id
    // #tab-index-cartegory .tabBar span 控制条
    // #tab-index-cartegory .tabCon 内容区
    // click 事件 点击切换,可以换成mousemove 移动鼠标切换
    // 0    默认第1个tab为当前状态(从0开始)

    注意:若使用的H-ui.js为3.1之后的版本,则应使用如下js代码:

    $(function () {
         $("#tab-index-cartegory").Huitab(0)
    })
    //Huitab()中的参数为默认选中第几个tabCon,tabBar
    //注意:3.1以后定义如下,所以如果你的类名不是这样命名的,则需要修改默认值
    //var defaults = {
        //tabBar:'.tabBar span',
        //tabCon:".tabCon",
        //className:"current",
        //tabEvent:"click",
        //index:0,
    //}
  • 相关阅读:
    Pod镜像拉取策略imagePullPolicy
    部署helm服务
    查看k8s中etcd数据
    k8s RBAC实践
    部署k8s集群监控Heapster
    编译k8s1.11 kube-apiserver源码
    阿里云跨地域访问私网
    阿里云ECS搭建harbor1.6.1仓库
    JavaScript
    前端之网络协议、浏览器
  • 原文地址:https://www.cnblogs.com/zgsxh/p/9471334.html
Copyright © 2020-2023  润新知