jquery mobile - добавляющий слушатель нарушает собственное поведение при нажатии - PullRequest
Новая
       8

jquery mobile - добавляющий слушатель нарушает собственное поведение при нажатии

0 голосов
/ 15 августа 2011

Добавление прослушивателя к кнопкам preActNav в приведенном ниже примере, похоже, нарушает стандартную настройку jQuery Mobile, которая закрашивает синюю кнопку в событии при нажатии.

Я делаю это неправильно или есть более естественный способ. 

<!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>

Ответы [ 2 ]

1 голос
/ 15 августа 2011

return false; в этом прослушивателе событий останавливает событие "ОС" от применения стиля.

См. JavaScript: event.preventDefault () против возврата false .

Лучше всего этого не делать, но если вам действительно необходимо заблокировать другие обработчики по какой-то причине, вы можете применить стиль вручную: 

/* 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;
} );


См. На jsFiddle.

0 голосов
/ 15 августа 2011

Это работает ...

Демо: http://jsfiddle.net/wdm954/9BRMk/3

$('a.preActNav').click(function() {      
    $('.preGroups').hide();
    var id = '#group' + $(this).attr('data-seq');
    $(id).show();
});
...