Как отобразить Div на загрузку страницы в JQuery - PullRequest
1 голос
/ 07 марта 2012

Мне нужно знать, как отображать конкретный div (не страницу, а просто div) при загрузке страницы в jQuery Mobile. Вот HTML-код:

    <div data-role="page">
    <div data-role="navbar">
    <ul>
        <li><a href="#" data-href="sun">Sun</a></li>
        <li><a href="#" data-href="mon">Mon</a></li>
        <li><a href="#" data-href="tue">Tue</a></li>
        <li><a href="#" data-href="wed">Wed</a></li>
        <li><a href="#" data-href="thu">Thu</a></li>
        <li><a href="#" data-href="fri">Fri</a></li>
        <li><a href="#" data-href="sat">Sat</a></li>
    </ul>
    </div><!-- /navbar -->
    <div id="sun" class="content_div">Sunday</div>
    <div id="mon" class="content_div">Monday</div>
    <div id="tue" class="content_div">Tuesday</div>
    <div id="wed" class="content_div">Wednesday</div>
    <div id="thu" class="content_div">Thursday</div>
    <div id="fri" class="content_div">Friday</div>
    <div id="sat" class="content_div">Saturday</div>

</div>

Я использую jQuery для согласования вкладок, поэтому мой JS находится выше исходного вызова jQuery Mobile. Вот этот код:

    function getHandler(handler) {
        var days =  ['sun','mon','tue','wed','thu','fri','sat'],
            d = new Date(),
            today = d.getDay();

        for (x=0; x<days.length; x++) {
            if ( x === today ) { handler = days[x]; }
        }
    }

    $(document).delegate('[data-role="navbar"] a', 'click', function () {
        $(this).addClass('ui-btn-active');
        $('.content_div').hide();
        $('#' + $(this).attr('data-href')).show();
    });

Моя цель здесь заключается в том, чтобы при первоначальной загрузке документа отображался div, соответствующий текущему дню недели

Ответы [ 2 ]

2 голосов
/ 07 марта 2012

Попробуйте это:

function getHandler() {
    var days = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'],
        d = new Date(),
        today = d.getDay();
    return days[today];
}

$(document).delegate('[data-role="navbar"] a', 'click', function() {
    $(this).addClass('ui-btn-active');
    $('.content_div').hide();
    $('#' + $(this).attr('data-href')).show();
});

$(document).ready(function(){
    $('[data-href="' + getHandler() + '"]').trigger('click');
})
​
1 голос
/ 07 марта 2012

Я изменил ваш getHandler (), чтобы он возвращал значение

Код JS выглядит следующим образом:

function getHandler() {
    var days =  ['sun','mon','tue','wed','thu','fri','sat'],
        handler = null,
        d = new Date(),
        today = d.getDay();

    for (x=0; x<days.length; x++) {
        if ( x === today ) { handler = days[x]; }
    }
    return handler;
}

$(document).delegate('[data-role="navbar"] a', 'click', function () {
    $(this).addClass('ui-btn-active');
    $('.content_div').hide();
    $('#' + $(this).attr('data-href')).show();
});

function displayTodayDiv() {
    var h = getHandler();
    $('.content_div').hide();
   $("#"+h).show();
}

$(document).ready(displayTodayDiv);​
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...