Question

我需要一些帮助来了解如何获取我在index.html文件中工作的脚本，以便在我使用ajax加载的子页面中工作。

在我的索引文件中，我有一个在该页面中运行的脚本，很好。现在我想让它与我用-ajax-jquery加载的seperat html页面一起工作。

我想我需要使用像.bind这样的东西（'pageInserted'.....但我不知道怎么做。

该脚本可以让你向上/向下滚动两个div，你可以向后滑动/堡垒。

我在索引文件中的脚本（在那里有效）是：

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 +顶部的两个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>

我真的会帮助一些帮助来理解如何解决这个问题并让它发挥作用。非常感谢！

Answer 1

您是否正在使用jQuery中的.load()通过AJAX加载页面？ Here's文档 .load()。它允许您设置内容加载时的回调：

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

Answer 2

嗨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});

    });
});

在jquery中需要有关bind pageInserted函数的帮助

2 个答案: