Изменить класс при использовании IPAD с JQuery - PullRequest
4 голосов
/ 04 апреля 2011

Как изменить класс на ссылке: когда пользователь использует ipad.

Я использую выдвижной лайтбокс для отображения видео, но я бы хотел, чтобы лайтбокс изменился, когда пользователь использует ipad.

<a href="#" class="video">Watch</a>

например Веб-версия

/* Video overlay */
// Hide on load
$('.video-player').hide();

// Show the video player
$('.video').click(function() {
    $('.video-player').show('slow');
    return false;
});

//Hide the video player 
$('.close-video').click(function() {
    $('.video-player').hide('slow');
    return false;
})

Версия для IPAD

/* Video overlay */
    // Hide on load
    $('.video-player').hide();

    // Show the video player
    $('.video').fancybox({
                'content'           : $('.video-player').html(),
                'titlePosition'     : 'inside',
                'transitionIn'      : 'none',
                'transitionOut'     : 'none',
                'overlayColor'      : '#fff',
                'overlayOpacity'    : 0,
                'scrolling'         : 'no',
                'onComplete'        : function(){

                    $('.pop-detail input.button, .pop-detail a').click(function(){
                        $.fancybox.close();
                    })
                },
                'onClosed'          :function(){
                }
        });

    //Hide the video player 
    $('.close-video').click(function() {
        $('.video-player').hide();
        return false;
    })

Спасибо за вашу помощь.

Ответы [ 3 ]

5 голосов
/ 04 апреля 2011

Это установит переменную с именем iPad, которая будет True на iPad и False в других местах.

var iPad = navigator.userAgent.match(/iPad/i) != null;

Вы можете использовать ее, чтобы решить, какой путь к коду запускать, используя

if (iPad) {
    // iPad version
} else {
    // Normal version
}
0 голосов
/ 04 апреля 2011

Краткий ответ: не стоит.Предоставление пользователю одинакового опыта в любом браузере, который он использует, является основным принципом разработки (если нет ограничений разрешения, как в мобильных телефонах)

Если вы все еще хотите это сделать, определите его с помощью:

jQuery(document).ready(function($){
    var deviceAgent = navigator.userAgent.toLowerCase();
    var agentID = deviceAgent.match(/(ipad)/);
    if (agentID) {

        // do something special

    }
});

ссылка: http://snipplr.com/view/31607/iphone-ipad-ipod-detect/

0 голосов
/ 04 апреля 2011
if (navigator.platform.indexOf("iPad") != -1)){
    /* second code snippet, you are on the iPad */
}else{
    /* first snippet, normal behaviour */
}
...