Question

你好jQuery新手问题。我正在尝试添加基于浏览器视图端口的不同侧边栏。

这是我的剧本：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Viewport Test</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
function reloadPage(width) {
    width = parseInt(width);

    if (width > 1440) {
        $('#aside').load('widepage.php');
    } else if (width >= 1024 && width <= 1440) {
        $('#aside').load('narrowpage.php');
    } 
}

$(function() {
   reloadPage($(this).width());
   $(window).resize(function() {
       reloadPage($(this).width());
   });
});
</script>
</head>

<body>
<div id="wrapper">

    <!-- Here I want to append the external php Script -->

    <div id="content"></div>
</div>
</body>
</html>

我需要做的是：

当页面的其余部分继续加载时，Ajax会加载这些侧边栏。
我不想在<div id="content"></div>

APPEND

我希望附加各种文件中的php脚本而不是输出。
在浏览器调整大小时，只应重新加载附加部分。

我的问题：

我做得对吗？如果不是正确的方法。请解释一下代码插图，因为我对JavaScript完全陌生。

Answer 1

在我看来，你的主要目标是拥有3种不同尺寸的侧边栏。我的印象是你仍然希望他们在内容div之前。您需要在要放置侧边栏的位置放置一个。否则，没有好方法来刷新当前侧边栏并加载新边栏。

我相信要完成您要做的事情，您需要了解当前加载的侧边栏，并且只有在页面调整为其他类别时才更改它。对于这个例子，我们假设第一个侧边栏是0-1023个像素窗口，中间是1024-1599，宽度是1600 +。

$(document).ready(function() {
var curwidth, script, prevclass, newclass;

function reloadBars(width) {
    width = parseInt(width, 10);
    newclass = ""

    if (width < 801 && (curwidth == -1 || curwidth > 800)) {
        newclass = 'bar-0';
        bar = '800.php';
    } else if ((width > 800 && width < 1201) && (curwidth < 800 || curwidth > 1201)) {
        newclass = 'bar-1';
        bar = '1000.php';
    } else if ((width > 1200 && width < 1601) && (curwidth < 1200 || curwidth > 1601)) {
        newclass = 'bar-2';
        bar = '1200.php';
    } else if (width > 1600 && curwidth < 1600) {
        newclass = 'bar-3';
        bar = '1600.php';
    } else {
        return;
    }

    $.ajax({
        type: "POST",
        url: bar,
        data: {},
        success: 
        function(response) {

            $('#aside').html(response);
            $('#aside').addClass(newclass);
            $("#aside").removeClass(prevclass);
            prevclass = newclass;
        },
        error: function(e) {
            alert("UH OH! Error!");
        }
    });
    curwidth = width;
}
prevclass = ""
curwidth = -1;
reloadBars($(this).width());

   $(window).resize(function() {
       reloadBars($(this).width());
   });
});

Answer 2

2）Jquery有一个.before（）函数，用于在元素之前插入：http://api.jquery.com/before/

sidebar = "<p>This is the sidebar</p>"
$("#content").before(sidebar)

3）PHP将由AJAX请求执行（jQuery很容易）

function reloadPage(width) {
    var script

    width = parseInt(width)

    if(width < 1024)
        return
    else if(width < 1440)
        script = 'narrowpage.php'
    else
        script = 'widepage.php'

    $.ajax({
        type: "POST",
        url: script,
        data: {},
        success: function (response) {
            //check to make sure data is OK

            $('#content').before(response)
        },
        error: function (ts) {
            alert("Uh Oh! AJAX failed!")

        }
    })
}

如果reloadPage函数在$（function（）{}）之外，则可能会出现作用域问题，但该函数应该可以正常工作。

使用'type'，您可以像表单提交一样执行GET或POST请求。

echo $_POST["foo"];

将回显'bar'，然后将其附加到内容div之前。

jquery根据视口和浏览器调整大小</div>上的ajax刷新附加<div>

2 个答案: