语言

Menu
Sites
Language
Panel changer with single panel template

I have one PanelChanger in my mobile web application and since I have some fixed elements which I want to be shown on every page, I decided to use PanelChanger for user navigation between pages. The problem is that when I have a single panel template and I want to change the panel to the same template with different data the PanelChanger view gets black and nothing is shown.

How should I handle changing panels with the same template?

列表

响应

5 回复
André Reus

hi 

Do you want like this??

 

Ehsan Razzazi

Hi, 

I tried this example but in this example different panel templates are used and user navigates this way: #mainpanel > #panel2 > #panel3. The problem is that if I change it to #mainpanel > #panel2 > #panel2 (navigate to the same template with different data) it doesn't work properly.

The real scenario is a music player app in which I used panels for navigation since I wanted the player layout fixed at the bottom of the screen in all the pages. I this app I want to be able to navigate from one album to another which has a single panel template.

André Reus

did you see the panel.html ? 
I think you can use same template for all the pages.. Using your common template make panels
 

<div id="panel2" class="ui-panel">
    <div class="ui-content">
		<ul class="ui-listview">
			<li class="ui-li-anchor">
				<a href="#panel3">Go Panel 3</a>
			</li>
		</ul>
	</div>
</div>
<div id="panel3" class="ui-panel">
	<ul class="ui-listview">
		<li class="ui-li-static">Panel3</li>
	</ul>
</div>

 

Ehsan Razzazi

I've seen the TAUUIComponents sample project but it doesn't solve the problem. Let's say I have this panel template:

<div id="album-detail-panel" class="ui-panel">
    <div class="ui-content panel-content">
	<div id="cover-container">Cover</div>
    </div>
</div>

And I have this JS code:

var page = document.querySelector("#main"),
    	panelChanger = page.querySelector("#panel-changer"),
		panelChangerComponent,
        cover = page.querySelector("#cover-container"),
        albumId = 1;
        
panelChangerComponent = tau.widget.PanelChanger(panelChanger);

cover.addEventListener("click", function () {
    albumId++;
    panelChangerComponent.changePanel("album-detail.html#album-detail-panel", "slide", "forward");
});

Actually I have one panel template (album-detail-panel) and I want to navigate to the same template with a different data (albumId) when a user clicks on the cover. The problem is that navigating to the same panel template doesn't create a new panel. Instead it shows a blank screen and ofcourse the back navigation does not work properly.

André Reus

Lets summarize it, 

You have a web app in which you are using Navigation panel.

But you want to use the same template for all the pages. 

TAUComponnet sample app shows different template for each page in Navegation panel app. 

right ?