jQuery PageSlide:点击.css功能
jQuery PageSlide: .css function on click
大家好!
我使用这个插件:PageSlide,这是jquery.pageslide的代码.js:
(function($) {
var $body = $("body"),
$pageslide = $("#pageslide");
var
_sliding = false,
_lastCaller;
if ($pageslide.length == 0) {
$pageslide = $("<div />").attr("id", "pageslide").css("display", "none").appendTo($("body"));
}
function
_load(url, useIframe) {
if (url.indexOf("#") === 0) {
$(url).clone(true).appendTo($pageslide.empty()).show();
} else {
if (useIframe) {
var
iframe = $("<iframe
/>").attr({
src: url,
frameborder: 0,
hspace: 0
}).css({
width: "100%",
height: "100%"
});
$pageslide.html(iframe);
} else {
$pageslide.load(url);
}
$pageslide.data("localEl", false);
}
}
function
_start(direction, speed) {
var slideWidth = $pageslide.outerWidth(true),
bodyAnimateIn = {},
slideAnimateIn = {};
if ($pageslide.is(":visible") || _sliding) {
return;
}
_sliding = true;
switch (direction) {
case "left":
$pageslide.css({
left: "auto",
right: "-" + slideWidth + "px"
});
bodyAnimateIn["margin-left"] = "-=" + slideWidth;
slideAnimateIn["right"] = "+=" + slideWidth;
break;
default:
$pageslide.css({
left: "-" + slideWidth + "px",
right: "auto"
});
bodyAnimateIn["margin-left"] = "+=" + slideWidth;
slideAnimateIn["left"] = "+=" + slideWidth;
break;
}
$body.animate(bodyAnimateIn, speed);
$pageslide.show().animate(slideAnimateIn, speed, function() {
_sliding = false;
});
}
$.fn.pageslide = function(options) {
var
$elements = this;
$elements.click(function(e) {
var
$self = $(this),
settings = $.extend({
href: $self.attr("href")
}, options);
e.preventDefault();
e.stopPropagation();
if ($pageslide.is(":visible") && $self[0] == _lastCaller) {
$.pageslide.close();
} else {
$.pageslide(settings);
_lastCaller = $self[0];
}
});
};
$.fn.pageslide.defaults = {
speed: 200,
direction: "right",
modal: false,
iframe: true,
href: null
};
$.pageslide = function(options) {
var
settings = $.extend({}, $.fn.pageslide.defaults, options);
if ($pageslide.is(":visible") && $pageslide.data("direction") != settings.direction) {
$.pageslide.close(function() {
_load(settings.href, settings.iframe);
_start(settings.direction, settings.speed);
});
} else {
_load(settings.href, settings.iframe);
if ($pageslide.is(":hidden")) {
_start(settings.direction, settings.speed);
}
}
$pageslide.data(settings);
};
$.pageslide.close = function(callback) {
var
$pageslide = $("#pageslide"),
slideWidth = $pageslide.outerWidth(true),
speed = $pageslide.data("speed"),
bodyAnimateIn = {},
slideAnimateIn = {};
if ($pageslide.is(":hidden") || _sliding) {
return;
}
_sliding = true;
switch ($pageslide.data("direction")) {
case "left":
bodyAnimateIn["margin-left"] = "+=" + slideWidth;
slideAnimateIn["right"] = "-=" + slideWidth;
break;
default:
bodyAnimateIn["margin-left"] = "-=" + slideWidth;
slideAnimateIn["left"] = "-=" + slideWidth;
break;
}
$pageslide.animate(slideAnimateIn, speed);
$body.animate(bodyAnimateIn, speed, function() {
$pageslide.hide();
_sliding = false;
if (typeof callback != "undefined") {
callback();
}
});
};
$pageslide.click(function(e) {
e.stopPropagation();
});
$(document).bind("click
keyup", function(e) {
if (e.type == "keyup" && e.keyCode != 27) {
return;
}
if ($pageslide.is(":visible") && !$pageslide.data("modal")) {
$.pageslide.close();
}
});
})(jQuery);
我还需要一个函数:当PageSlide处于活动状态时 - 打开左侧菜单 - [内容]div
的宽度更改为600px
,当非活动时,将更改回原始的1200px。
我认为好的代码是:$('#content').css('width', '600px');
,但我不知道把它放在哪里。我对JavaScript了解不多。
谢谢!
看起来 _start() 函数是用来调整 $pageslide 元素的函数。尝试向该函数添加其他更改。
_start(direction, speed) {
var slideWidth = $pageslide.outerWidth(true),
bodyAnimateIn = {},
slideAnimateIn = {},
//may want to declare this somewhere else so its not fetched every time from the dom
$content = $('#content');
if ($pageslide.is(":visible") || _sliding) {
return;
}
_sliding = true;
switch (direction) {
case "left":
$pageslide.css({
left: "auto",
right: "-" + slideWidth + "px"
});
bodyAnimateIn["margin-left"] = "-=" + slideWidth;
slideAnimateIn["right"] = "+=" + slideWidth;
// Looks like the default for direction is set to 'right', so this would be when its closing
$content.css({
width: '1200px'
})
break;
default:
$pageslide.css({
left: "-" + slideWidth + "px",
right: "auto"
});
bodyAnimateIn["margin-left"] = "+=" + slideWidth;
slideAnimateIn["left"] = "+=" + slideWidth;
//this should be when its opening. If not, just switch the two inserted statements.
$content.css({
width: '600px'
})
break;
}
相关文章:
- 网站中非常酷的javascript或CSS功能
- 如何使用CSS或JQuery使整个网页看起来更小(就像Chrome的缩小功能一样)
- 是否有用于CSS浏览器支持新功能的javascript解决方案
- CSS与Jquery、滑块、动画、灯箱..加载时间与功能
- jQuery移动Ajax导航功能和CSS样式
- 是否可以设置一个功能“;联系我们”;页面使用HTML/CSS
- css图片精灵到javascript鼠标功能
- 具有辅助功能的浏览器是否支持CSS或JavaScript
- 选择框在应用 css/javascript 时失去功能
- 具有手动切换功能的 CSS 移动媒体样式
- Css 悬停功能由于 zindex 而不起作用
- 可扩展的 Div,在 CSS 中具有过渡功能
- jQuery PageSlide:点击.css功能
- Javascript / css照片弹出功能放置问题
- 我决定不支持IE7;我现在可以使用哪些 JS/CSS/HTML 功能
- 翻转图像的HTML / CSS / Javascript功能不起作用
- CSS缩小Magento的默认功能不起作用
- 我可以/应该使用什么HTML/CSS/JS库来获得类似的XAML功能
- JQuery按钮启用和禁用CSS功能点击
- 如何使用JavaScript在浏览器中检查特定的CSS功能