4

Ok、

リストにフィルターと並べ替えを適用するための Twitter スタイルのコントロール パネルを作成しました。そのコードは次のようになります。

<div id="drawer">
    <div id="orderDrawer" class="subDrawer" >
    <div class="closeDrawer clearfix ui-icon ui-icon-closethick">close</div>
    <h4>sorteer</h4>                    

    <div id="orderPanel">    
     <!--some content-->
    </div>
    </div>
    <div id="filterDrawer" class="subDrawer" >
    <div class="closeDrawer clearfix ui-icon ui-icon-closethick">close</div>
    <h4>Filters</h4>                    

    <div id="filterPanel">
    <!-- some content -->
    </div>
    <div id="filterButtonBar" class="drawerButtons">
    <button id='applyFilter' name='applyFilter'>Apply</button>
    </div>
    </div>
</div>

これは、次の JS コードと連携して機能します。

        $("#orderPanelButton").click( function(){
            if( $(".subDrawer[id!=orderDrawer]").is(":visible") ) {
                $("#drawer").slideUp( function() {
                    $(".subDrawer").hide();
                    $("#orderDrawer").show();
                    $("#drawer").slideDown();   
                });
            } else {
                $(".subDrawer").hide();
                $("#orderDrawer").show();
                $("#drawer").slideToggle();
            }
        });


        $("#filterPanelButton").click( function(){
            if( $(".subDrawer[id!=filterDrawer]").is(":visible") ) {
                $("#drawer").slideUp( function() {
                    $(".subDrawer").hide();
                    $("#filterDrawer").show();
                    $("#drawer").slideDown();   
                });
            } else {
                $(".subDrawer").hide();
                $("#filterDrawer").show();
                $("#drawer").slideToggle();
            }
        });

最後に、jQuery UI ボタン​​を使用してボタンを形成します。

$("#applyFilter").click(function(){
                    $("#filterForm").submit();
                 });
$("[name='applyFilter']").button({icons: {
            primary:'ui-icon-arrowreturnthick-1-e'}});

これは、テスト済みのすべてのブラウザー (FF、chrome、IE8) でうまく機能しますが、IE7 では機能しません。そこで、#drawer のコンテンツを必要な hides と slideToggles で「filter」から「order」に変更すると、applyFilter ボタンの空のゴーストが表示されます。ホバーすると消えるゴースト。

なぜこれが起こるのか、IE7 のコードでこの厄介な小さなバグを取り除く方法を知っている人はいますか?

[2010 年 7 月 22 日更新] 一時的な解決策を見つけましたが、もう少しきちんとした解決策を見つけたいと思っています。PHP による MSIE 7.0 検出に基づいて、次の JS を追加しました。

$(".subDrawer[id!=' . $drawer . 'Drawer]").find("button").each(function(){
   $(this).css("display","none");
});

$(".subDrawer[id=' . $drawer . 'Drawer]").find("button").each(function(){
    $(this).css("display","");
});

$drawer = subDrawer ID の最初の部分 (filter / order )。

4

1 に答える 1

1

ここで説明されている理由の部分については、すでに少し触れています: Why does jQuery show/hide use display:none instead of visibility:hidden?

また、「理由」の一部は、IE7 の非標準 CSS 実装/解釈 (別名バグ) によるものだと思います。

修正の概要は次のとおりだと思います: jQuery を使用している場合の Internet Explorer 7 でのフェージングの問題

および http://jquery-howto.blogspot.com/2009/02/font-cleartype-problems-with-fadein-and.html

于 2010-08-20T19:03:10.790 に答える