Как реализовать кроссплатформенное приложение с единой версией разметки HTML5, используя Yii, grid 1140 и jQuery Mobile? - PullRequest
Новая
       14

Как реализовать кроссплатформенное приложение с единой версией разметки HTML5, используя Yii, grid 1140 и jQuery Mobile?

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

Я начинаю новый кроссплатформенный проект в следующем месяце.Я разработал ряд приложений с гибким дизайном и гибкой версткой с использованием Yii Framework, 1140 Grid и jQuery UI.Следующий проект имеет изюминку - мы хотим использовать сетку 1140 для настольной версии приложения и jQuery Mobile для создания мобильной версии.У меня пока нет опыта работы с мобильным jQuery.

На мой взгляд, мне доступны две стратегии:

  1. Реализация версий сайта 1140 и jQuery Mobile как отдельных тем в Yii.Предоставьте соответствующую тему пользователю в зависимости от используемой платформы.
  2. Реализуйте единственную тему, которая использует медиазапрос для обслуживания jQuery Mobile для мобильных пользователей и сетку 1140 для немобильных пользователей.

Второй вариант меня очень интересует: он дает возможность разработать разметку HTML5 один раз .Поскольку jQuery Mobile использует атрибуты data-role вместо атрибута class, представляется возможным иметь унифицированную структуру разметки, которую гораздо проще поддерживать, но которая предлагает совершенно другой UX на основе платформы пользователя.

Есть ли у кого-нибудь в сообществе StackOverflow опыт разработки приложения с использованием 2-го варианта выше (с или без Yii), и не могли бы вы прокомментировать, как это настроить, и было ли оно успешным ... или я мечтаю?!

1 Ответ

3 голосов
/ 02 марта 2012

1) Если вы реализуете Media Queries для создания адаптивного дизайна, начните с версии для настольного компьютера, а затем в Media Query определите мобильную версию.Я бы сделал это, потому что больший процент мобильных браузеров поддерживают медиазапросы, чем настольные браузеры.

Вот ссылка на поддержку браузеров для медиазапросов, обратите внимание, что IE 6-8 - единственные неподдерживаемые браузеры: http://caniuse.com/#feat=css-mediaqueries

Вот несколько отличных документов для медиазапросов: https://developer.mozilla.org/en/CSS/Media_queries

.

2) Возможно, вы захотите использовать другой пользовательский JavaScript дляНастольные / мобильные сайты, так что имейте в виду, что вы захотите определить, какое устройство используется в JavaScript, точно так же, как вы настроили медиазапрос, чтобы CSS и JS соответствовали.Вы можете сделать это, установив CSS для скрытого элемента в Media Query, а затем с помощью jQuery проверьте, имеют ли скрытый элемент свойства, установленные в Media Query CSS:

CSS - 

#hiddenElement {
    display    : none;
    visibility : visible;
}

@media all and (max-device-width: 720px) {
    #hiddenElement {
        visibility : hidden;
    }
}

JS - 

$(function () {
    var desktop = true;
    if ($('#hiddenElement').css('visibility') === 'hidden') {
        desktop = false;
    }

    //now the `desktop` boolean variable is set to `true` for desktop browsers and `false` for mobile
});

.

3) jQuery Mobile позволяет объявлять виджеты с помощью data-attributes, но после инициализации HTML с помощью jQueryМобильный, множество классов и структура HTML добавлены.Вот пример разметки с сайта документации для jQuery Mobile.

This: 

<a href="index.html" data-role="button" data-icon="arrow-l">My button</a>

Превращается в это: 

<a href="index.html" data-role="button" data-icon="arrow-l" data-corners="true" data-shadow="true" data-iconshadow="true" data-inline="false" data-wrapperels="span" class="ui-btn ui-btn-up-c ui-btn-icon-left ui-btn-corner-all ui-shadow ui-btn-up-undefined">
    <span class="ui-btn-inner ui-btn-corner-all ui-corner-top ui-corner-bottom">
        <span class="ui-btn-text">My button</span>
        <span class="ui-icon ui-icon-arrow-l ui-icon-shadow"></span>
    </span>
</a>
...