Доступ к скрытым неупорядоченным спискам в CodeIgniter с использованием CSS / JS / PHP - PullRequest
Новая
       2

Доступ к скрытым неупорядоченным спискам в CodeIgniter с использованием CSS / JS / PHP

2 голосов
/ 15 декабря 2011

Отказ от ответственности : я новичок в веб-разработке.

Сценарий : я делаю календарь на основе событий, используя CodeIgniter.Он отлично работает в окне размером с рабочий стол или планшет, и я сделал мобильную версию, используя Foundation 2.0 от Zurb.Это выглядит великолепно, но есть проблема, с которой я сталкиваюсь.

Проблема : в мобильной версии, когда генерируется календарь, мне нужно скрыть <ul> s (чтоотображать события в настольной версии) в мобильной версии.Затем я должен иметь возможность вызывать <ul> s, когда day_listing s (которые являются числами в календаре) выбраны / нажаты / и т. Д.

Вот как класс календаря генерируетдата и события: 

<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}

Примечание : Это то, что вы нужно для работы.

Вопрос : Какие методы мне нужно использовать (например, CSS / JavaScript / PHP / и т.д.), чтобы скрыть <ul> sправильно, когда генерирует класс календаря, и вызывать их при выборе / нажатии / и т. д.на day_listing с?

Большое спасибо за вашу помощь!Ниже приведены ресурсы, которые я использую, на которые вы можете ссылаться, если у вас возникли проблемы с пониманием того, о чем я говорю:

Ответы [ 2 ]

1 голос
/ 16 декабря 2011 
(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);
1 голос
/ 15 декабря 2011

Foundation mobile.css (я не могу найти Foundation.css) устанавливает display:block!important с классом hide-on-phones. Вполне возможно, что ul на самом деле не скрыты, а переполняются той частью страницы, которая не видна в видимой области по умолчанию (именно поэтому они появляются при изменении размера).

Это в стороне, не ясно, чего ты хочешь. Вы заявляете, что он работает в начале вопроса, а затем утверждаете, что он не работает ... Как всегда, было бы полезно увидеть больше вашего кода.

Чтобы правильно скрыть ul, используйте js: 

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

Вы можете получить доступ к его URL через 

document.getElementById('ulID').href

jQuery облегчит некоторые вещи; Может быть стоит посмотреть.

редактирование:

Так что это все еще сбивает меня с толку: у вашего ul нет класса hide-on-phones; это устанавливается Фондом?

Кроме того, вы пытаетесь скрыть события, чтобы они отображались при нажатии на день? например 

<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 с использованием существующей разметки, сгенерированной календарем:

(кроме того, вы, вероятно, захотите использовать noConflict , чтобы jQuery не мешал другим вашим библиотекам) 

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(); 
    }
})
...