jQM/jquery-collagePlus使用问题 [英] jQM / jquery-collagePlus Usage Issue

问题描述

我正在使用jQM构建应用，并且尝试使用jquery-collagePlus( http ://ed-lea.github.io/jquery-collagePlus/)

I'm building app using jQM and I'm trying to use jquery-collagePlus (http://ed-lea.github.io/jquery-collagePlus/)

这是jsfiddle: http://jsfiddle.net/z5HfK/

This is the jsfiddle: http://jsfiddle.net/z5HfK/

我的HTML:

<div class="collage">
    <img src="http://mywaiter.my/images/food1.jpg">
                    <img src="http://mywaiter.my/images/food2.jpg">
                    <img src="http://mywaiter.my/images/food3.jpg">
                    <img src="http://mywaiter.my/images/food4.jpg">
                    <img src="http://mywaiter.my/images/food5.jpg">
                    <img src="http://mywaiter.my/images/food6.jpg">
                    <img src="http://mywaiter.my/images/food7.jpg">
                    <img src="http://mywaiter.my/images/food8.jpg">
                    <img src="http://mywaiter.my/images/food9.jpg">
                </div>

JS:

$(window).load(function () {
        $('.collage').collagePlus();
    });

它似乎不起作用，并且因为我是JS的新手，所以我不太确定为什么.

It doesn't seem to work and because I'm new to JS, I'm not too sure why.

在我的应用程序测试中，加载jQM页面后，所有图像均消失了.

In my app test, all the images is gone after the jQM page loaded.

请就我做错了事提出建议.谢谢.

Please advice on what I have done wrong. Thank you.

推荐答案

使用jQuery Mobile时，您需要使用适当的jQuery Mobile页面事件，在这种情况下，它是showpage(jQuery Mobile 1.4及更低版本)或pagecontainershow(jQuery Mobile) 1.4及以上).

When working with jQuery Mobile you need to use appropriate jQuery Mobile page event, in this case it is showpage (jQuery Mobile 1.4 and below) or pagecontainershow (jQuery Mobile 1.4 and above).

工作示例: http://jsfiddle.net/Gajotres/26WXB/4/

$(document).on('pagecontainershow', function (e, ui) {
    var activePage = $(':mobile-pagecontainer').pagecontainer('getActivePage').attr('id');
    if(activePage === 'index') {
        $('.collage').collagePlus(
            {
                // change this to adjust the height of the rows
                'targetHeight' : 100,
                // change this to try different effects
                // valid effets = effect-1 to effect-6
                'effect' : "effect-1"
            }
        );   
    }
});

或jQuery Mobile 1.4及以下版本:

$(document).on('pageshow', '#index', function(){ 
    $('.collage').collagePlus(
        {
            // change this to adjust the height of the rows
            'targetHeight' : 100,
            // change this to try different effects
            // valid effets = effect-1 to effect-6
            'effect' : "effect-1"
        }
    );             
});

这篇关于jQM/jquery-collagePlus使用问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！