3

Twitter Bootstrap を使用してレスポンシブ Web サイトを構築する場合、タブや折りたたみ (アコーディオン) などの優れた JavaScript コンポーネントを使用できます。ただし、特定のコンポーネントの選択がすべてのデバイスに適しているとは限りません。

私の場合、デスクトップ版ではタブを利用しています。しかし、スマホ版では、タブが3つ以上あると画面サイズが小さくて一列に収まらなくなり使い物にならなくなります。代わりに、モバイル バージョンの場合は、折りたたみが適切な代替手段になります。

私の質問は、そのような変更を実行するベスト プラクティスを明確にすることを目的としています。私は2つの回避策を想像できますが、どちらもかなり醜く、よりクリーンな解決策があるかどうか疑問に思っています:

  1. CSS クラスvisible-desktopで 1つのタブ付きコンテンツを作成し、CSS クラスvisible-phoneで 1 つの折りたたまれたコンテンツを作成します。これには、実際のタブ コンテンツを 2 回配信する必要があるという欠点があり、(私の場合のように) ユーザーが生成した HTML コードが含まれている場合、ユーザーが ID を持つ HTML 要素を入力するとすぐに W3C の無効なコードが発生します。 (この ID はページに 2 回表示されるため)。

  2. JavaScript を介してタブから折りたたみに変更します。これは、a) JavaScript を実行する必要があり、b) 変更が必要なコードが多いため、満足のいく解決策ではありません (ドキュメントのマークアップの違いを参照してください)。

4

1 に答える 1

0

これに対する私のアプローチは、メインリストメニューを携帯電話ディスプレイのドロップダウンに変えることでした。 CSS-Tricks.comはメニューをドロップダウンに変換します

上記のコードに基づいて製品コードを作成し、大型ディスプレイ用のスライダーパネルと携帯電話用のドロップダウンリストとして機能するように大幅に変更しました。

なぜ電話のドロップダウンリストを検討するのですか？携帯電話のディスプレイでは、ドロップダウンメニューリストにより、電話のネイティブスクロールUIがアクティブになります。これは、ネイティブ電話アプリケーションとほぼ同じように表示および実行されます。ドロップダウンリストを利用すると、デザインの高さのコミットメントも大幅に削減されます。

ドロップダウンメニューがアクティブになると、ユーザーは選択したアイテムのリンクに自動的に移動します。

ここでの私の例： 自動リダイレクトでドロップダウンするメニュー

    $(document).ready(function() {
    var sNavFirsLI2 = $(this).find("#gbl_sNav ul").children(":first-child");        
    sNavFirsLI2.each(function(){
               console.log('Outside: '+$(this).html());
    });
});var currentSnav;  sNavAccordion = new Boolean(false);  currentSnav = $("#gbl_sNav").html();

$("#removeAccordion").click(function() {
    if(sNavAccordion == true){
        var tempContents;
            $('#gbl_sNav ul').show();
            $('#gbl_sNav select').remove();
            //set Snav back to false
            sNavAccordion = false;  
    }else{
        alert('Nothing to remove');
    }
});

    $("#enableAccordion").click(function() {        
        if(sNavAccordion == false){
            $("<select />").appendTo("#gbl_sNav");
            $("<option />", {
               "selected": "selected",
               "value"   : "",
               "text"    : "Go to..."
            }).appendTo("#gbl_sNav select");
            $("#gbl_sNav a").each(function() {
             var myli = $(this);
             $("<option />", {
                 "value"   : myli.attr("href"),
                 "text"    : myli.text()
             }).appendTo("#gbl_sNav select");
            });     
        $('#gbl_sNav ul').hide();

            sNavAccordion = true;               
        }else{
            return false;
        }
    });
于 2013-02-11T18:57:50.647 に答える