обновить значение на основе изменения ориентации на Ipad - PullRequest
Новая
       2

обновить значение на основе изменения ориентации на Ipad

0 голосов
/ 05 января 2012

Какой лучший способ обновить значение, основанное на изменении ориентации?

Пример значения наценки. 

<span class="week">Thursday</span>

Так что, если бы это был пейзаж, он бы сказал четверг , если бы он был в портрете, вместо этого он сказал бы Чт .

Я могу обновить строку, используя subString (0, 3), но я не уверен, как изменить ее обратно после.

Вот функция изменения ориентации, которую я получил: 

/* orientation change */
function orient() {  
    if (window.orientation == 0 || window.orientation == 180) {
        $('body').attr('class', 'portrait');
        orientation = 'portrait';
        return false;
    }
    else if (window.orientation == 90 || window.orientation == -90) {
        $('body').attr('class', 'landscape');
        orientation = 'landscape';
        return false;
    }
}
/* all orientation function on page load */
$(function(){
    orient();
});
/* call orientation function on orientation change */
$(window).bind( 'orientationchange', function(e){
    orient();
});

Ответы [ 2 ]

1 голос
/ 05 января 2012

Вы можете использовать атрибуты данных для хранения длинных и коротких версий дней: 

<span class="week" data-long="Thursday" data-short="Thu">Thursday</span>

После этого, с небольшими изменениями, вы можете использовать его следующим образом: 

function orient() {  
    orientation = window.orientation == 0 || window.orientation == 180 ? 'portrait' : 'landscape';
    $('body').attr('class', orientation );
    $('.week').html(function() {
        var $this = $(this);
        return $this.data(orientation == 'landscape' ? 'long' : 'short');
    });
    return false;
}
0 голосов
/ 05 января 2012

Вы можете установить текст следующим образом: 

$(".week").html("Thu");

или 

$(".week").html("Thursday");

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

var week = $(".week");
if (!week.data("day")) {
    week.data("day", week.html());
}
var day = week.data("day");
if (orientation == "landscape") {
    week.html(day);
} else {
    week.html(day.substr(0,3));
}
...