缩略图Scroller插件无法使用Ajax将Html加载到Div中

时间：2015-03-03 17:52:03

标签： jquery ajax jquery-mobile scroller

我正在使用Jquery mobile构建一个iso手机应用程序。我从php页面加载类别。我想在每个类别下面添加缩略图幻灯片。 （如Netflix主页）人们可以上下滚动查看类别并在每个类别下滑动缩略图。现在，AJAX可以通过

自动生成类别 
"div_set=div_set+'<li><a name="'+NewNum+'" id="'+NewCata+'" href="#cata">'+NewCata+'</a></li><li>"
  

但缩略图幻灯片不会在加载到Div

中的页面中设置动画 
"div_set=div_set+'<li><a name="'+NewNum+'" id="'+NewCata+'" href="#cata">'+NewCata+'</a></li><li><a href="#"><img src="thumbnails/img7.jpg" /></a></li><li><a href="#"><img src="thumbnails/img2.jpg" /></a></li><li><a href="#"><img src="thumbnails/img5.jpg" /></a></li><li><a href="#"><img src="thumbnails/img5.jpg" /></a></li><li><a href="#"><img src="thumbnails/img5.jpg" /></a></li><li><a href="#"><img src="thumbnails/img5.jpg" /></a></li><li><a href="#"><img src="thumbnails/img5.jpg" /></a></li><li><a href="#"><img src="thumbnails/img5.jpg" /></a></li>';  "

缩略图幻灯片仅适用于我从AJAX功能中取出的功能。 任何人都可以帮助我吗？ 

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<link rel="stylesheet" href="jquery.mThumbnailScroller.css">
<link href="jquery.mobile-1.4.2/jquery.mobile-1.4.2.css" rel="stylesheet" type="text/css"/>
 <script src="jquery-1.11.0.js" type="text/javascript"></script>
<script src="jquery.mobile-1.4.2/jquery.mobile-1.4.2.js" type="text/javascript"></script>

<script src="js.js" type="text/javascript"></script>

<script type="text/javascript" src="iscroll.js"></script>
<style>
.content{
        overflow: auto;
        position: relative;
        padding: 10px;
        background-color: #333;

        width: 50%;
        height: auto;
        float: left;
    }
.content li{
        margin: 0;
        overflow: hidden;
    }
    .content li a{
        display: inline-block;
        border: 7px solid rgba(255,255,255,.1);
    }

    #content-1, #content-2{
        width: auto;
        height: 100px;
    }



#content-2{ padding:0px 0px; }
#wrapper {
    position: relative;
    width: 100%;
    height: 800px;
    margin-bottom:10px;
    overflow: hidden;



/* Prevent native touch events on Windows */
    -ms-touch-action: none;

    /* Prevent the callout on tap-hold and text selection */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    /* Prevent text resize on orientation change, useful for web-apps */
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -o-text-size-adjust: none;
    text-size-adjust: none;
}

#scroller {


position: absolute;
    z-index: 1;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    width: 100%;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -o-text-size-adjust: none;
    text-size-adjust: none;
}
#scroller ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: left;
     bottom: 0;
}

#scroller li {
    padding: 0 10px;
    height: auto;
    line-height: 40px;
    border-bottom: 0px solid #ccc;
    border-top: 0px solid #fff;
    background-color: #fafafa;
    font-size: 14px;
     bottom: 0;
}
</style>

</head>
    <meta name="viewport" content="width=device-width"/>
<body>
<!-- This is the first page -->
<!-----this is categories page------->
 <div id="categories" data-role="page";>

<!--/*content for the first page */-->
<!--/*the code below works, it shows the animation of scroller of thumbnail images */-->
 <div id="content-2" class=" mThumbnailScroller">



<li><a href="#"><img src="thumbnails/img1.jpg" /></a></li>
                    <li><a href="#"><img src="thumbnails/img2.jpg" /></a></li>
                    <li><a href="#"><img src="thumbnails/img3.jpg" /></a></li>
                    <li><a href="#"><img src="thumbnails/img4.jpg" /></a></li>
                    <li><a href="#"><img src="thumbnails/img5.jpg" /></a></li>
                    <li><a href="#"><img src="thumbnails/img6.jpg" /></a></li>
                    <li><a href="#"><img src="thumbnails/img7.jpg" /></a></li>
                    <li><a href="#"><img src="thumbnails/img6.jpg" /></a></li>
                    <li><a href="#"><img src="thumbnails/img7.jpg" /></a></li>

                </div>

<!-- <div id="content-2" class=" mThumbnailScroller">
-->             
                <div id="cat" data-role="list-divider">
                <!--Here I want to show categories listview from ajax, it works-->

            </div>
            <div id="slide"> 
            <!--Here I want to show thumbnail slide from ajax, it didn't work, it only works if I took slide div out of ajax and put it into jquery pageshow function  -->
            </div>

           <!-- </div>-->

</div>





</body>

<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script> window.jQuery || document.write('<script src="jquery-1.11.0.min.js"><\/script>')</script>
<script src="jquery.mThumbnailScroller.js"></script>

<script>
$('#categories').on('pageshow',function(){
    var myScroll;

function loaded () {
    myScroll = new IScroll('#wrapper', {
        scrollbars: true,
        mouseWheel: true,
        interactiveScrollbars: true,
        shrinkScrollbars: 'scale',
        fadeScrollbars: true
    });

}
        (function($){
            $("#slide").load(function(){

                $("#content-2").mThumbnailScroller({
                    type:"click-50",
                });

            });
        })(jQuery);

        $.ajax({


url:'https://www.mywebsite.com/get_categories.php',
            dataType:"text",
            type:'POST',
            data:{},
            success: function(categoryData){
                //alert(categoryData);
            var obj=$.parseJSON(categoryData);
                //alert(obj[0].cat_name);
                //$("#cat").html(obj);
                //$("#cat").html(categoryData);
            var div_set='';
                for(var i=0; i < obj.length; i++){

                    if(obj[i].sort_order=='none'){
                        div_set='<div>You haven\'t set up any categories</div>';                            
                        }else{
                NewCata=obj[i].cat_name;
                NewNum=obj[i].cat_number;
div_set=div_set+'<li><a name="'+NewNum+'" id="'+NewCata+'" href="#cata">'+NewCata+'</a></li><li><a href="#"><img src="thumbnails/img7.jpg" /></a></li><li><a href="#"><img src="thumbnails/img2.jpg" /></a></li><li><a href="#"><img src="thumbnails/img5.jpg" /></a></li><li><a href="#"><img src="thumbnails/img5.jpg" /></a></li><li><a href="#"><img src="thumbnails/img5.jpg" /></a></li><li><a href="#"><img src="thumbnails/img5.jpg" /></a></li><li><a href="#"><img src="thumbnails/img5.jpg" /></a></li><li><a href="#"><img src="thumbnails/img5.jpg" /></a></li>';  
                        }

                    }
                    $('#cat').html(div_set).show();
                     $('#cat').listview('refresh');

        },
            error: function(){
            }
            });



 //////If I uncomment code below, the slide will operate right
    ////////////                             ///var slide = ' <div id="content-2" class="mThumbnailScroller"><li><a  href="#"><img src="thumbnails/img7.jpg" /></a></li><li><a href="#"><img src="thumbnails/img2.jpg" /></a></li><li><a href="#"><img src="thumbnails/img5.jpg" /></a></li><li><a href="#"><img src="thumbnails/img5.jpg" /></a></li><li><a href="#"><img src="thumbnails/img5.jpg" /></a></li><li><a href="#"><img src="thumbnails/img5.jpg" /></a></li><li><a href="#"><img src="thumbnails/img5.jpg" /></a></li><li><a href="#"><img src="thumbnails/img5.jpg" /></a></li></div>'
///$("#slide").append(slide)

})


</script>
</html>

现在，页面顶部显示一个正确的缩略图幻灯片，猫中的类别以及每个类别下方垂直排列的缩略图图像。它们无法横向滑动：（（

0 个答案:

没有答案
相关问题
最新问题