Question

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

流程是：

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

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

3 ------第3页（此页面还有SOme 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>

Answer 1

您的网页结构错误。看看开发人员提供的“页面解剖”：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

页面转换无法正常工作

1 个答案: