我使用的XUI和埃米尔做一个可折叠的面板,但第一次点击需要双击即可今后所有的点击适用于单一的点击罚款。 我需要先点击到单一的点击工作。 我还需要首先隐藏的JavaScript对于那些非JavaScript的用户列表。
任何人都可以看到我在哪里呢?
这里是我已经延长XUI
xui.extend({
togglePanel:function(dur,thePanel)
{
var panel = document.getElementById(thePanel);
var theHeight = document.getElementById(thePanel).scrollHeight;
if(panel.closed){
emile(panel, 'height:'+theHeight+'px',{duration:dur});
panel.closed = false;
}
else{
emile(panel, 'height:0px', {duration:dur});
panel.closed = true;
}
}
});
这是看涨期权和面板的隐藏
x$(window).load(function(e){
emile('item', 'height:0px', {duration:-0});
x$('.panel a.panelItem').click(function(e){
x$().togglePanel(900,'item');})
});
我也曾尝试
x$('#item')setStyle ('height','0px');
隐藏内容。
我已经得到了它。 此外缺口几个渐变功能从埃米尔的叉子
XUI扩展
xui.extend (
{
togglePanel:function(dur,thePanel)
{
if (dur === "slow"){
dur = 1500;
}
else if (dur === "fast"){
dur = 500;
}
var panel = document.getElementById(thePanel);
var theHeight = document.getElementById(thePanel).scrollHeight;
if(x$(this).hasClass('closed')){
emile(panel, 'height:'+theHeight+'px',{duration:dur,easing:bounce, after: function() {
x$(panel).removeClass('closed');
}});
}
else {
emile(panel, 'height:0px', {duration:dur,easing:easeInStrong, after: function() {
x$(panel).addClass('closed');
}});
}
}
});
初始化
x$(window).load(function(e){
x$('#item').addClass('closed');
x$('.panel a.panelItem').click(function(e){
x$('#item').togglePanel('slow','item');})
});
和一些额外的渐变方法https://github.com/ded/emile
function easeOut (pos) {
return Math.sin(pos * Math.PI / 2);
};
function easeOutStrong (pos) {
return (pos == 1) ? 1 : 1 - Math.pow(2, -10 * pos);
};
function easeIn (pos) {
return pos * pos;
};
function easeInStrong(pos) {
return (pos == 0) ? 0 : Math.pow(2, 10 * (pos - 1));
};
function bounce(pos) {
if (pos < (1/2.75)) {
return (7.5625*pos*pos);
} else if (pos < (2/2.75)) {
return (7.5625*(pos-=(1.5/2.75))*pos + .75);
} else if (pos < (2.5/2.75)) {
return (7.5625*(pos-=(2.25/2.75))*pos + .9375);
} else {
return (7.5625*(pos-=(2.625/2.75))*pos + .984375);
}
};
仍然需要改进一下,但就快了。