jquery - 如何在两个基于 Jquery 的布局之间切换(使用桌面和移动设备时)

Question

我想创建一个响应式网站。 如果浏览器是移动大小的，则内容应以 iPhone 样式 ListView 显示 如果浏览器是桌面大小的，则内容应使用选项卡显示:

执行此操作的最佳方法是什么？ 我不想为移动/桌面使用单独的文件。我希望它具有响应能力。

<小时/> <小时/> <小时/>

这是我所做的一些研究。

尝试 1:纯 CSS 解决方案。

纯 CSS 解决方案将是最好的，因为 CSS 提供媒体查询，可以轻松在布局之间切换。 CSS offers methods for creating tabs 。但它似乎没有提供 iPhone 风格列表的方法。 (您几乎可以使用 accordion list 来伪造它，但这不会像真正的 iPhone 应用程序那样将用户带到单独的页面)。

尝试 2:Jquery 解决方案 ( see Fiddle )

• Jquery Mobile提供了一种简单的方法来创建 iPhone style list views
• Jquery UI提供了一种简单的方法来创建 tabs .
• Enquire.js为媒体查询提供等效的 Javascript。

In this fiddle ，我尝试过将 Jquery Mobile 和 Jquery Ui 结合起来。 Enquire.Js用于根据屏幕调用必要的库。

当一个库被调用时，它会改变 dom 结构。因此，不需要的库必须被删除，否则如果用户调整浏览器大小(即在移动桌面之间切换)，未使用的库将崩溃，导致调用的库发生冲突。

在我的 fiddle 中，我尝试这样做，但它似乎不起作用:

$(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="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />');    
     $('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="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />');        
     $('head').append('<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"><\/script>');    
    $("#tabs").tabs();

    }).listen();

});

即使删除了未使用的库，也会导致新库发生冲突。 此外，在调用任何布局之前，您必须重新调整浏览器的大小。如果用户不重新调整浏览器大小，内容将没有样式。

尝试 3:Dom 克隆 ( see Fiddle )

此尝试与尝试 2 类似，只不过在页面加载时它将 DOM 存储在变量中。然后，当用户重新调整浏览器大小时，现有 DOM 会被存储的 DOM 替换。我遵循了方法大纲here ，但似乎不起作用。 dom 只是被删除而不是被替换。

如果有任何帮助，我将不胜感激，因为我一直在努力寻找解决方案! (我知道我已经问过与此类似的问题，但我觉得这个新问题足够不同，值得发表新帖子。)

尝试 4:动态分配数据属性

Jquery mobile 使用标记中的数据属性来使脚本正常工作。我尝试过动态应用这些，因此仅当浏览器处于移动尺寸时它们才会写入文档。然而，当浏览器调整大小时，桌面选项卡仍然损坏。

Answer 1

我认为没有必要在这里重新发明轮子。响应式设计已经存在很长一段时间了，并且已经席卷了 Web 开发。也就是说，我建议您可以使用任何一个。响应式框架作品可以在你喜欢的地方工作。我个人最喜欢并且建议使用的是 Twitter Bootstrap 框架。当您熟悉了它们的工作原理后，它就会变得非常智能、重量轻且易于使用。您不必只担心 iPhone 和桌面版。 Twitter Bootstrap 也适用于其他设备，例如表格等。

现在直接回答您的问题，因为您想在移动设备和桌面设备上显示相同的选项卡式内容，而不需要两个单独的 html 文件。以下是我为您提供的示例演示。

我有一个包含所有内容的简单 html 文件，它使用 twitter bootstrap 作为响应式框架。

HTML

请参阅 fiddle ，它太大(内容)无法粘贴到此处:)

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');
});

最后，这些部分的整个构建 block 就在这里:

DEMO

全屏结果是 Here ，调整浏览器大小并查看内容的行为方式和实现的响应能力。