0

我的signle html文件中有三页。我在按钮单击上更改页面现在我正在使用转换更改页面，但是当页面更改时，页面转换之间会出现空白，并且还会产生混蛋效果我添加了所有 javascript，帮助库应用了所有方法，但它不起作用。小时和小时的尝试都是徒劳的。另一个问题是，当我更改页面时，页面的 onPageChange 布局设置似乎一次又一次地更改。有谁能帮我解决这个问题？

流程是：

1--------第一页（首页---第一个加载的页面）这个页面有两个按钮和背景图片

2--------第二页（这个页面有一些输入类型的图像和一个返回主页的按钮）

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

0

您的页面结构错误。看看开发者提供的“页面解剖”：http: //jquerymobile.com/demos/1.2.0/docs/pages/page-anatomy.html

2）无需手动切换页面（$.mobile.changePage()）。更好的使用：

<a href="#page1" data-transition="flip">Foo</a>

http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html

于 2013-06-19T11:34:24.083 回答