mobile NavBar

[Rainer]

Hello,

I tried to use the pm:navBar. The example works fine. However extending to tow views I am not able to keep the styleClass of the active tab. After transition between the views the active tab is no more highlighted.

Code: Select all

<pm:page title="Navbar">
		<pm:view id="home">
			<pm:header title="Home">
				<pm:navBar id="navBarHome">
					<pm:button value="Home" icon="home" href="#home"
						styleClass="ui-btn-active" />
					<pm:button value="Events" icon="search" href="#events" />
				</pm:navBar>
			</pm:header>
		</pm:view>

		<pm:view id="events">
			<pm:header title="Events">
				<pm:navBar id="navBarEvents">
					<pm:button value="Home" icon="home" href="#home" />
					<pm:button value="Events" icon="search" href="#events"
						styleClass="ui-btn-active" />
				</pm:navBar>
			</pm:header>
		</pm:view>
	</pm:page>

I am using primefaces 3.0 Snapshot (tried nightly from April 5th) and jsf-api/impl 2.0.4-b09

I guess one solution is to have only one Navbar and keep it between page transitions, but I have not been able to achieve this.
Any help appreciated.

Rainer

[Rainer]

in case someone is trying to fix a tabBar at the bottom of the views.
I put the navBar into a notificationBar:

Code: Select all

<p:notificationBar position="bottom"  widgetVar="myTabBar" autoDisplay="true"
			style="height:60px;padding:0;">
			<pm:navBar id="navBarHome" swatch="e">
				<pm:button value="Home" icon="home" href="#home"
					styleClass="ui-btn-active" />
				<pm:button value="Events" icon="search" href="#events" 
					transition="slide" />
........

To prevent the notification bar from hiding the content at the bottom of the page I use

Code: Select all

<style type="text/css">
.ui-content {
        padding-bottom:60px !important;
}

Rainer