Как переключаться между двумя макетами на основе JQuery (при использовании настольных компьютеров и мобильных устройств)

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

enter image description here

Каков наилучший способ сделать это? Я не хочу использовать отдельные файлы для Mobile/Desktop. Я хочу, чтобы он был отзывчивым.




Вот некоторые из моих исследований.

Попытка 1: чистое решение для CSS.

Чистое решение CSS было бы лучшим, так как CSS предлагает медиа-запросы, что позволяет легко переключаться между макетами. CSS предлагает методы для создания вкладок. Но, похоже, он не предлагает метод для списка стилей iPhone. (Вы можете почти подделать его с помощью списка аккордеона, но это не приведет к тому, что пользователь будет на отдельной странице, например, в истинном приложении для iPhone).

Попытка 2: Решение JQuery (см. Fiddle)

В этой скрипте я попытался объединить JQuery Mobile и JQuery Ui. Enquire.Js используется для вызова необходимой библиотеки в зависимости от экрана.

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

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

$(document).ready(function() {

        enquire.register("screen and (max-width: 600px)", function() {
    $('script[src~="jquery-ui.js"]').remove();
    $('link[rel=stylesheet][href~="jquery-ui.css"]').remove();    
     $('head').append('<link rel="stylesheet" href="#" onclick="location.href='http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css'; return false;" />');    
     $('head').append('<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"><\/script>');   
        $("#tabs").tabs("destroy");            
    }).listen();


       enquire.register("screen and (min-width: 601px)", function() {
    $('script[src~="jquery.mobile-1.0a3.min.js"]').remove();
    $('link[rel=stylesheet][href~="jquery.mobile-1.0a3.min.css"]').remove();    
    $('head').append('<link rel="stylesheet" href="#" onclick="location.href='http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css'; return false;" />');        
     $('head').append('<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"><\/script>');    
    $("#tabs").tabs();

    }).listen();

});

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

Попытка 3: клонирование объектов (см. Fiddle)

Эта попытка аналогична попытке 2, за исключением загрузки страницы, она хранит DOM в переменной. Затем, когда пользователь изменяет размер браузера, существующий DOM заменяется на сохраненную DOM. Я выполнил схему здесь, но, похоже, она не работает. Домен просто удаляется вместо замены.

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

Попытка 4: Динамическое присвоение атрибутов данных

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

Ответ 1

Я не думаю, что здесь нужно изобретать колесо. Отзывчивый дизайн существует довольно долгое время, и он уже взломал веб-разработку. Тем не менее, я бы предложил, чтобы вы могли использовать любой из них. Реагирующие каркасные работы там работают. Мой личный фаворит, и я бы предложил использовать рамочную работу Twitter Bootstrap. Это невероятно умный легкий вес и прост в использовании, когда вы получаете зависание в отношении того, как они работают. Вам не нужно беспокоиться о iPhone и Desktop. Twitter Bootstrap обслуживает другие устройства, а также таблицы et al.

Теперь мы перейдем непосредственно к вашему вопросу, так как вы хотите показать тот же вкладный контент как на Mobile, так и на рабочем столе, без двух отдельных html файлов. Ниже приводится то, что я предложил вам в качестве образца демо.

У меня есть простой html файл со всем содержимым. Он использовал twitter bootstrap в качестве реагирующей работы фрейма.

HTML

Пожалуйста, см. скрипку. Это слишком большое (содержимое), которое нужно вставить здесь:)

CSS

За исключением загрузки bootstrap.css и bootstrap-responsive.css, мне нужен мой собственный CSS, чтобы он соответствовал макету моей страницы.

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

@media  (max-width:480px) {
   // Custom for device that has width 480px;

}

Теперь iPhone имеет ширину 480 пикселей для макета, и когда устройство, на котором просматривается моя страница, я хочу стилизовать свои элементы в соответствии с экраном 480 пикселей.

Вот пользовательский CSS для страницы:

.container {
    margin-top: 10px;
}
.ora, .ban, .man{display:none;}
.fruit-content{width:100%;}
li{display:inline-block;width:24%;text-align:center;border-bottom:1px solid #fff;background: #C0C;}
ul.upperul{margin:0 0 0 0px;width:103%;}
.custom-row{border:1px solid green;}
.selected{background: #c0c0c0;}
@media  (max-width:480px) {
    li{display: block;width: 100%;text-align: left;}
    .custom-row{border:1px solid #000000;}
    ul.upperul{margin-left: 0px;width:100%;}

}

JS

Теперь идет функциональная часть о переключении содержимого с вкладками. Я использовал jQuery с несколькими строками кода для установки содержимого в вкладке "Мэннер":

$(function() {
    $("li").live("click" , function() {
     $(this).css("background","#c0c0c0").siblings().css("background","#C0C");
     $(".des").hide().eq($(this).index()).show();
    })
    .eq(0).addClass('selected');
});

Наконец, весь строительный блок этих кусков находится здесь в скрипке:

DEMO

Полноэкранный результат Здесь, измените размер вашего браузера и посмотрите, как ведет себя контент и его отзывчивость.

Ответ 2

Я бы определенно пошел на Attemp 1 и попытался смоделировать "отдельную страницу". В этом случае он намного более легкий и гибкий.

Attemp 2 и 3 имеют слишком много накладных расходов, по моему мнению.

Несколько тысяч на UX

С точки зрения UX я бы сказал, что нехорошо менять концепцию навигации так, как вы показываете выше. Пользователи могут запутаться при изменении размера окна своего браузера.