無料ブログ「rentafree.net」の管理人ブログ

ハイブリッド・テンプレートを修正しました

新しく作ったカラム数可変のハイブリッドテンプレートですが、
タブ操作で移動済みの要素をresizeイベント時に戻していましたが、
開いている状態の要素を移動するのは問題があったので開いているタブは除外していましたが、
resizeイベント時ではなくMediaQueryListで処理するように変更しました。

これにより、MediaQueryList対応ブラウザでは1カラムでタブを操作してから2カラム以上に戻しても、
全ての要素が正常な位置に表示されるようになりました。

ただし、タブの操作状態は変更しないので、更に1カラムに戻した場合にタブが開かれた状態で要素が閉じている状態になる可能性があります。
この場合は、再度タブを閉じてから開けば表示されます。

また、IE9がMedia Queriesに対応していますがMediaQueryListには非対応なので、
IE9では1カラムでタブを操作してから2カラム以上に戻した場合、
操作済みのタブの要素は全て異常な位置に表示されます。
IE10は対応です。

公式JavaScriptのタブAPIを修正しました

Wikiの方にも公式JavaScriptを用意して簡単にタブUIを作れるようになりましたが、
タブグループが複数ある場合でも別のタブを開いた際に、すでに開いているタブが閉じられる仕様でしたが、
別のタブグループのタブは閉じられるべきではないので修正しました。

ブログの方も同じ修正をしています。

タブグループは、タブAPIの第4引数の移動先で確認し、
開いているタブを移動先単位で別々に記憶して、
同じ移動先のタブが開かれた場合のみ既に開いているタブを閉じます。
第4引数が省略されている場合は全て同じタブグループとみなされます。

互換性には問題がないはずです。