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

Question

我想创建一个响应式网站.如果浏览器是移动大小的,则应使用iPhone样式列表视图显示内容如果浏览器是桌面大小的,则应使用选项卡显示内容:

这样做的最佳方式是什么？ 我不想为Mobile/Desktop使用单独的文件.我希望它能够做出回应.

---

---

---

以下是我所做的一些研究.

尝试1:纯CSS解决方案.

纯CSS解决方案是最好的,因为CSS提供了媒体查询,可以轻松地在布局之间切换.CSS提供了创建选项卡的方法.但它似乎没有为iPhone风格列表提供方法.(您几乎可以使用手风琴列表伪造它,但这并不会将用户带到像真正的iPhone应用程序那样的单独页面).

尝试2:Jquery解决方案(见小提琴)

• Jquery Mobile提供了一种创建iPhone样式列表视图的简便方法
• Jquery UI提供了一种创建选项卡的简便方法.
• Enquire.js为媒体查询提供了Javascript等价物.

在这个小提琴中,我试图将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="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克隆(见小提琴)

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

我很感激任何有用的,因为我一直在撕扯我的头发找到解决方案!(我知道我已经提出了类似的问题,但我觉得这个新问题不同,足以保证一个新帖子.)

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

Jquery mobile使用标记中的数据属性来使脚本工作.我已经尝试动态应用它们,因此只有当浏览器处于移动大小时才会将它们写入文档.但是,当重新调整浏览器大小时,桌面选项卡仍然会损坏.

Answer 1

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

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

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

超文本标记语言

请参阅小提琴，它太大（内容）无法粘贴到这里:)

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

最后，这些部分的整个构建块在这里处于混乱状态：

演示版

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