Привязать div к середине экрана с помощью прокрутки - PullRequest
Новая
       23

Привязать div к середине экрана с помощью прокрутки

0 голосов
/ 02 июля 2011

вероятно, в пятницу долгих выходных никого нет, чтобы ответить на этот вопрос ...

Работа с jquery mobile beta и jquery mobile Scrollview плагин. Есть 5 элементов div, которые обновляются плагином scrtollview, и они успешно рисуются в карусельной форме с 5 элементами div рядом друг с другом ... 

           <div class="scrollme" data-scroll="x">
              <div class="indDiv"> one
                </div>
              <div  class="indDiv"> two
                </div>
              <div class="indDiv"> three
                </div>
              <div class="indDiv"> four
                </div>
              <div class="indDiv"> five
                </div>                              
            </div>


$('div.indDiv').bind('tap', function(e){
  var clickedDiv = $(this);
  // snap clickedDiv to the middle of the page
});

У меня есть такое требование, что, когда я нажимаю на div внутри этой карусели, я хочу перемещать corousel программно так, чтобы подключенный div привязывался к середине экрана. Я не вижу способа сделать это с помощью методов плагина scrollview ... Я тоже могу переключиться на другой плагин ... кто-нибудь ??

Спасибо

Ответы [ 2 ]

0 голосов
/ 27 февраля 2012

Я использую этот плагин и затем привязываю swiperight / left к кнопкам next / prev.

https://github.com/Wilto/Dynamic-Carousel

0 голосов
/ 02 июля 2011

В основном это связано с добавлением чего-либо в конец тела документа из-за позиции: относительные / абсолютные проблемы.

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

(function($) {
    $.fn.center = function() {
        this.css("position", "absolute");
        this.css("top", (($(window).height() * .4) - this.height()) / 2
                + $(window).scrollTop() + "px");
        this.css("left", ($(window).width() - this.width()) / 2
                + $(window).scrollLeft() + "px");
        return this;
    }

    var shade = 0;
    $.fn.unshade = function() {
        $('.shade:last').remove();
        var $children = $('.shade-front:last').children();
        $children.each(function(k, v) {
            if ($.data(v, 'shade-replace-previous').size() != 0) {
                $.data(v, 'shade-replace-previous').append(v);
            } else {
                $.data(v, 'shade-replace-parent').prepend(v);
            }
        });
        $('.shade-front:last').remove();
        return $children;
    }

    $.fn.shade = function(css) {
        var $shade = $('<div class="shade"/>');
        $shade.css( {
            position : "absolute",
            width : '100%',
            height : '100%',
            top : 0,
            left : 0,
            background : "#000",
            opacity : .7
        })
        $shade.click(function() {
            $(this).unshade();
        })
        $('body').append($shade);

        // Record our element's last position
        this.each(function(k, v) {
            var $this = $(v);
            var prev = $this.prev();
            var par = $this.parent();
            $.data(v, 'shade-replace-previous', prev);
            $.data(v, 'shade-replace-parent', par);
        });

        // Add them to the shadefront
        var $shade_front = $('<div class="shade-front"/>');
        $shade_front.css("background", "#FFF");
        $shade_front.css("margin", "auto");
        $shade_front.css("text-align", "center");
        if (css) {
            $shade_front.css(css);
        }
        $shade_front.append(this);
        $shade_front.center();
        $('body').append($shade_front);
        return $shade_front;
    }

})(jQuery);
...