使用Metro UI CSS的Charms栏

Question

公司名称:上海市发布时间:2009-7-11

我已经使用Metro UI CSS创建了this

我现在正在尝试模仿一个魅力吧。

我希望当用户点击主题按钮时，应该在右边显示一个栏，其中包含一些控件等。当失去焦点时，栏应该隐藏(用户在栏外单击)。

Charm栏是使用<div class="charms">添加的，我还添加了style="display:none;"，这样在启动时就看不到这个栏了。

然后，当用户选择主题按钮或文本时，我使用以下代码来显示它

$(document).click(function(event) 
{
var $target = $(event.target);
var target = event.target;

if (!target.id.indexOf("theme")) //if the target id contains "theme" then show charms bar
{
    $("div .charms").fadeIn(600)
}

else
{
    if (target.id != "charms")  //if the charms bar itseff is NOT clicked
        $("div .charms").fadeOut(600)
}   
});

我不喜欢这段代码，因为当我单击charms栏中的控件时，它会隐藏栏本身。

我需要做的就是创建一个浮动栏，当用户点击一个按钮时，它是可见的，当用户点击其他东西时，它会隐藏起来。

Answer 1

你是在说，像这样的东西：

Use Event Like mousemove : to populate Charms bar see below :

See DEMO

向右移动鼠标到窗口。