滑动div与URL内容

我想创建一个双列页面，其中点击左侧的链接将导致从另一个URL（在同一个域）的内容向右侧水平滑动。滑动div与URL内容

This fiddle是我所瞄准的一个很好的例子。

我无法弄清楚的是如何使用这个脚本加载外部内容。 jQuery的.load(url);似乎是实现此目标的理想方式，但我无法使用上面提到的jQuery中显示的工作。

有谁知道这是否可以完成，或者如果有更好的方法来实现相同的效果？

代码从下面的小提琴。

HTML：

<div id="left"> 
    <a href="#target1" class="panel">Target 1</a><br/> 
    <a href="#target2" class="panel">Target 2</a><br/> 
    <a href="#target3" class="panel">Target 3</a><br/> 
</div> 

<div id="right"> 
    <div class="panel" id="target1" style="background:green">Target 1</div> 
    <div class="panel" id="target2" style="background:red">Target 2</div> 
    <div class="panel" id="target3" style="background:yellow">Target 3</div> 
</div>

脚本：

jQuery(function($) { 
    $('a.panel').click(function() { 
     var $target = $($(this).attr('href')), 
      $other = $target.siblings('.active'), 
      animIn = function() { 
       $target.addClass('active').show().css({ 
        left: -($target.width()) 
       }).animate({ 
        left: 0 
       }, 500); 
      }; 

     if (!$target.hasClass('active') && $other.length > 0) { 
      $other.each(function(index, self) { 
       var $this = $(this); 
       $this.removeClass('active').animate({ 
        left: -$this.width() 
       }, 500, animIn); 
      }); 
     } else if (!$target.hasClass('active')) { 
      animIn(); 
     } 
    }); 

});

CSS：

#left, #right { 
    position: relative; 
    float: left; 
    margin: 0 5px 0 0; 
    border: 1px solid black; 
    width: 200px; 
    height: 300px; 
    overflow: hidden; 
} 

div.panel { 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    display: none; 
}

来源

2013-04-09 cchrislawson

如在文档可见，[**负载（）**]（http://api.jquery.com/load/）允许用户指定一个回调函数在load（）完成后执行。将'load（）'调用添加到'$（'a.panel'）。click（）'事件中。 'load（）'然后将内容加载到你的目标'div'中，并且在你的回调函数中，你在'div'上开始滑动效果。 – Nope 2013-04-09 23:50:10

您可以更改animIn函数加载内容：

animIn = function() { 
    $target.load(URL, function() { 
     $target.addClass('active').show().css({ 
      left: -($target.width()) 
     }).animate({ 
      left: 0 
     }, 500); 
    }); 
};

只需将URL替换为实际的URL即可。

更新：这是the full code：

jQuery(function($) { 

$('a.panel').click(function() { 
    var $target = $($(this).attr('href')), 
     $other = $target.siblings('.active'), 
     animIn = function() { 
      $target.load('/echo/html/', {delay:0.5,html:$target.text()}, function() { 
       $target.addClass('active').show().css({ 
        left: -($target.width()) 
       }).animate({ 
        left: 0 
       }, 500); 
      }); 
     }; 

    if (!$target.hasClass('active') && $other.length > 0) { 
     $other.each(function(index, self) { 
      var $this = $(this); 
      $this.removeClass('active').animate({ 
       left: -$this.width() 
      }, 500, animIn); 
     }); 
    } else if (!$target.hasClass('active')) { 
     animIn(); 
    } 
}); 

});

来源

2013-04-09 23:54:52

感谢您的回答。这看起来像是正确的方向，但我不确定如何根据点击哪个链接在右列中加载不同的URL。例如：单击“目标1”将在右列中加载“target1.htm”，而单击“目标2”则会加载target2.htm。 – cchrislawson 2013-04-10 09:15:01

那么，你已经有'$ target'了。你可以做'$ target.load（$ target +'。html'，function（）{...'或类似的东西 – 2013-04-10 10:13:24

也许我应该提到我仍然是一个初学jQuery的人。 [小提琴]（http://jsfiddle.net/cchrislawson/N43Qt/12/）但是无论我尝试什么，链接仍然在浏览器中打开，而不是被加载到滑动div。 – cchrislawson 2013-04-10 10:56:31

如果您要求的内容，是不是已经在页面上，你最好的选择是添加一个服务器端组件（php，ruby等），您可以请求第二部分内容并让服务器将其发回。

即

$("#target1).click(function(){ 
$.ajax({ 
url: "your-script.php", 
data: {target: "send-target-one-please"}, 
success: function(){ 
//append your second piece of content here 
} 
}); 
});

然后在您的脚本（PHP）：

function someFunction(){ 
//get your content here 
$myContent = file_get_contents('../path/to/my/file'); 
echo json_encode($myContent); 
}

显然，这是伪代码，但它的总体思路

来源

2013-04-09 23:46:27 Brad

滑动div与URL内容

回答

相关问题