Community
cancel
Showing results for 
Search instead for 
Did you mean: 
Mostafa_M_
Beginner
113 Views

Back link in header does not work

I am using Framework7 in intel xdk. I need to add back button or link that do the slide transition in the header navbar. I add the following in the html file but the back link does not work. I followed framework 7 documentations for this code snippet.

<div class="navbar">
<div class="navbar-inner">
    <div class="left">
        <a href="#" class="link">
            <i class="icon icon-back"></i>
            <span>Back</span>
        </a>
    </div>
    <div class="center">Center</div>
    <div class="right">
        <a href="#" class="link">
            <i class="icon icon-bars"></i>
            <span>Menu</span>
        </a>
    </div>
</div>

 

Tags (2)
0 Kudos
8 Replies
Elroy_A_Intel
Employee
113 Views

Are you using the App Designer (Design) tab?

Mostafa_M_
Beginner
113 Views

Yes I am using the App designer tab.

Regards

Alan_D_1
Beginner
113 Views

Hey!, somebody are here?

I have a problem with back button on header, this btn displayed but doesn't handle any event.

Diego_Calp
Valued Contributor I
113 Views

Hi Alan,

Which framework are you using? F7 or another?

Could you post some code?

Regards,

Diego

Alan_D_1
Beginner
113 Views

Hi Diego.

I use AP3 and the code is very simple, just is an blank page with 1 header and 2 subpages that I change but the back btn doesn't return me to my initial page, this just in a real device, in the emulator all works great.

Note: the back btn is automatic appear

 

thnks for you reply.

Diego_Calp
Valued Contributor I
113 Views

Hi Alan,

I don't understand the automatic back button. Where it is placed?

Regards

Diego

Alan_D_1
Beginner
113 Views

Hi Diego.

Well, let me explain you.

I created a new blank HTML5+cordova template, then i added a new subpage and a heder for the page next i used a simple button to change the focus of the active view to my subpage. How you can see, i don´t declare a back button  anywhere, so in the emulator when i click my btn, the view is change and in the header appears a back button and works.

 

Finally I create the ipa and apk for install in real devices, the install is good and all works except the back btn in the header.

Here is the header code in the main view.

<header class="container-group outer-element uib_w_1" data-uib="app_framework/header" data-ver="3" id="af-header-0">
                <h1>TRM Mobile.</h1>
                <div class="widget-container wrapping-col single-centered"></div>
                <div class="widget-container content-area horiz-area wrapping-col header-left"></div>
                <div class="widget-container content-area horiz-area wrapping-col header-right"></div>
</header>

Here is the code of the header in the subpage.

<header class="container-group outer-element uib_w_1" data-uib="app_framework/header" data-ver="3" id="af-header-0"><a class="backButton back">Back</a>
                <h1>TRM Mobile.</h1>
                <div class="widget-container wrapping-col single-centered"></div>
                <div class="widget-container content-area horiz-area wrapping-col header-left"></div>
                <div class="widget-container content-area horiz-area wrapping-col header-right"></div>
</header>

 

Regards, A.Díaz.

Diego_Calp
Valued Contributor I
113 Views

Hi Alan,

Sorry, I'm unable to reproduce your project, if I create a new AF3 project and drop a page with header and subpages, there is no automatic back button.

Doesn't matter, you have a back button declared. In your subpage code is 

<a class="backButton back">Back</a>

you could try this:

<a class="backButton back" href="javascript:parent.history.back();">Back</a>

Regards,

Diego

Reply