Question

我想知道并尝试这样做，一旦用户点击我的菜单中的链接，页面就会从页面顶部进入，垂直滑动。 EG;点击链接＆gt;新页面很好地（可能是缓和）从顶部框架到位。

我知道jQuery可以使用.slide，但到目前为止我没有运气。

我正在尝试在Wordpress网站上执行此操作。

有什么建议吗？

从原始问题产生： Getting page content via wrapper in WP to slide in

Answer 1

这是一个快速的，几乎完全没有代码的解释，说明我是如何在我们的某个网站上做到的......

需要jQuery，基本的ajaxing和自定义模板。

对于wordpress，你需要创建一个ajax处理程序来查询你的帖子，页面或者你正在加载的任何内容。你首先要创建一个新页面并将其命名为ajax_handler或任何你会发现有用的东西。然后，您将该页面设为私有，以便它不会显示在您的菜单中。

然后，您需要创建一个自定义处理程序，在这种情况下，它只是一个自定义模板。为此，您可以复制page.php并将其重命名为ajax_handler.php，然后添加标准模板注释，以便它将显示在您的模板列表中并删除特定于page.php文件的任何内容 - 基本上清空文件你不要在此时拨打任何你不想要的东西，但要保留基本的wp直接电话规定。

然后将该模板分配给新页面。

在该页面中，您可以制作一个简单的声明，如...

if(isset($_GET['request']))
{
    switch($_GET['request'])
    {
        case "article":
            // run the wp query to fetch whatever it is you're trying to load in

            die(json_encode(array("title" => "test", "body" => "sample content")));

            // obviously you would encode the results from the query
        break;
        default:

        break;
    }
}

然后在你的网站上你会有一个jquery监听器或事件来进行ajax调用......

$(document).ready(function(){
    $('#link').on('click', function(){
        $.ajax({
            'url': 'http://www.yourdomain.com/ajax_handler', //whatever your permalink to that new page is
            'type': 'get',
            'data': {id:'1', request: 'article'}, //whatever the id is you want. You can fetch this any number of ways so I assume you know how to do it
            'dataType': 'json',
            'success': function(data){
                $('#slider_div h1').html(data.title);
                $('#slider_div p').html(data.body);
                $('#slider_div').animate({top: '0%'}, 1000);
            }
        });
    });
});

最后你的html会有一个简单的div，它只是用基本的css推到页面上面......

<div id="slider_div">
    <h1>title to replace</h1>
    <p>body text to replace</p>
</div>

和css：

#slider_div{
    width:100%;
    height:100%;
    background:#fff;
    position:absolute;
    z-index:999;
    top:-100%;
}

这个答案假设您对自己在做什么有所了解。我没有测试过它，但我实际上帮助了今天做同样事情的人。 html和css可能会有所不同，但概念仍然相同。希望它有所帮助。

通过垂直向下滑动来加载页面

1 个答案: