[英]sliding div with URL content
我正在嘗試創建一個兩列頁面,其中單擊左側的鏈接將導致來自另一個URL(在同一域中)的內容水平向右滑動。
這個小提琴是我所追求的一個很好的例子。
我還無法弄清楚如何使用此腳本加載外部內容。 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;
}
如果您請求的內容不在頁面上,那么最好是添加一個服務器端組件(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);
}
顯然,這是偽代碼,但其基本思想
您可以更改animIn
函數以加載內容:
animIn = function () {
$target.load(URL, function() {
$target.addClass('active').show().css({
left: -($target.width())
}).animate({
left: 0
}, 500);
});
};
只需將URL
替換為實際URL。
更新:這是完整的代碼 :
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();
}
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.