1

嗨，一个 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>

我需要做的是：

  1. Ajax 加载这些侧边栏，而页面的其余部分继续加载。

  2. 我不想将它们加载到 div 中，但在之前附加它们<div id="content"></div>

  3. 我希望附加各种文件中的 php 脚本而不是输出。

  4. 在浏览器调整大小时，只有附加的部分应该重新加载。

我的问题：

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

4

2 回答 2

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());
   });
});
于 2013-07-01T22:19:29.633 回答
0

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() { }) 之外，您可能会遇到范围问题，但否则该函数应该可以按您的意愿工作。

使用“类型”，您可以像提交表单一样执行 GET 或 POST 请求。

echo $_POST["foo"];

将回显“bar”，然后将其附加在内容 div 之前。

于 2013-07-01T20:17:36.187 回答