2

jQueryUI タブを使用しており、各タブに UI 要素を追加して、ユーザーがタブに関する情報を編集したり、タブを削除したりできるようにする必要があります。

特定のタブで使用するマークアップは<li>次のようになります。

<li>
    <div style="background-color:Red;"> <-- Red to see what's happening -->
        <a href="#tabs-1"><span>Tab One</span></a>
        <div style="text-align:right; margin-right:3px;">
            <div><span id="editTab-1">edit</span></div>
            <div><span id="delTab-1">X</span></div>
        </div>            
    </div>
</li>

これは、IEで期待どおりにレンダリングされます

 ______________________________
|                          Edit|
|      Tab One                 |
|___________________________X__|

ただし、Chrome または FireFox では適切にレンダリングされません (タブは「Tab One」テキストに対して十分な幅しかなく、「Edit」/「X」はほとんどがタブの「下」にあります (Z-Index が低いようです)。

私の目標を達成するための互換性のある方法は何ですか?

4

2 に答える 2

2

IE でテストしていないため、これが意図したものかどうかはわかりませんが、これは Chrome と FF で機能します。

<div id="tabs">
    <ul style="cursor:pointer">    
        <li>
            <a href="#tabs-1">
                <div style="float: left; margin-right: 20px;">Tab One</div>
                <div style="float: right; text-align:right;">
                    <div id="editTab-1">edit</div>
                    <div id="delTab-1">X</div>
                </div>  
            </a>
        </li>   
        <li>
            <a href="#tabs-2">
                <div style="float: left; margin-right: 20px;">Tab Two</div>
                <div style="float: right; text-align:right;">
                    <div id="editTab-2">edit</div>
                    <div id="delTab-2">X</div>
                </div>  
            </a>
        </li>   
    </ul>        

    <div id="tabs-1" class="tabPane">Tab One Content</div>  
    <div id="tabs-2" class="tabPane">Tab Two Content</div>    
</div>

動作中の jsFiddle を参照してください

クリックを動的に処理したい場合は、次を使用できます。

var $tabs = $("#tabs").tabs();

$tabs.find("a div[id]").on("click", function() {

    var id = $(this).attr("id"),
        idTab = parseInt(id.substring(id.length - 1)),            
        isEdit = id.indexOf("edit") > -1,
        isDelete = id.indexOf("del") > -1,        
        index = $tabs.tabs('option', 'selected');

    if (index + 1 === idTab) {
        if (isEdit) { 
            console.log("Edit Tab " + (index+1)); 
            //however you want to edit here
        }

        if (isDelete) { 
            console.log("Delete Tab " + (index+1)); 
            $tabs.tabs("remove", index);
        }
    }

}).css("cursor", "pointer");​

動作中の jsFiddle を参照してください

于 2012-04-06T21:42:12.390 に答える
2

この問題は、jQueryUI CSS で設計されているように、タブ<li>と内部がフローティング要素であるという事実に起因すると思います。<a>

技術的な部分は、この引用で最もよく要約できます ( http://css.maxdesign.com.au/floatutorial/introduction.htmから)

幅が設定されていない場合、結果は予測不能になる可能性があります。理論的には、幅が定義されていない浮動要素は、その中で最も幅の広い要素に縮小する必要があります。これは単語、文、または 1 文字である可能性があり、結果はブラウザーによって異なる場合があります。

したがって、赤<div>は最も幅の広い要素 ( <a>. IE と Firefox/Chrome は単に動作が異なり、仕様の解釈が異なるだけです。正直なところ、Firefox と Chrome は似ており、IE にはフロート バグの長い歴史があるという事実は、ここでは Mozilla/Google に味方しますが、IE がこのインスタンスでより適切に動作しているように見えることは理解できます。

red に width を設定するだけで問題を解決できます<div>。ただし、マークアップはもう少しきれいにすることもできます。たとえば、次のようになります。

<li style="background-color:red;width:150px">
    <a href="#tabs-1">Tab One</a>
    <div id="editTab-1" style="text-align:right;margin-right:3px">edit
        <p id="delTab-1">X</p>
    </div>
</li>

同じ結果が得られます。

于 2012-04-06T20:42:01.773 に答える