0

jquery mobile用のこのプラグインを見つけまし た。正常に動作しますが、2ページ目の読み込み時にコードを実行できません。あらゆる種類の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>
4

1 に答える 1

2

ページのコンテンツは、次のようにラップする必要があります。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>

なぜこれが必要なのかをもっと知りたい場合は、この記事を見てください。透明にするために、それは私の個人的なブログです。または、ここで見つけることができます。

于 2013-01-30T09:50:42.837 に答える