0

私は自分のウェブサイトのツールバーに取り組んでおり、現在ランダムなボタンを配置しています。ウィンドウのサイズが変更されてボタンが収まらない場合は、別のリストに移動したいと考えています。

コードは次のとおりです。

window.onresize = function() {
    var div = document.getElementById("button_holder");
    var divRight = document.getElementById('button_holder_right');
    var extraButton = document.getElementById('barMoreButton');
    var extraMenu = document.getElementById('extraMenu');
    var i;
    widthOfResizeMenuItems = 0;
    for (i=0;i<div.childNodes.length;i++) {
        var button = div.childNodes[i];
        if( widthOfResizeMenuItems > div.offsetWidth ) {
            button.remove();
            extraMenu.appendChild(button);
            extraButton.style.display = 'inline-block';
            divRight.width = 78;
        }else if( widthOfResizeMenuItems < div.offsetWidth ) {
            if( extraMenu.childNodes.length > 0 ) {
                div.appendChild(extraMenu.childNodes[0]);
            }
            extraButton.style.display = 'none';
            divRight.width = 52;
        }
        widthOfResizeMenuItems = widthOfResizeMenuItems + button.offsetWidth;
    }
    console.log("Count: " + i + " --- Width: " + widthOfResizeMenuItems);
}

バーの構造はこちら

div#srgapi_toolbar
    table
        tr
            td#button_holder
                button (x9)
            td#button_holder_right
                button#barMoreButton
div#extraMenu

ここにデモがあります: http://api.shadowravengames.co.uk/test.php ウィンドウのサイズを変更して、現在何が起こっているかを確認してください。

要素が他のメニューに移動するのではなく、新しい行に折り返されるのはなぜですか?どうすれば修正できますか?

4

1 に答える 1

0

わかりました。2 つの問題があります。

  1. 追加の barMoreButton のサイズ 26 を考慮する必要があります。これにより、ボタン 9 が青いメニューに移動しないという問題が修正されます。
  2. remove() を使用すると、ループが中断されます。
if( widthOfResizeMenuItems + 26 >= div.offsetWidth ) {
  button.remove();
  i = i-1;
  ...
}

i 変数を減らすことで、子要素のループを壊すことはありません。

//今改めて見ると、ボタン4か何かに到達すると順番がおかしくなる。もう少し様子を見て、解決策を考えさせてください。

于 2013-08-23T19:13:38.160 に答える