3

オンデマンドで表示されるボックスをページに実装したいと考えています。ユーザーがボタンを押すと、div が表示されます。

私が達成したい視覚的な例として、jsfiddle (左下隅) のキーボードショートカットボックスを見てください: http://jsfiddle.net/

今、私はこれをどのように行うべきかわかりません:

  • すぐに div を作成し、それを display: none に設定しますが、必要ありません
  • JS経由でdivを追加するスクリプトを書く
  • 外部の .html ファイルからロードするスクリプトを作成する

どのような方法をお勧めしますか?

アップデート

ページがロードされたときに表示されないが、オンデマンドで追加する必要がある 15 個の異なるボックスを取得した場合はどうなりますか? 確かにうまくいきますが、見たくないすべての要素を単純に非表示にすることを「良い習慣」と呼ぶことができますか?

4

3 に答える 3

3

次のように、div を追加しHTMLて css プロパティdisplayをnoneデフォルトで設定し、jquery を使用してクリック時にフェードインします。

 $('#some_button').click(function(){
     $('.hidden_box').fadeIn();
 });

実施例

この作業jsfiddleを試してください

于 2012-12-21T13:37:19.980 に答える
2

更新:最近、質問を修正して、すぐには必要ない 15 ほどの要素について尋ねました。この場合、非常に多くの非即時要素があるため、必要なときにその場で作成することを検討しますが、それらの存在を事前に確認して、何度も再作成することはありません.

ページの読み込み時に要素を読み込むだけです。

<div id="box"></div>

スタイルを設定し、デフォルトで非表示にします:

​#box {
    position: fixed;
    top: 10%; left: 10%;
    width: 80%; height: 80%;
    background: red;
    display: none;
}​

そして、おそらくスペースバーを押して、何らかのイベントでそれを表示するようにロジックを接続します。

var $box = $("#box");

$(document).on({
    keydown: function (event) {
        if (event.which === 32 && $box.is(":not(:visible)"))
            $box.stop().fadeIn();
    },
    keyup: function (event) {
        if (event.which === 32) 
            $box.stop().fadeOut();
    }
});

そして出来上がり：http://jsfiddle.net/GfMsd/

または、jsFiddle が行ったように、別の要素のクリックに基づいてそれを行うこともできます。

$(".toggle").on("click", function (event) {
    $("#box").stop().fadeToggle();
});​

デモ: http://jsfiddle.net/GfMsd/1/

于 2012-12-21T13:39:09.483 に答える
1

ネイティブJSが過小評価されていないことを確認するためだけに、jQueryを使用しない回答;-)

必要なコンテンツを含む を作成し、div最終的に配置したい場所に配置して非表示にします。

<div id="hiddenDiv" style="display:none">Some content here</div>

次に、ボタンにイベント リスナーを追加して、表示を切り替えます。

document.getElementById('showDivButton').addEventListener('click', toggleDiv);
var div = document.getElementById('hiddenDiv');

function toggleDiv(){
    if(div.style.display == 'block') {
        div.style.display = 'none';
    }else{
        div.style.display = 'block';
    }
}
于 2012-12-21T13:38:18.257 に答える