zoukankan      html  css  js  c++  java
  • amazeUI——tab禁止左右滑动(触控操作)

    参考:http://amazeui.clouddeep.cn/javascript/tabs/

    效果:

    html:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
            <title>amazeUI tab</title>
            <link rel="stylesheet" href="css/amazeui.css">
            <script type="text/javascript" src="js/jquery.min.js"></script>
            <script type="text/javascript" src="js/amazeui.min.js"></script>
    
        </head>
        <body>
            <div class="am-tabs" data-am-tabs="{noSwipe: 1}" id="doc-my-tabs">  //关键 noSwiper:1
                <ul class="am-tabs-nav am-nav am-nav-tabs">
                    <li class="am-active"><a href="">tab1</a></li>
                    <li><a href="">tab2</a></li>
                    <li><a href="">tab3</a></li>
                </ul>
    
                <div class="am-tabs-bd">
                    <div class="am-tab-panel am-active">
                        <p>选项卡1内容</p>
                    </div>
                    <div class="am-tab-panel">
                        <p>选项卡2内容</p>
                        <p>选项卡2内容</p>
                    </div>
                    <div class="am-tab-panel">
                        <p>选项卡3内容</p>
                        <p>选项卡3内容</p>
                        <p>选项卡3内容</p>
                    </div>
                </div>
            </div>
            <script>
                $(function() {
                    $('#doc-my-tabs').tabs(); //关键
                })
            </script>
        </body>
    </html>
  • 相关阅读:
    单例 与 static
    ActiveMQ 核心概念
    Jconsole
    死锁
    document write & close
    java.nio.Buffer
    Java 线程控制(输出奇偶数)
    exist & in
    命运
    Super Jumping! Jumping! Jumping!
  • 原文地址:https://www.cnblogs.com/linjiangxian/p/11613399.html
Copyright © 2011-2022 走看看