当前位置：文江博客话题详情

html 中的最小化侧面板

发布于 2024-10-30 13:50:15 字数 233 浏览 3 评论 0原文

我正在寻找一个简单的 javascript 来创建侧面板，并在执行某些操作后隐藏（例如，单击某些区域后）。类似这个示例但是正如示例所示，从左侧出现而不是从上到下出现。如果有任何帮助，我们将不胜感激:)

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

花伊自在美 2024-11-06 13:50:15

你有两个选择。您可以使用 JQuery 或 scriptaculous 来执行此操作。互联网上有很多示例和教程，或者您可以简单地使用 java 脚本来实现。
首先下载 émile 这是一个非常简单的javascript动画框架。

由于您没有提供任何 HTML 标记，我假设您有类似的内容。

<div id="side-panel">panel content..</div>
<div id="content">main content..</div>

假设您的侧面板元素的 CSS 样式为 width:200px。好的，现在在某处放置一个按钮并为其分配一个单击事件。比如onclick="togglePanel()"

下面是togglePanel函数的内容：

function togglePanel(){
    var panel = document.getElementById('side-panel');
    if(!panel.__closed){
        emile(panel, 'width:0px');
        panel.__closed = true;
    }else{
        emile(panel, 'width:200px');
        panel.__closed = false;
    }
}

如果你查看emile框架的文档，你可以做很多其他很酷的事情。

You have 2 options. You can either use JQuery or scriptaculous to do this. There are plenty of examples and tutorials on the internet or you can simply use java script to this.
First download émile It's a very simple javascript animation framework.

Since you didn't provide any HTML markup, I'm assuming you have something like this.

<div id="side-panel">panel content..</div>
<div id="content">main content..</div>

and let's say your side-panel element has a CSS style of width:200px. Ok, now place a button somewhere and assign it a click event. Such as onclick="togglePanel()"

Here is the content of the togglePanel function:

function togglePanel(){
    var panel = document.getElementById('side-panel');
    if(!panel.__closed){
        emile(panel, 'width:0px');
        panel.__closed = true;
    }else{
        emile(panel, 'width:200px');
        panel.__closed = false;
    }
}

If you check the documentation of the emile framework you can do lot's of other cool things.

回复收藏 0 原文