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 )。