0

私は私の単一のhtmlファイルに3つのページを持っています。そして、ボタンクリックでページを変更しています今、トランジションでページを変更していますが、ページが変更されるとページトランジションの間に空白が表示され、ジャーク効果も与えますライブラリがすべてのアプローチを適用するのを助けるすべてのjavascriptを追加しましたが、機能しません. 時間と時間の試みはすべて無駄です。もう1つの問題は、ページを変更すると、ページのonPageChangeレイアウト設定が何度も変更されるように見えることです。この問題で私を助けてくれる人はいますか?

フローは次のとおりです。

1------ Page One (ホームページ---最初に読み込まれたページ) このページには 2 つのボタンと背景画像があります

2------ ページ 2 (このページには、いくつかの入力タイプの画像と、ホームページに戻るボタンがあります)

3------ページ 3 (このページにはいくつかの div と、ホームページに戻るボタンもあります)

    <meta content="width=device-width,initial-scale=0.50, user-scalable=no"
name="viewport">



<script type="text/javascript" src="js/jquery.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="js/jquery.mobile-1.3.1.min.js"></script>



<body>
    <!-- Start of first page: #one -->
    <div data-role="page" id="one">
       <div id='home' >

    <input type="image"  id='button_1'  src="images/image_1.png"  onclick="first_function();"/>
  <input type="image"  id='button_2' src="images/image_2.png" onclick="second_function();" />


         </div>
    </div><!-- /page one -->


 <!-- Start of second page: #two -->
    <div data-role="page" id="two">



<div id="fullpage">
<img id="player" src="./images/rect.png"
style="margin-left: 65px" />

<input type="image" class="stage"
style="width: 80px; height: 90px; margin-left: 65px;"
onclick="myFunction('1','1');" id="1" value=" " name=""/>


<input type="image" class="stage"
style="width: 80px; height: 90px; margin-left: 30px;"
onclick="myFunction('2','1');" id="2" value=" " name=""/>

<input  type="image" class="stage"
style="width: 80px; height: 90px; margin-left: 50px;"
onclick="myFunction('3','1'); " id="3" value=" " name=""/>



<div id="home-btn">


<input type="image" id="home"
style="position: absolute; width: 90px; height: 90px; margin-left: 40px; margin-top: 210px;"
src="images/home.png"
 value=" " name="home" onClick="home_function();"/>



</div>



</div>

    </div><!-- /page two -->



 <!-- Start of second page: #three -->
    <div data-role="page" id="three">

<div style='display: block; background-image: url(./images/imagee1.jpg);'   >

<button class="stage1"
style="width: 280px; height: 130px; margin-top: 25px; margin-left: 40px; background: transparent;"
onclick="audio('11')" ></button>
<button class="stage1"
style="width: 280px; height: 340px; margin-top: 20px; margin-left: 960px; background: transparent;"
onclick="audio('22')" ></button>

<button id="home" id="home"
style="position: absolute; width: 90px; height: 90px; margin-left: 40px; margin-top: 255px; background: url('./images/home.png');" onClick="home_function();"></button>

<button class="stage1"
style="width: 220px; height: 290px; margin-top: 435px; margin-left: 40px; background: transparent;"
onclick="audio('33')"></button>
<button class="stage1"
style="width: 210px; height: 290px; margin-top: 435px; margin-left: 300px; background: transparent;"
onclick="audio('44')" ></button>
<button class="stage1"
style="width: 240px; height: 290px; margin-top: 435px; margin-left: 550px; background: transparent;"
onclick="audio('55')"></button>
<button class="stage1"
style="width: 415px; height: 290px; margin-top: 435px; margin-left: 830px; background: transparent;"
onclick="audio('66')"></button>

</div>
</div>



Javascript:





   <script>
function second_function()
{




$.mobile.changePage('#two',{transition: 'slide',allowSamePageTransition: true});



 }


 function home_function()
{

$.mobile.changePage('#one',{transition: 'slide',reverse : true,allowSamePageTransition: true});



 }

 function second_function()
 {


$.mobile.changePage('#three',{transition: 'slide',allowSamePageTransition: true});

 }


</script>
4

1 に答える 1