jquery - 使用 Metro UI CSS 的 super 按钮栏

Question

我是网络开发的新手.........

我用过Metro UI CSS创建this

我现在正在尝试模拟 Charms Bar。

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

Charms 栏是使用 <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)
}   
});

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

我需要做的就是创建一个 float 条，当用户点击一个按钮时可见，当用户点击其他东西时隐藏......

Answer 1

你是不是在做这样的事情:

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

See DEMO

将鼠标移至窗口右侧。