Как циклически показывать набор дивов, таких как виджеты для твиттеров? - PullRequest
Новая
       4

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

2 голосов
/ 17 октября 2011

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

Я бы хотел сделать то же самое.Я использую ruby ​​на рельсах и хотел бы использовать скрипт jquery.

То, что у меня есть, представляет собой набор из 10 делений, отображаемых на странице.Я бы хотел, чтобы 5 отображались одновременно в списке, где время было таким, что каждые несколько секунд последний элемент в списке скрывался, и отображался другой элемент из списка 10.По сути, он будет циклически проходить по элементам div, постоянно отображая список из 5, скрывая и показывая определенные элементы div.

Скажем, что для этого прокручиваемого фида @ ticker_feed.paginate (: page => params [: page],: per_page => 10)

В нем будет 10 объектов.Затем я хотел бы вывести записи, на один делитель ниже предыдущего, в следующем виде: 

 <%@ticker_feed.each do |f|%>
<%= render 'discussions/ticker_tile' %>
<% end %>

НО я хочу, чтобы первые 5 отображались, а затем 1-й, чтобы скользить вверх (далеко), пока6-ый вкатывается, затем 3,4,5,6,7, затем 4,5,6,7,8 ... и так далее.Я думаю, что я должен был бы использовать JQuery.Предположим, что я могу вывести идентификатор ticker_tile для ticker_1, ticker_2, ticker_3 и т. Д., Чтобы иметь селекторы.

У кого-нибудь есть понимание, как это сделать?

1 Ответ

0 голосов
/ 17 октября 2011

Вот плагин jQuery, который прокручивает элементы внутри div, как вы описываете.

http://flowplayer.org/tools/scrollable/autoscroll.html

В этом примере показан один из способов сделать это;это не совсем то, что вы хотели, я думаю.

Плагин, похоже, предназначен для отображения ОДНОГО элемента за один раз из списка.При circular = true, позволяющем круговую прокрутку, плагин клонирует первый и последний элемент в списке элементов, которые вы хотите прокрутить.Это то, что один клонированный элемент при достижении конца исходного списка.

Понимая это, вы можете внести небольшое изменение в jquery.tools.js, чтобы получить желаемый эффект.Вместо клонирования одного элемента, клонируйте N элементов.Я добавил опцию cloneCount, чтобы решить эту проблему.

Вокруг строки 2830: 

            conf: {
                    maskId: 'exposeMask',

                    .... 

                cloneCount:1, // cheeso

                    // callbacks
                    onLoad: null,
                    onClose: null
            }

А затем вокруг строки 261, где находится исходный код: 

            // circular loop
            if (conf.circular) {

                    var cloned1 = self.getItems().slice(-1).clone().prependTo(itemWrap),
                             cloned2 = self.getItems().eq(1).clone().appendTo(itemWrap);

... измените его следующим образом: 

            // circular loop
            if (conf.circular) {

                    var cloned1 = self.getItems().slice(-conf.cloneCount).clone().prependTo(itemWrap),
                             cloned2 = self.getItems().slice(conf.cloneCount).clone().appendTo(itemWrap);

наконец, когда вы создаете скроллер, сделайте следующее: 

    var options = {
      circular: true,
      cloneCount:4,  // cheeso
      vertical: true,
      speed: 400
    };
    $("#scrollable-content").scrollable(options);

Вам нужно будет настроить число cloneCount, в зависимости от высоты контейнера и высотыпредметов, прокручиваемых внутри контейнера.

Вот обновленная версия .

...