0

我正在使用 JQuery Mobile（1.3.0 版）开发一个网络应用程序。如果一个只有一个 HTML 文件，我可以将“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

这里有两种可能的方法：

第一个解决方案。如果您使用多个 HTML 文件并且所有这些文件都使用 ajax 加载（这是标准的 jQuery Mobile 页面加载方式）。在这种情况下，必须将所有 javascript 加载到第一个 html 文件中，因为 jQM 只会加载其他 html 文件的 BODY 内容。

例子 ：

索引.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>

第二个.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>

第二种解决方案。如果您有多个 HTML 文件，但您的所有页面都链接了具有 rel="external" 属性的链接，或者在应用程序级别打开了 ajax。在这种情况下，每个 html 页面都必须有自己的 HEAD 和 BODY。每个页面都必须有它自己的javascript。

例子 ：

索引.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>

第二个.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 回答