2

jquery モバイル Web サイトを構築していて、このエラーに遭遇しました。JqueryMobile 1.4.2 とマルチページを使用しています。ページの 1 つに Collapsibleset があり、それぞれの折りたたみ式の中に、列の切り替え機能を含むテーブルがあります。

クリックして列切り替えメニューを閉じるまで、すべてが正常に機能します。同じページにとどまる代わりに、最初のページにリダイレクトされます。

これはバグですか、それとも何か間違っていますか?

例を次に示します: http://jsfiddle.net/3hmea/

HTML コード: 

<div data-role="page" id="index">
    <div data-role="header" data-position="fixed">
        <h1>Page 1</h1>

    </div>
    <div data-role="content">
        This is page one
        <a href="#" id='changepage'>Click Here for page 2</a>
    </div>
    <div data-role="footer" data-position="fixed">
        <h1>Footer</h1>            
    </div>
</div>

<!-- Page 2 -->
<div data-role="page" id="page2">
    <div data-role="header" data-position="fixed">
        <h1>Page 2</h1>

    </div>
    <div data-role="content">
      <div data-role="collapsibleset" data-inset="false">
<div data-role="collapsible">
    <h3>Collapsible 1</h3>
    <table data-role="table" id="table" data-mode="columntoggle" class="ui-body-d ui-shadow table-stripe ui-responsive" data-column-btn-theme="b" data-column-btn-text="Columns to display..." data-column-popup-theme="a">
     <thead>
       <tr class="ui-bar-d">
         <th>Horário</th>
         <th>De</th>
         <th>Para</th>
         <th data-priority="2">Trans.</th>
         <th data-priority="1">Obs.</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <th>1</th>
         <td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td>
         <td>1941</td>
         <td>100%</td>
         <td>74</td>
       </tr>           
     </tbody>
    </table>
</div>
<div data-role="collapsible">
    <h3>Collapsible 2</h3>
    <table data-role="table" id="table1" data-mode="columntoggle" class="ui-body-d ui-shadow table-stripe ui-responsive" data-column-btn-theme="b" data-column-btn-text="Columns to display..." data-column-popup-theme="a">
     <thead>
       <tr class="ui-bar-d">
         <th>Horário</th>
         <th>De</th>
         <th>Para</th>
         <th data-priority="2">Trans.</th>
         <th data-priority="1">Obs.</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <th>1</th>
         <td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td>
         <td>1941</td>
         <td>100%</td>
         <td>74</td>
       </tr>           
     </tbody>
    </table>
</div>

Jクエリ:

$('#changepage').on('click', function() {
$(':mobile-pagecontainer').pagecontainer('change', '#page2', {
    transition: 'flip',
    changeHash: false,
    reverse: true,
    showLoadMsg: true
});
});

手順: 2 番目のページへのリンクをクリックし、折りたたみ可能な [表示する列] ボタンを開きます。最後に外側をクリックしてメニューを閉じます。

4

1 に答える 1

2

changeHash : false パラメータを削除するだけで、すべて正常に動作します。

作業例: http://jsfiddle.net/d6z5y/

JavaScript:

$(document).on('vclick', '#changepage',function() {
    $(':mobile-pagecontainer').pagecontainer('change', '#page2', {
        transition: 'flip',
        reverse: true,
        showLoadMsg: true
    });
});

pagecontainer はまだ進行中の作業であるため、バグが予想されることを理解する必要があります。

于 2014-05-29T15:52:46.057 に答える