jquery mobile -adding listener breaks native on-click behavior
Adding a listener to the preActNav buttons in example below seems to break jQuery Mobile's default css which paints button blue on the on click event.
Am I doing this wrong or is there a more native way.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile.css" />
<script type="text/javascript" src="jquery.mobile/jquery.js"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile.js"></script>
</head>
<body>
<div data-role="page" id="mainmenu">
<div data-role="header" data-position="inline">
<h1>Main Menu</h1>
</div>
<div class="ui-body ui-body-c">
<div data-role="content">
<div data-role="navbar">
<ul>
<li><a href="#" data-theme="a" data-seq='A' class="preActNav" data-icon="arrow-d" data-transition="none" ID="preActNavA">A</a></li>
<li><a href="#" data-theme="a" data-seq='B' class="preActNav" data-icon="arrow-d" data-transition="none" ID="preActNavB">B</a></li>
<li><a href="#" data-theme="a" data-seq='C' class="preActNav" data-icon="arrow-d" data-transition="none" ID="preActNavC">C</a></li>
<li><a href="#" data-theme="a" data-seq='D' class="preActNav" data-icon="arrow-d" data-transition="none" ID="preActNavD">D</a></li>
<li><a href="#" data-theme="a" data-seq='E' class="preActNav" data-icon="arrow-d" data-transition="none" ID="preActNavE">E</a></li>开发者_如何学运维;
<li><a href="#" data-theme="a" data-seq='F' class="preActNav" data-icon="arrow-d" data-transition="none" ID="preActNavF">F</a></li>
</ul>
</div>
<div id='groupA' class='preGroups'>
This is Group A</div>
<div id='groupB' class='preGroups'>
This is Group B</div>
<div id='groupC' class='preGroups'>
This is Group C</div>
<div id='groupD' class='preGroups'>
This is Group D</div>
<div id='groupE' class='preGroups'>
This is Group E</div>
<div id='groupF' class='preGroups'>
This is Group F</div>
</div>
</body>
</html>
<script>
$(document).ready(function () {
/* Add a listner to Pre-Close Group buttons */
$('a.preActNav').click(function() {
var group = ($(this).data('seq'));
currentTab = group;
$('.preGroups').hide();
$('#group' + group).show();
return false;
});
});
</script>
The return false; in that event listener is stopping the "OS" event from applying the style.
See JavaScript: event.preventDefault() vs return false.
Best not to do that , but if you really must block the other handlers for some reason, you can apply the style manually:
/* Add a listner to Pre-Close Group buttons */
$('a.preActNav').click ( function () {
$('a.preActNav').removeClass ('ui-btn-active');
$(this).addClass ('ui-btn-active');
var group = ($(this).data('seq'));
currentTab = group;
$('.preGroups').hide();
$('#group' + group).show();
return false;
} );
See it at jsFiddle.
This works...
Demo: http://jsfiddle.net/wdm954/9BRMk/3
$('a.preActNav').click(function() {
$('.preGroups').hide();
var id = '#group' + $(this).attr('data-seq');
$(id).show();
});
加载中,请稍侯......
精彩评论