语言

Menu
Sites
Language
Transition between pages with no menu.

 

Hi all.

I made the transition between pages. But the transition is carried out top and bottom menu, how to get them to stand still?

编辑者为: Brock Boland 开 17 3月, 2014 原因: Paragraph tags added automatically from tizen_format_fix module.
列表

响应

4 回复
Raghu Kona
Hi Enjo, The problem description is very brief and my understanding from this is, you were unable to see the header and footer while navigating to a new page. Please correct me if I am wrong. For this, either you can add header and footer in all pages or create a page for the menu items like <li><a href="deviceinfo.html">Basic Device Information (SystemInfo)</a></li> <li><a href="deviceproperties.html">Device Properties (SystemInfoProperty)</a></li> <li><a href="tracestatus.html">Trace Device Information (EventListener)</a></li> and load this on page load by doing something like $('#toc').load('toc.html', function() { $('#toc').listview('refresh'); }); inside document.ready() Regards, Raghu Kona
Marco Buettner
If you use the multiple page you can also use data-id on your footer and header. You MUST use the same data-id on all pages where the same footer and header menu should be shown for example 
<div data-role="page" id="page1">
<div data-role="header" data-id="headerNav">
</div>
...
<div data-role="footer" data-id="footerNav">
</div>
</div>

<div data-role="page" id="page2">
<div data-role="header" data-id="headerNav">
</div>
...
<div data-role="footer" data-id="footerNav">
</div>
</div>
Tiana Sweeney
Hi there, Having the same problem, though this didn't fix it for me. Both the header and footer are still transitioning along with the content of the page. It would be nice if just the content would transition. Any ideas how I could achieve this? Thanks! :)
konduri sai swathi
Hi, Try the below code making the content style "block" and "none" on button click. HTML : 
<div data-role="page" data-add-back-btn="footer" id="page1">
		<div data-role="header" data-position="fixed">
			<div data-role="tabbar">
				<ul>
					<li><a id="header-btn-1">One</a></li>
					<li><a id="header-btn-2">Two</a></li>
					<li><a id="header-btn-3">Three</a></li>
				</ul>
			</div>
		</div>
		<!-- /header -->

		<div data-role="content">
			<div id="contentarea1">Content1</div>
			<div id="contentarea2" style="display:none;">Content2</div>
			<div id="contentarea3" style="display:none;">Content3</div>
		</div>
		<!-- /content -->

		<div data-role="footer" data-position="fixed">
			<h4>Footer content</h4>
		</div>
		<!-- /footer -->
	</div>
	<!-- /page -->
JavaScript : 
$( "#header-btn-1" ).on( "click", function(event, ui) {
		$("#contentarea2").css({display:"none"});
		$("#contentarea3").css({ display:"none"});
		$("#contentarea1").css({ display:"block"});
	});
	$( "#header-btn-2" ).on( "click", function(event, ui) {
		$("#contentarea1").css({ display:"none"});
		$("#contentarea3").css({ display:"none"});
		$("#contentarea2").css({ display:"block"});
        });
	$( "#header-btn-3" ).on( "click", function(event, ui) {
		$("#contentarea1").css({ display:"none"});
		$("#contentarea2").css({ display:"none"});
		$("#contentarea3").css({ display:"block"});
	});