1

いくつかの紹介：
こんにちは、簡単な方法があるかどうか、ユーザーがボタンをクリックしたときに表示される「タブ」の数を知りたいと思いました。

私がこれまでに持っているものの説明：http：
//jsfiddle.net/L7bPc/7/
ここで、jsfiddleで、私が考えているタブの例を見ることができます。幅を広げたり狭めたりすると、多かれ少なかれタブが表示されます。 （「overflow：hidden;」のおかげで残りは消えます）。

質問：
私の質問は、右上隅の赤い四角をクリックすると表示されるタブの数を知る簡単な方法はありますか？

私が達成したいことの説明：
なぜですか？「表示されない」タブのリストを生成しようとするので、後で赤い四角をクリックすると（もちろん適切にスタイルを設定します）。タブのある多くのプログラムと同じように見せたいのですが、タブが多すぎる場合は、ドロップダウンメニューで、残りのタブを展開するために、タブの端に小さな矢印を見つけることができます。表示されているタブの数と表示されていないタブの数を知る方法を尋ねています（ドロップダウンでタブをクリックした後に生成するタブを知っています）。ドロップダウンを作成する方法を尋ねていません。

この部分はphpによって生成され、MySQLデータベースからデータを取得し、それらをcssでタブのようにスタイル設定します（私はjsfiddleでphpを使用せず、単なるhtmlです）。

<div class="tabs">
    <ul>
        <li id=090NCI class='active'><a href='#' class='active'><span class='active'>090NCI</span></a></li>
        <li id=061PPP><a href='#'><span>061PPP</span></a></li>
        <li id=072KWM><a href='#'><span>072KWM</span></a></li>
        <li id=057ALS><a href='#'><span>057ALS</span></a></li>
        <li id=099AKG><a href='#'><span>099AKG</span></a></li>
        <li id=090WPW><a href='#'><span>090WPW</span></a></li>
        <li id=020MSM><a href='#'><span>020MSM</span></a></li>
        <li id=014LSP><a href='#'><span>014LSP</span></a></li>
        <li id=010AAV><a href='#'><span>010AAV</span></a></li>
        <li id=080MKS><a href='#'><span>080MKS</span></a></li>
        <li id=006ALS><a href='#'><span>006ALS</span></a></li>
        <li id=007KSG><a href='#'><span>007KSG</span></a></li>
        <li id=091AOW><a href='#'><span>091AOW</span></a></li>
        <li id=004ALO><a href='#'><span>004ALO</span></a></li>
        <li id=003WWW><a href='#'><span>003WWW</span></a></li>
        <li id=002KSO><a href='#'><span>002KSO</span></a></li>
        <li id=001NWD><a href='#'><span>001NWD</span></a></li>   
    </ul>
    <div style="position: absolute; right:5px; top:26px; background: red; color:red; width:20px; height: 20px;" onclick="dosomething()"></div>
</div>

任意のヒント？解決策は、jQueryとjavascriptの両方で、私にとって大きな違いはないかもしれません。

4

1 に答える 1

3

これを試して：

$("#redbox").click(function() {

    var visibleLis = $("li").filter(function() {
        var offset = $(this).offset();
        return $(document.elementFromPoint(offset.left, offset.top)).closest(this).length > 0;
    });

    alert(visibleLis.length);
});

http://jsfiddle.net/L7bPc/11/

タブを完全に垂直に含むように定義した場合は.tabs、はるかに最適化されたバージョンを使用できます。

$("#redbox").click(function() {

    var boundingBox = $(".tabs")[0].getBoundingClientRect(),
        bbRight = boundingBox.left + boundingBox.width,
        bbBottom = boundingBox.top + boundingBox.height,
        bbLeft = boundingBox.left,
        bbTop = boundingBox.top;

    var visibleLis = $("li").filter(function() {
        var box = this.getBoundingClientRect(),
            left = box.left,
            top = box.top,
            right = box.left + box.width,
            bottom = box.top + box.height;
        return left >= bbLeft && right <= bbRight && top >= bbTop && bottom <= bbBottom;
    });

    alert(visibleLis.length);
});

http://jsfiddle.net/L7bPc/13/

于 2012-12-08T13:16:57.030 に答える