Android 4.3无法正确显示bxslider的内容

时间:2014-08-29 17:40:09

标签: android jquery cordova bxslider

我已经被困2天了,我无法找到解决方案。

我的发展环境:

Cordova 3.4.0-0.1.0,jQuery v1.10.2,BxSlider v4.1.1和Android

当我选择一个类别时,我进行ajax调用并从服务器加载我的bxslider

我的代码:前面

$('.background_folder').on("change", function(){
        var folder = $(this).val();
        if(folder != '' && folder != undefined){

          var jqxhr = $.ajax({
            url:'http://myserver/get_backgrounds.php?folder='+folder 
          })
          .done(function( html ) {
            $('.background_sample').html(html);

            if ($(window).width() <= 320 || $(window).height() <= 480) {
              var s1 = $('.slider1').bxSlider({
                slideWidth: 230,
                minSlides: 1,
                maxSlides: 1,
                slideMargin: 10,
                pager: false
              });
            }else{
              var s2 = $('.slider1').bxSlider({
                slideWidth: 265,
                minSlides: 2,
                maxSlides: 3,
                slideMargin: 10,
                pager: false
              });  
            }
          })
          .always(function() {
            alert( "complete" );

            $('.convert').on("click", function(){
              $('.convert').css({border: '2px solid transparent'}).animate({
                opacity: 0.5
                }, 500 );
              $(this).css({border: '2px solid #f37736'}).animate({
                opacity: 1
                }, 500 );
            });
          });


        }                 
    });

我的代码:返回

function get_backgrounds($folder){
    //image backgrounds
    $backgrounds = array();
    if ($handle = opendir("../backgrounds/".$folder)) {
        //$backgrounds = array();
        while (false !== ($entry = readdir($handle))) {
            $backgrounds[] = $entry;
    }

    foreach ($backgrounds as $key => $value) {
        if($value == '.' || $value == '..'){
            unset($backgrounds[$key]);
        }
    }

}
$i = 0;
echo '<div class="slider1">';
foreach ($backgrounds as $key => $value) {
    if($i == 0){
        $selected = 'checked="checked"';
    }else{
        $selected = '';
    }

    $idvalue = 'data'.$key;

    echo '<div class="slide">';

            echo '<div class="background_thumb">';
               echo '<label class="fb" for="'.$idvalue.'">';
                   echo '<input '.$selected.' type="radio" name="background" id="'.$idvalue.'" value="'.$value.'">';
                   echo '<img class="convert" src="backgrounds/'.$folder.'/'.$value.'">';
                echo '</label>';
            echo '</div>';

        echo '</div>';
        $i++;
    }
    echo '</div>';
}

Android 4.4.2中的任何原因都可以,但在Android 4.3及更低版本中,内容已经存在,但我无法看到它。

知道发生了什么???

select with bxslider

select

1 个答案:

答案 0 :(得分:0)

当然这是一个CSS问题,由于某些原因我失去了高度,所以我的解决方案:

$('.slider1').bxSlider({
slideWidth: 265, minSlides: 2, maxSlides: 3, slideMargin: 10, pager: false, onSliderLoad: function(){ $('.bx-viewport').css({"height":"80px !important"}); $('.convert').css({"height":"80px !important"}); } });