0

モバイルで利用できるウェブページの開発から始めています。

ほとんどすべての表示スペースを消費する 6 つの大きなアイコンを持つアプリケーションが必要です。モバイルを水平に配置すると、これらのアイコンを 3 行 2 列にしたいと思います。また、モバイルを縦に配置する場合は、2 行 3 列にしたいと考えています。たとえば 100px のように単一のアイコン幅を宣言して、単純な float:left を使用することはできません。私のロイアウトを流動的にしたいのです。

ページで jQuery モバイルを使用する予定です。

4

1 に答える 1

0

空のhtmlファイルにコピーするだけで、実際の例を作成しました。

HTML :

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <style>
        #custom-icon {
            position: relative;
            float: left;
            width: 33.333%;
            height: 50%;
        }

        .ui-content {
            padding: 0 !important;
        }
    </style>
    <script type="text/javascript" src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>   
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 
    <script>    

        $(document).on('pageshow', '#index', function(){       
            detectOrientationMode();
            setRealContentHeight();             
        }); 

        $(window).bind('orientationchange', function() {            
            detectOrientationMode();
            setRealContentHeight();             
        });     

        function detectOrientationMode() {
            if($(window).height() > $(window).width()) {
                $('[data-role="content"] div').each(function(){
                    $(this).css({'width':'50%','height':'33.33333%'});          
                });
            } else {
                $('[data-role="content"] div').each(function(){
                    $(this).css({'width':'33.33333%','height':'50%'});          
                });             
            }
        }

        function setRealContentHeight() {
            var header = $.mobile.activePage.find("div[data-role='header']:visible");
            var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
            var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
            var viewport_height = $(window).height();

            var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
            if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
                content_height -= (content.outerHeight() - content.height());
            } 
            $.mobile.activePage.find("div[data-role='content']").height(content_height);
        }
    </script>
</head>
<body>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
        </div>

        <div data-role="content">
            <div id="custom-icon" style="background: red;">Icon 1</div>
            <div id="custom-icon" style="background: blue;">Icon 2</div>
            <div id="custom-icon" style="background: green;">Icon 3</div>
            <div id="custom-icon" style="background: yellow;">Icon 4</div>
            <div id="custom-icon" style="background: orange;">Icon 5</div>
            <div id="custom-icon" style="background: violet;">Icon 6</div>
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>   
</body>
</html>

テスト済み:

Android 4.1.1 クローム

iPad iOS 6.0

于 2013-03-17T19:11:55.790 に答える