4

私はWeb開発が初めてです........

これを作成するためにMetro UI CSSを使用しました

私は今チャームバーをエミュレートしようとしています。

ユーザーがテーマボタンをクリックしたときに、いくつかのコントロールなどを含むバーを右側に表示する必要があります。バーは、フォーカスを失うと非表示にする必要があります(ユーザーがバーの外側をクリックします)。

<div class="charms">I have also addedを使用してチャーム バーを追加し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)
}   
});

チャームバーのコントロールをクリックすると、バー自体が非表示になるため、このコードは好きではありません。

私がする必要があるのは、ユーザーがボタンをクリックすると表示され、ユーザーが何か他のものをクリックすると非表示になるフローティングバーを作成することだけです........

4

1 に答える 1