Search jQuery

jQuery Forum

jQuery Mobile

theandybob

Headers and Footers with <li> click transitions

in jQuery Mobile • 10 years ago

Hello,

So I'm new to JQuery mobile, and so I'm still trying to firmly grasp how it deals with pages.

What I'm trying to do is have an unordered list <ul> with list items <li> under to make a kind of hierarchy menu. I have a header and a footer in the page that I want to stay even when the user clicks on one of the list items.

What JQuery mobile is doing is creating a new header with a title of clicked list item, and then showing subsequent lists. What I want to do is keep that original header and footer even when the user clicks on the list item. How can I do this? Here is my code.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../js/lib/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
<link rel="stylesheet" type="text/css" href="../css/NewProduct.css">
<script type="text/javascript" src="../js/lib/jquery-1.8.1.js"></script>
<script type="text/javascript" src="../js/lib/jquery.mobile-1.2.0/jquery.mobile-1.2.0.js"></script>
<script type="text/javascript" src="../js/config/config.js"></script>
<script type="text/javascript" src="../js/objects/database.js"></script>
<script type="text/javascript" src="../js/objects/session.js"></script>
<script type="text/javascript" src="../js/globals.js"></script>
<script type="text/javascript" src="../js/views/NewProduct.js"></script>
<title>New Product</title>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="b" >
<a href="#" class="ui-btn-left" data-rel="back" data-icon="back" data-add-back-btn="true" >Back</a>
<h1>New Product</h1>
</div>
<input type="search" name="search" id="searchProducts" value="" data-mini="false" placeholder="Product or UPC"/>
<ul data-role="listview" data-autodividers="true" data-divider-theme="d">
<li><a id="kraft" data-transition="slide">Kraft</a>
<ul data-role="listview" data-autodividers="true" data-divider-theme="d">
<li><a id="kraft-Dairy" data-transition="slide">Dairy</a>
<ul data-role="listview" data-autodividers="true" data-divider-theme="d">
<li><a id="kraft-Dairy-SqueezyCheesy">Squeezy Cheesy</a></li>
<li><a id="kraft-Veggies-WholeMilk">Whole Milk</a></li>
</ul>
</li>
<li><a id="kraft-Veggies" data-transition="slide">Veggies</a></li>
</ul>
</li>
<li><a id="nestle" data-transition="slide">Nestle</a></li>
<li><a id="pillsbury" data-transition="slide">Pillsbury</a></li>
</ul>
<div data-role="footer" data-theme="c" class="ui-bar" data-position="fixed" style="padding:0;">
<a href="#" class="ui-btn-left" data-icon="ROER-burrisLogo" data-iconpos="notext"></a>
<h4>Prototype</h4>
<p class="ui-btn-right"><img data-inline="true" src="../img/ROERLogo-03.png" width="40" height="34"></p>
</div>
</div>
</body>
</html>

Replies(2)

watusiware

Re: Headers and Footers with <li> click transitions

10 years ago

Really has nothing to do with listviews.

Your listview has links, and links normally load a page. If you don't want to change pages, don't load a page.

So, you have to prevent the links from performing the usual link action. Add data-ajax="false" to the links, and call preventDefault() from an event handler.

Your event handler can then do whatever you'd like. e.g. you might use jQuery to change some content on the page, etc.

theandybob

Re: Headers and Footers with <li> click transitions

10 years ago

That did it. Had to look a bit more into how ajax works to understand what's going on though. Thanks for the help!

Top Reply

Response title

Attachments

jQuery Forum

Headers and Footers with <li> click transitions

Replies(2)

Re: Headers and Footers with <li> click transitions

Re: Headers and Footers with <li> click transitions

Statistics

Tags

Actions