I dont get the ApplicationMenue not working with more than 1 page!
See here:
The swipedown works fine on first screen:
<div id="applicationMenu" data-role="page">
but nothing works on swipedown on the second page (just copy&paste):
<div id="2screen" data-role="page">
Here is my code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Application Menu</title>
<!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
<link rel="stylesheet" href="BlackBerry-JQM-all.css" />
<script src="BlackBerry-JQM-all.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div id="applicationMenu" data-role="page">
<!-- This is how you set up your application menu (top panel) -->
<div data-role="panel" id="top" data-dark-modal="true" data-position="top" data-display="push" data-theme="a" class="">
<div data-role="applicationmenu">
<a data-role="action" href="#">
<img src="img/Core_applicationmenu_icon_help.png" alt="" />
<p>Help</p>
</a>
<!-- data-role=SettingsActionItem places the settings action on the right side when it is the only item in the menu -->
<a data-role="SettingsActionItem" href="#">
<img src="img/Core_applicationmenu_icon_settings.png" alt="" />
<p>Settings</p>
</a>
<!-- Maximum of 5 actions. Any extra actions will not appear on the menu -->
<a data-role="action" href="#">
<img src="img/generic_81_81_placeholder.png" alt="" />
<p>This option should not show up</p>
</a>
</div>
</div>
<div data-role="header" data-theme="c">
<h1>Application Menu</h1>
</div><!-- /header -->
<div data-role="content">
<!-- Put your page content here -->
<a id="menuBtn" data-role="button" href="#top">Open application menu </a>
<h2 id="simulInst" style="text-align: center">Open application menu by firing "blackberry.event.swipedown"<h2>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<div id="action-bar-area" data-role="actionbar">
<div data-role="back"></div>
<a id="o3" data-role="tab" href="#2screen" >
<img src="images/search.png" alt="" />
<p>Suche</p>
</a>
</div>
</div>
</div>
<!-- /page -->
<div id="2screen" data-role="page">
<!-- This is how you set up your application menu (top panel) -->
<div data-role="panel" id="top" data-dark-modal="true" data-position="top" data-display="push" data-theme="a" class="">
<div data-role="applicationmenu">
<a data-role="action" href="#">
<img src="img/generic_81_81_placeholder.png" alt="" />
<p>Option3</p>
</a>
<!-- data-role=SettingsActionItem places the settings action on the right side when it is the only item in the menu -->
<a data-role="SettingsActionItem" href="#">
<img src="img/Core_applicationmenu_icon_settings.png" alt="" />
<p>Settings</p>
</a>
<!-- Maximum of 5 actions. Any extra actions will not appear on the menu -->
<a data-role="action" href="#">
<img src="img/generic_81_81_placeholder.png" alt="" />
<p>This option should not show up</p>
</a>
</div>
</div>
<div data-role="header" data-theme="c">
<h1>Application Menu</h1>
</div><!-- /header -->
<div data-role="content">
<!-- Put your page content here -->
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<div id="action-bar-area" data-role="actionbar">
<div data-role="back"></div>
<a id="o3" data-role="tab" href="#searchscreen" >
<img src="images/search.png" alt="" />
<p>Suche</p>
</a>
</div>
</div>
</div><!-- /page -->
</body>
</html>```
Hey,
I dont get the ApplicationMenue not working with more than 1 page! See here:
The swipedown works fine on first screen:
<div id="applicationMenu" data-role="page">but nothing works on swipedown on the second page (just copy&paste):
<div id="2screen" data-role="page">Here is my code: