2

免責事項：私はWeb開発に不慣れです。

シナリオ：CodeIgniterを使用してイベントベースのカレンダーを作成しています。デスクトップ/タブレットサイズのウィンドウでうまく機能し、ZurbのFoundation2.0を使用してモバイルバージョンを作成しました。見た目は素晴らしいですが、私が直面している問題があります。

問題：モバイルバージョンでは、カレンダーが生成されるときに、モバイルバージョンで<ul>（デスクトップバージョンでイベントを表示する）を非表示にする必要があります。次に、 s（カレンダーの日付番号）が選択/クリックされた<ul>ときなどにsを呼び出すことができる必要があります。day_listing

カレンダークラスが日付とそのイベントを生成する方法は次のとおりです。

<td>
   <span class="day_listing">7</span>
      <ul class="event_list">
         <li class="event_type" id="26">Event 1</li>
         <li class="event_type" id="27">Event 2</li>
         <li class="event_type" id="28">Event 3</li>
         <li class="event_type" id="29">Event 4</li>
         <li class="event_type" id="30">Event 5</li>
      </ul>
</td>

これが私が使用しようとしているコードです：

{cal_cell_content}
   <span class="day_listing">{day}</span><ul class="event_list">{content}</ul>
{/cal_cell_content}

{cal_cell_content_today}
   <span class="today_day_listing">{day}</span><ul class="event_list">{content}</ul>
{/cal_cell_content_today}

注：これは、作業する必要があるものです。

質問<ul>：カレンダークラスの生成時にを適切に非表示にし、選択/クリックなどのときに呼び出すために、どのメソッドを使用する必要がありますか（CSS / JavaScript / PHPなど） 。でday_listing？

本当にありがとうございました！以下は、私が話していることを理解するのに問題がある場合に参照できる、私が使用しているリソースです。

4

2 に答える 2

1

Foundation mobile.css（私が見つけたfoundation.cssはありません）はクラスとセットdisplay:block!importantになっています。hide-on-phonesulが実際には非表示になっていない可能性がありますが、デフォルトの表示可能領域に表示されていないページの一部にオーバーフローしている可能性があります（これがサイズ変更時に表示される理由です）。

それはさておき、あなたが何を望んでいるのかは明確ではありません。質問の早い段階で機能していると述べてから、機能していないと述べます...いつものように、コードをもっと見ると役に立ちます。

ulを適切に非表示にするには、jsを使用します。 

document.getElementById('ulID').style.display="none"

あなたはそのURLにアクセスすることができます

document.getElementById('ulID').href

jQueryを使用すると、このような作業の一部が簡単になります。調べる価値があるかもしれません。

編集：

hide-on-phonesだから、これはまだ私を混乱させています：あなたのulにはクラスがありません。それは財団によって設定されていますか？

また、イベントを非表示にして、その日がクリックされたときに表示させようとしていますか？例えば

<td>
   <span class="day_listing">7</span>
      <ul class="event_list">
         <li class="event_type" id="26">Event 1</li>
         <li class="event_type" id="27">Event 2</li>
         <li class="event_type" id="28">Event 3</li>
         <li class="event_type" id="29">Event 4</li>
         <li class="event_type" id="30">Event 5</li>
      </ul>
</td>

イベントはデフォルトで非表示になっているので、「7」をクリックすると表示されますか？それが本当に必要な場合は、カレンダーによって生成された既存のマークアップを使用したjQueryソリューションの例：

（余談ですが、jQueryが他のライブラリに干渉しないよう に、おそらくnoConflictを使用することをお勧めします）

function itsMobile(){
    jQuery('.event_list').hide();
    jQuery('.day_listing').click(function(){
        jQuery(this).next('ul').toggle();
    });
}

jQuery(document).ready(function(){
    if(navigator.userAgent.match(/Android/i) ||
       navigator.userAgent.match(/webOS/i) ||
       navigator.userAgent.match(/iPhone/i) ||
       navigator.userAgent.match(/iPod/i)){
           itsMobile(); 
    }
})
于 2011-12-15T14:52:03.817 に答える
1 
(function($) {
    var isMobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));  
    if (isMobile) {
        $('.event_list').hide(); // setting display:none; on all .event_list <ul> elements

        // attach click event to the <span class="day_listing"> elements
        $('.day_listing').click(function() {
            var $eventList = $(this).sibling('.event_list');

            $('.event_list').hide(); // again hide all possibly shown ones before opening the selected one

            $eventList.show(); // setting display:block on sibling <ul> of clicked <span>
        });
    }

})(jQuery);
于 2011-12-16T18:22:36.867 に答える