问题
I am using Jquery mobile to build an iso phone app. I load categories from a php page. I want to add thumbnail slide below each category. (like Netflix home page ) people could scroll up and down to view the categories and swipe thumbnail pictures under each category. Now, AJAX can have categories generated automatically through
"div_set=div_set+'<li><a name="'+NewNum+'" id="'+NewCata+'" href="#cata">'+NewCata+'</a></li><li>"
But thumbnail slide doesn't animate in page loaded into a 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>'; "
The thumbnail slide works only I took the out of AJAX function. Could anyone can help me?
<!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>
Now, the page shows one correct thumbnail slides at the top, the categories in the cat , and the thumbnail images lined up vertically below each category. They couldn't be swiped horizontally :(((
来源：https://stackoverflow.com/questions/28838542/thumbnail-scroller-plugins-couldnt-work-with-ajax-to-load-html-into-a-div