У меня есть неудобный визуальный глюк. Я хочу хороший переход при смене страниц в приложении. К сожалению, в первый раз, когда я перехожу на другую страницу, вместо того, чтобы сдвигать текущую страницу и новую страницу, текущая страница сразу же заменяется новой страницей, а затем выкладывается. Когда первая страница не отображается, отображается новая страница. Однако, во второй раз, он работает как шарм!
Это работает на iphone с помощью jQuery Mobile + PhoneGap
Я сделал видео, чтобы помочь прояснить проблему: http://www.youtube.com/watch?v=Ybvzh_wTnSE
<body style="background-color: #000;">
<div id="container" style="display:none;">
<div id="side-menu" style="display:none;">
<div id="header_top"></div>
<a href="#dives" onclick="showdives();"><div id="header_dives" class="selected"></div></a>
<div id="header_spacer1"></div>
<a href="#explore" onclick="showexplore();"><div id="header_explore"></div></a>
<div id="header_spacer2"></div>
<a href="#search" onclick="showsearch();"><div id="header_search"></div></a>
<div id="header_spacer3"></div>
<a href="#settings" onclick="showsettings();"><div id="header_settings"></div></a>
<div id="header_bottom"></div>
</div>
<div id="slide_mask">
<!-- START of LOGIN page -->
<div data-role="page" id="login">
<div id="home_frame">
<div id="home_logo"></div>
<div id="home_fblogin" onclick="login()"></div>
<div class="home_login">
<p>Email: <input type="text" name="user[email]" size="30"/></p>
<p>Password: <input type="password" name="user[password]" size="30"/></p>
<button onclick="show_page_home();">LOGIN</button>
</div>
</div>
</div>
<!-- END of LOGIN page -->
<!-- START of LOGIN page -->
<div data-role="page" id="dives" class="right_pane">
<p>My dives !</p>
</div><!-- /content -->
<div data-role="page" id="explore" class="hidden right_pane">
<p>My explore !</p>
</div><!-- /content -->
<div data-role="page" id="search" class="hidden right_pane">
<p>My search !</p>
</div><!-- /content -->
<div data-role="page" id="settings" class="hidden right_pane">
<p>My settings !</p>
<button onclick="logout_db();">logout</button>
</div><!-- /content -->
<!-- END of LOGIN page -->
</div>
</div>
<div id="log"></div>
<div id="data"></div>
</body>
И соответствующий CSS:
body {margin: 0; font: 18px Helvetica; text-align: center; background-color: #000; background: url(../img/bg_big.png) repeat;
-webkit-user-select: none; /* prevent copy paste for all elements */
}
#container { width:320px; height:460px; overflow: hidden;}
input{ -webkit-user-select: text; /* enable copy paste for elements with this class */}
a {-webkit-user-select: none; /* prevent copy paste for all elements */}
span {-webkit-user-select: none; /* prevent copy paste for all elements */}
#side-menu {z-index: 1000 !important; position: fixed; height: 460px; width: 56.5px; background: url(../img/bg_big.png) no-repeat; display: inline-block;
overflow: hidden; top: 0px; left: 0px; }
#header_top {background: url(../img/header/header_top.png) no-repeat; background-size: 56.5px 48.96px; width: 56.5px; height: 48.96px; display: block;}
#header_dives {background: url(../img/header/dives.png) no-repeat; background-size: 56.5px 51.75px; width: 56.5px; height: 51.75px; display: block;}
#header_dives.selected{background: url(../img/header/dives_selected.png) no-repeat;}
#header_spacer1{background: url(../img/header/header_space1.png) no-repeat; background-size: 56.5px 13.9px; width: 56.5px; height: 13.9px; display: block;}
#header_explore{background: url(../img/header/explore.png) no-repeat; background-size: 56.5px 51.75px; width: 56.5px; height: 51.75px; display: block;}
#header_explore.selected{background: url(../img/header/explore_selected.png) no-repeat;}
#header_spacer2{background: url(../img/header/header_space2.png) no-repeat; background-size: 56.5px 15.33px; width: 56.5px; height: 15.33px; display: block;}
#header_search{background: url(../img/header/search.png) no-repeat; background-size: 56.5px 51.75px; width: 56.5px; height: 51.75px; display: block;}
#header_search.selected{background: url(../img/header/search_selected.png) no-repeat;}
#header_spacer3{background: url(../img/header/header_space3.png) no-repeat; background-size: 56.5px 17.73px; width: 56.5px; height: 17.73px; display: block;}
#header_settings{background: url(../img/header/settings.png) no-repeat; background-size: 56.5px 51.75px; width: 56.5px; height: 51.75px; display: block;}
#header_settings.selected{background: url(../img/header/settings_selected.png) no-repeat;}
#header_bottom{background: url(../img/header/header_bottom.png) no-repeat; background-size: 56.5px 160px; width: 56.5px; height: 160px; display: block;}
.hidden {display: none;}
.right_pane{width: 263.5px !important; background: url(../img/right_bg.png) no-repeat; background-size:263.5px 460px; width: 263.5px; height: 460px; left: 56.5px !important;}
#slide_mask{ display: inline-block; overflow: hidden; padding-left: 56.5px; width: 263.5px; height: 460px; top: 0;}
и бит JS:
///////////////////////////////////
//MENU MECHANICS
///////////////////////////////////
function showdives(){
$("#side-menu .selected").removeClass("selected");
$("#header_dives").addClass("selected");
}
function showexplore(){
$("#side-menu .selected").removeClass("selected");
$("#header_explore").addClass("selected");
}
function showsearch(){
$("#side-menu .selected").removeClass("selected");
$("#header_search").addClass("selected");
}
function showsettings(){
$("#side-menu .selected").removeClass("selected");
$("#header_settings").addClass("selected");
}
Методы onclick только добавляют/удаляют "выбранный" класс в/из пунктов меню.
