Нужна помощь с функцией bind pageInserted в jquery - PullRequest
Новая
       34

Нужна помощь с функцией bind pageInserted в jquery

0 голосов
/ 28 января 2011

Мне нужна помощь, чтобы понять, как получить скрипт, который у меня работает, в моем файле index.html, чтобы работать на подстранице, которую я загружаю с помощью ajax.

В моем файле индекса у меня естьСценарий, который работает на этой странице, хорошо.И теперь я хочу, чтобы он работал с отдельной html-страницей, которую я загружаю с -ajax-jquery.

Я предполагаю, что мне нужно использовать что-то вроде .bind ('pageInserted' ..... но я неноу-хау.

Скрипт заставляет вас прокручивать оба элемента div вверх и вниз, и вы можете скользить назад / fort.

Скрипт, который есть в моем файле индекса (и который работает там)is: 

var page_flip, vertical_scroll,myScroll,
    disable_h = disable_v = false,
    prev_page = prev_x = prev_y = 0,
    pages;

function loaded() {
    setTimeout(function () {
        pages = document.querySelectorAll('.scroller');

        page_flip = new iScroll('pageflip', {
            hScrollbar: false,
            vScrollbar: false,
            snap:true,
            momentum:false,
            onScrollEnd: updateVerticalScroller
        });

        vertical_scroll = new iScroll(pages[page_flip.pageX], {
            hScrollbar: false,
            vScrollbar: false
        });



        // Free some mem
        window.removeEventListener('load', loaded, false);
    }, 100);
}

function updateVerticalScroller () {
    prev_x = vertical_scroll.x;
    prev_y = vertical_scroll.y;

    if (page_flip.pageX!=prev_page) {
        if (page_flip.pageX == 0)
            highlightStartPageButton();
        else if (page_flip.pageX == 1)
            highlightMenuButton();

        vertical_scroll = vertical_scroll.destroy();
        pages[prev_page].style.webkitTransitionDuration = '0';
        pages[prev_page].style.webkitTransform = 'translate3d(' + prev_x + 'px, ' + prev_y + 'px, 0)';
        vertical_scroll = new iScroll(pages[page_flip.pageX], {
            hScrollbar: false,
            vScrollbar: false
        });
        prev_page = page_flip.pageX;
    }
}

и div в индексном файле: 

<div id="pagewrapper">
    <div id="pageflip">


<div class="scrollerwrapper">
<div class="scroller">

content in div1 (page1) goes here.........

</div>
</div>

<div class="scrollerwrapper">
<div class="scroller">

content in div2 (page2) goes here.........

</div>
</div>


</div>
</div>

Подстраница demo.html, с которой я хочу работать с этим сценарием, выглядит как div в индексном файле+ два деления вверху для работы сценария iscroll: 

    <div id="wrapper22" class="scrollerwrapper">--need this for the iscroll to work
<div id="mag1" class="scroller2">--need this for the iscroll to work


<div id="pagewrapper">
<div id="pageflip">


<div class="scrollerwrapper">
<div class="scroller">

content in div1 goes here.........

</div>
</div>


<div class="scrollerwrapper">
<div class="scroller">

content in div2 goes here.........

</div>
</div>

</div>
</div>


</div>
</div>

Я бы очень хотел помочь вам понять, как это исправить и заставить работать. Большое спасибо!

Ответы [ 2 ]

0 голосов
/ 28 января 2011

привет roflwaffle Я думаю, я :-), я использую jqtouch и jquery для загрузки страниц (это мобильное приложение). Я использую этот скрипт, чтобы заставить iscroll работать на подстраницах: 

var myScroll;
$(document.body).ready(function(){
    $('#hem').load('home/home1.asp');
    loaded();
  $(this).bind('pageInserted', function(event, info) {

       var $inserted = info.page;
       var $scroll = $inserted.find('.scroller2');

        var elm = $inserted.find(".scrollerwrapper");//document.getElementById('wrapper2');
        if (elm != null)
           elm.css("height", window.innerHeight);//elm.style.height = window.innerHeight + "px";

       myScroll= new iScroll($scroll.attr("id"), {desktopCompatibility:true,hScrollbar: false,vScrollbar: false});

    });
});
0 голосов
/ 28 января 2011

Используете ли вы .load() из jQuery для загрузки страницы через AJAX? Вот документы для .load().Позволяет настроить обратный вызов, когда контент был загружен: 

$('#result').load('ajax/test.html', function() {
    alert('Load was performed.');
});
...