jquery – 使用Metro UI CSS的Charms栏

2023年4月13日 175次阅读

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

我用Metro UI CSS创建了this

我现在正试图效仿Charms Bar.

我希望当用户点击主题按钮时,右边会显示一个条形,其中包含一些控件等.条形图应该在失去焦点时隐藏(用户在条形图外部点击).

使用< div class =“charms”>添加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)
}   
});

我不喜欢这段代码,因为当我点击超级按钮栏中的控件时,它会隐藏栏本身.

我需要做的就是创建一个浮动条,在用户单击按钮时可见,并在用户单击其他内容时隐藏…….

最佳答案 你正在接受,像这样：

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

See DEMO

将鼠标移动到右侧窗口.

点赞