0

JQuery Mobile (ver 1.3.0) を使用して Web アプリを開発しています。HTML ファイルが 1 つしかない場合は、「pageshow」イベントをページ div にバインドできます。

<!DOCTYPE HTML>
<html>
<head>
    <title>Funil de Vendas</title>
    <meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <script src="lib/jquery-1.8.2.min.js"></script>
    <script src="lib/jquery.mobile-1.3.0.min.js"></script>

    <script>
        var nice = false;
        $(document).ready( function(){
            $("#other_page").bind('pageshow',function() {
                alert('The page was called!');
            });     
        });
    </script>       
</head>
<body>
        <div data-role="page" class="Page" id="home_page">
            <div data-role="content">
                <a data-role="button"  href="#other_page" data-inline="true" style="width:300px;">Iniciar</a>
            </div>
        </div>
    </div>  

    <div data-role="page" class="Page" id="other_page">
        <div data-role="content">
            ...
        </div>
        ...
        ...
        ...
    </div>
</body></html>

複数の HTML ファイルを使用して同じことを行うにはどうすればよいですか。この div は別の HTML ファイルにあるため、ページにバインドできません。

<div data-role="page" class="Page" id="home_page">
    <div data-role="content">
        <a data-role="button"  href="other_page.html" data-inline="true" style="width:300px;">Iniciar</a>
    </div>
</div>

前もって感謝します！

4

1 に答える 1

2

ここには 2 つの方法があります。

最初の解決策。複数の HTML ファイルを使用していて、それらすべてが ajax でロードされている場合 (これは、ページをロードする標準的な jQuery Mobile の方法です)。この場合、jQM は他の html ファイルの BODY コンテンツのみをロードするため、すべての JavaScript を最初の html ファイルにロードする必要があります。

例 ：

index.html :

    <!DOCTYPE html>
    <html>
    <head>
        <title>jQM Complex Demo</title>
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>    
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
        <script>
                $(document).on('pagebeforeshow', '#index', function(){       
                        alert('This is a first page!');
                    });

                    $(document).on('pagebeforeshow', '#second', function(){       
                        alert('This is a second page!');                
                    }); 
        </script>
    </head>
    <body>
        <div data-role="page" id="index" data-theme="b">
            <div data-role="header" data-theme="a">
                <h3>First page</h3>
            </div>

            <div data-role="content">
                        <a data-role="button" id="some-btn" href="second.html">Open next page</a>                        
            </div>

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

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

second.html :

    <div data-role="page" id="second" data-theme="b">
        <div data-role="header" data-theme="a">
            <h3>Second page</h3>
        </div>

        <div data-role="content">
                This is a second page
        </div>

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

        </div>
    </div>

2番目の解決策。複数の HTML ファイルがあるが、すべてのページが rel="external" 属性を持つリンクでリンクされているか、アプリ レベルで ajax が無効になっている場合。この場合、すべての html ページには独自の HEAD と BODY が必要です。また、すべてのページには独自の JavaScript が必要です。

例 ：

index.html :

    <!DOCTYPE html>
    <html>
    <head>
        <title>jQM Complex Demo</title>
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>    
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
        <script>
                $(document).on('pagebeforeshow', '#index', function(){       
                        alert('This is a first page!');
                    });
        </script>
    </head>
    <body>
        <div data-role="page" id="index" data-theme="b">
            <div data-role="header" data-theme="a">
                <h3>First page</h3>
            </div>

            <div data-role="content">
                        <a data-role="button" id="some-btn" href="second.html" rel="external">Open next page</a>                         
            </div>

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

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

second.html :

    <!DOCTYPE html>
    <html>
    <head>
        <title>jQM Complex Demo</title>
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>    
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
        <script>
                    $(document).on('pagebeforeshow', '#second', function(){       
                        alert('This is a second page!');                
                    }); 
        </script>
    </head>
    <body>
        <div data-role="page" id="second" data-theme="b">
            <div data-role="header" data-theme="a">
                <h3>Second page</h3>
            </div>

            <div data-role="content">
                    This is a second page
            </div>

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

            </div>
        </div>
    </body>
    </html>
于 2013-03-04T15:39:30.073 に答える