Search code examples
javascriptjqueryappframework

How to trigger a function in a single page mobile layout? $.ui.disableSideMenu(); on App framework

I am developing a mobile app using intel App Framework. I want to that whole application to be in one page which I think it is efficient than multi page application.

So my pages goes something like this.

<div id="page_1">

<a href="#page_2">

</div>

<div id="page_2">

Page 2 content

</div>

So here the divs page_1 and page_2 contains its content and they are linked in other pages as a link or through a button.

In the Intel framework, there is a built in, Side Navigation bar which extends from the left on desktop or tablet view.

I want to display that side navigation bar in Page 2 but not in page 1.

In this case, there is an inbuilt app framework function to remove the side navigation bar is $.ui.disableSideMenu();

I have tried this function with onclick event like 

<button onClick=" $.ui.disableSideMenu();">Remove Side Nav</button>

It worked fine, but how can I apply this function only on page_1 ?

Solution

  • You can use data-load and data-unload attributes on your panel to describe the function to disable or enable side menu.

    Here is a working example: http://jsbin.com/isofiSe/2 code here: http://jsbin.com/isofiSe/2/edit

    documentation for AFUI panels here: http://app-framework-software.intel.com/documentation.php#afui/afui_panels