zoukankan      html  css  js  c++  java
  • 手机设备中可滚动的水平导航

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0 ,user-scalable=no">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
        <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
    
        <style>
            #overflow {
                border: 1px solid #000;
                overflow-x: scroll;
                overflow-y: hidden;
            }
    
            #overflow .container div {
                float: left;
                padding: 6px 10px
            }
        </style>
    </head>
    <body>
    <div data-role="page" id="currentorders">
        <header data-role="header" data-position="fixed">
            <nav data-role="navbar">
                <div id="overflow">
                    <div class="container">
                        <div><a href="" class="yellow">item 00001</a>
                        </div>
                        <div><a href="" class="orange">item 2</a>
                        </div>
                        <div><a href="" class="red">item042424 3</a>
                        </div>
                        <div><a href="" class="yellow">item 4</a>
                        </div>
                        <div><a href="" class="orange">item 5</a>
                        </div>
                        <div><a href="" class="red">item245242 6</a>
                        </div>
                        <div><a href="" class="red">item 7</a>
                        </div>
                        <div><a href="" class="red">item 8</a>
                        </div>
                        <div><a href="" class="red">item 27279</a>
                        </div>
                        <div><a href="" class="red">item 10</a>
                        </div>
                        <div><a href="" class="red">item 11</a>
                        </div>
                    </div>
                </div>
            </nav>
            <div data-role="header">
                <h3>这是一个水平导航栏,并且支持水平滚动</h3>
            </div>
        </header>
        <div data-role="content">
            这是网页的主体
        </div>
    
    </div>
    </body>
    <script>
        $('#currentorders').live("pageshow", function () {
            var width = 0;
            var afterDiv = 0;
            $('#overflow .container div').each(function () {
                width += $(this).outerWidth(true);
                afterDiv = $(this).outerWidth(true);
            });
            console.log(afterDiv);
            $('#overflow .container').css('width', width / 2 + afterDiv + "px");
        })
    
        $("#overflow .container div a").live('touchstart', function () {
            var width = 0;
            var afterDiv = 0;
            $('#overflow .container div').each(function () {
                width += $(this).outerWidth(true);
                afterDiv = $(this).outerWidth(true);
            });
            $('#overflow .container').css('width', width / 2 + afterDiv + "px")
            ;
        })
    
    </script>
    </html>

  • 相关阅读:
    Sharding-JDBC多数据源动态切换
    U 盘安装 CentOS 7 时出现 No Caching mode page found 问题的解决
    sudo 密码直接添加到命令行以方便实现脚本自动化
    Python3 Windows 虚拟环境的若干问题
    20 张图让你彻底弄懂 HTTPS 原理!
    全网写得最好的分库分表之 Sharding-JDBC 中间件介绍
    以为线程池很简单,结果第一道题就被干趴下了!
    以为线程池很简单,没想到第一问就被干趴下了
    分布式事务,看这篇就够了!
    我是一个线程池
  • 原文地址:https://www.cnblogs.com/theWayToAce/p/7299133.html
Copyright © 2011-2022 走看看