0

我正在尝试制作移动网页。该页面有一个图像滑块。但我有一个问题document.ready()

我已经搜索过这个问题，每个人都告诉我使用：

$(document).bind('pageinit', function() {});

但我认为滑块想要

$document.ready ( or I can't run)

滑块名称是bxslider(bxslider.com)

我认为不同的解决方案：

  1. 禁用 jquery mobile 的 ajax 加载，每个页面都将重新加载，文档准备就绪。

  2. 更改图像滑块。

有人有建议吗？

编辑：我忘了添加代码抱歉 http://d.pr/n/SNW7

4

2 回答 2

0

使用类似的事件pageshow pagehide

$( 'div' ).on( 'pageshow',function(event, ui){
  alert( 'This page was just hidden: '+ ui.prevPage);
});

$( 'div' ).on( 'pagehide',function(event, ui){
  alert( 'This page was just shown: '+ ui.nextPage);
});

http://jquerymobile.com/demos/1.2.1/docs/api/events.html

或类似的东西

$(document).on('pagebeforeshow', '#index', function(){ 
    $('.bxslider').bxSlider({
        slideWidth: 360
    });    
});
于 2013-10-07T13:26:15.830 回答
0

我在使用 JQM+bxSlider 时遇到了同样的问题，经过大量调查和测试后，我找到了 JQM 的解决方案。

你必须使用 $document.ready 和 $(document).on('pageshow'

看看这个例子。在此示例中，您在 ID 为“Quiz”的页面中有一个名为 bxslider 的滑块：

<script>
    $(document).ready(function() {
        myCarousel=$('.bxslider').bxSlider({
            captions: false,
            infiniteLoop: false,
            hideControlOnEnd: true,
            slideMargin: 10,
            adaptiveHeight : true
        });   
    });

    $(document).on('pageshow', '#Quiz', function(){ 
        myCarousel.reloadSlider();
    });
</script>

希望这可以帮助。

于 2014-05-22T16:38:43.633 回答