Dojo滑动面板的任何链接?

时间:2012-06-01 07:02:17

标签: dojo

任何人都可以通过我找到Dojo滑动面板的链接帮助我吗?我一直在寻找它,但仍然没有得到它。我有jQuery的滑动面板,我从这个链接获得它:http://web-kreation.com/all/implement-a-nice-clean-jquery-sliding-panel-in-wordpress-27/

1 个答案:

答案 0 :(得分:6)

您可以使用dojo.fx.wipeIn功能。 http://dojotoolkit.org/reference-guide/1.7/dojo/fx/wipeIn.html

因此,如果您创建两个div,一个在另一个之上,则顶部显示display:none,另一个为您单击以滑动面板的位。然后使用dojo.connect将底部面板的单击链接到顶部面板的擦除。

e.g。

// Have your main body content
var mainBody;

// Create top panel
var myPanel = document.createElement("div");

// Set visibility to none
dojo.style(myPanel, "display", "none");

// Create tab to expand your panel (or slide it down)
var expand = document.createElement("div");
expand.innerHTML = "click here to slide down";

mainBody.appendChild(myPanel);      
mainBody.appendChild(expand);

var self = this;

dojo.connect(expand, "onclick", this, slidePanel);

然后您的slidePanel功能会执行以下操作:

// Get reference to your panel
var myPanel;

var wipeArgs = {
    node: myPanel
};

// Then just wipe the panel in or out respectively
if (myPanel.style.display == "none") {
    dojo.fx.wipeIn(wipeArgs).play();
} else {
    dojo.fx.wipeOut(wipeArgs).play();
}