Question

我找到了plugin for jquery mobile 它工作正常但我无法在第二页的负载下执行任何代码，我尝试了任何类型的jqmobile事件但没有...

这是page1.htm的代码：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link href="css/jquery.mobile-1.0b2.min.css" rel="stylesheet" type="text/css" />
    <link href="css/jquery.mobile.pagination.css" rel="stylesheet" type="text/css" />

    <script type='text/javascript' src='Js/Libs/jquery-1.6.2.min.js'></script>
     <script type='text/javascript' src='Js/Libs/jquery.mobile-1.0b2.min.js'></script>
    <script type='text/javascript' src='Js/Libs/jquery.mobile.pagination.js'></script>
</head>
    <body>
        PAGE1
        <ul data-role="pagination">
            <li class="ui-pagination-prev"><a href="page0.htm">Prev</a></li>
            <li class="ui-pagination-next"><a href="page2.htm">Next</a></li>
        </ul>

    </body>
</html>

这是page2.htm的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">

    <link href="css/jquery.mobile-1.0b2.min.css" rel="stylesheet" type="text/css" />
    <link href="css/jquery.mobile.pagination.css" rel="stylesheet" type="text/css" />

    <script type='text/javascript' src='Js/Libs/jquery-1.6.2.min.js'></script>
     <script type='text/javascript' src='Js/Libs/jquery.mobile-1.0b2.min.js'></script>
    <script type='text/javascript' src='Js/Libs/jquery.mobile.pagination.js'></script>

    </head>
    <body onload="">
        <script type="text/javascript">

                        $('div').live('pageshow', function (event, ui) {
                            alert('This page was just hidden: ');
                        });

        </script>    
    </body>
</html>

Answer 1

网页内容必须包含 data-role="page" DIV ，如下所示：

<div data-role="page" id="test2">

这是一个有效的例子：

的test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
            <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
            <link href="http://filamentgroup.com/examples/jqm-pagination/jquery.mobile.pagination.css" rel="stylesheet" type="text/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 src="http://filamentgroup.com/examples/jqm-pagination/jquery.mobile.pagination.js"/></script>    
      </head>
      <body>
                <div data-role="page" id="test">        
                    PAGE1
                    <ul data-role="pagination">
                        <li class="ui-pagination-prev"><a href="test1.html">Prev</a></li>
                        <li class="ui-pagination-next"><a href="test2.html">Next</a></li>
                    </ul>    
            </div>   
      </body>
</html>

test2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <link href="http://filamentgroup.com/examples/jqm-pagination/jquery.mobile.pagination.css" rel="stylesheet" type="text/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 src="http://filamentgroup.com/examples/jqm-pagination/jquery.mobile.pagination.js"/></script>       
        </head>
    <body>
          <div data-role="page" id="test2">     
                    PAGE2
                    <ul data-role="pagination" id="second-page-pagination">
                        <li class="ui-pagination-prev"><a href="test.html">Prev</a></li>
                    </ul>            
                <script type="text/javascript">
                                $(document).on('pagebeforeshow', '#test2', function(event){  
                                      if(event.handled !== true) // This will prevent event triggering more then once
                                      {
                                alert('This page was just hidden: ');       
                                            event.handled = true;
                                      }
                                      return false;                                                             
                                });
                </script>
            </div>
    </body>
</html>

如果您想了解更多为什么这有必要请看一下 ARTICLE ，为了透明，这是我的个人博客。或者可以找到 HERE 。

Jquery mobile + plugin：在页面转换后执行javascript代码

1 个答案:

的test.html

test2.html