android - 動的に作成されたhtml5の水平スクロール

Question

Phonegap + jQueryMobile + Android を使用しています。スタティックを作成する<li>と正常に動作しますが、動的にはスタティックのように動作しません。以下に示すコードで私がした間違いを確認してください。

jqueryの場合：-

    $(document).unbind('pageinit').bind('pageinit', function () {

          callMenuConnection(); 

      });
       function callMenuConnection() {  
        $.support.cors = true;
           $.ajax({
                type: "GET",
                url: "one.html",
                contentType: "text/xml",
                dataType: "xml",
                data: "",
                cache:false,
                processData:false,
                crossDomain:true,
                success: processSuccess,
                error: processError
            }); 
      }

      function processSuccess(data) {
             $(data).find("category").each(function () {     
             var id = $(this).find('id').text();
             var title = $(this).find('title').text();
            $('#cat_list').append('<li><span><a href="#" data-role="button" data-inline="true">'+title+'</a></span></li>');
            });
      }

         function processError(data)
           {
               alert("error");
           }


      $(function(){           
var step = 1;
var current = 0;
var maximum = $(".categories ul li").size();
var visible = 2;
var speed = 500;
var liSize = 120;
var height = 60;    
var ulSize = liSize * maximum;
var divSize = liSize * visible; 

$('.categories').css("width", "auto").css("height", height+"px").css("visibility", "visible").css("overflow", "hidden").css("position", "relative");
$(".categories ul li").css("list-style","none").css("display","inline");
$(".categories ul").css("width", ulSize+"px").css("left", -(current * liSize)).css("position", "absolute").css("white-space","nowrap").css("margin","0px").css("padding","5px");

$(".categories").swipeleft(function(event){
    if(current + step < 0 || current + step > maximum - visible) {return; }
    else {
        current = current + step;
        $('.categories ul').animate({left: -(liSize * current)}, speed, null);
    }
    return false;
});

$(".categories").swiperight(function(){
    if(current - step < 0 || current - step > maximum - visible) {return; }
    else {
        current = current - step;
        $('.categories ul').animate({left: -(liSize * current)}, speed, null);
    }
    return false;
});         
 });

CSSで： -

   div.sc_menu {
          /* Set it so we could calculate the offsetLeft */
              position: relative;
               height: 145px;
               width: 300px;
               overflow: auto;
               }
ul.sc_menu {
display: block;
height: 110px;
/* max width here, for users without javascript */    
width: 1500px;   
padding: 15px 0 0 15px; 
/* removing default styling */
margin: 0;
background: url('navigation.png');        
list-style: none;
 }
    .sc_menu li {
display: block;
float: left;    
padding: 0 4px;
  }
    .sc_menu a {
display: block;
text-decoration: none;
}
       .sc_menu span {
  /* display: none; */
  margin-top: 3px;
  text-align: center;
  font-size: 12px;    
  color: #fff;
   }
 .sc_menu a:hover span {
display: block;
 }
     .sc_menu img {
    border: 3px #fff solid;    
    -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
      }
       .sc_menu a:hover img {
          filter:alpha(opacity=50);    
           opacity: 0.5;
        }


    /* Here are styles for the back button, don't look at them */
  #back {
   display: block;
    width: 500px;
     text-align: center;
     color: #003469;
     font-size: 16px;
 }

Html5:-

    <div data-role="page" data-theme="b" id="jqm-home">            
            <div class="categories">                
                  <ul id="cat_list"></ul>               
            </div>
     </div>

Answer 1

$('#mylist').listview(); を試してください。レンダリングを強制します。

Answer 2

ul リストを更新する

  function processSuccess(data) {
                 $(data).find("category").each(function () {     
                 var id = $(this).find('id').text();
                 var title = $(this).find('title').text();
                $('#cat_list').append('<li><span><a href="#" data-role="button" data-inline="true">'+title+'</a></span></li>');
                });
     $('#cat_list').listview('refresh');
          }

また

$('#cat_list').append('<li><span><a href="#" data-role="button" data-inline="true">'+title+'</a></span></li>').listview('refresh');

編集：

function processSuccess(data) {
var data="";
                     $(data).find("category").each(function () {     
                     var id = $(this).find('id').text();
                     var title = $(this).find('title').text();
                   data+='<li><span><a href="#" data-role="button"  data-inline="true">'+title+'</a></span></li>';
                    });
 $("#cat_list").html(data).listview('refresh');

              }

Answer 3

jqMobile + iScrollView + Infinite Scrolling を試してください。

詳細については、次を確認してください:無限スクロール

また、プラグイン サイトhttps://github.com/watusi/jquery-mobile-iscrollviewでデモを見ることができます。

Answer 4

最後に私はこれらの答えを得ました

HTML5:-

 <div data-role="page" data-theme="b" id="jqm-home">    
      <div data-role="footer" data-position="fixed" data-theme="c">        
           <div  class="categories" id="cat">                
              <ul id="cat_list" class="cat_list_class"></ul>               
           </div>
      </div>    
</div>

jquery:-

 var step = 1;
var current = 0;
 var maximum = 0;
 var visible = 2;
 var speed = 500;
 var liSize = 120;
 var height = 60;    
 var ulSize = liSize * maximum;
  var divSize = liSize * visible;

 $(document).unbind('pageinit').bind('pageinit', function () {    
      callMenuConnection(); 
       $('.categories').css("width", "auto").css("height", height+"px").css("visibility", "visible").css("overflow", "hidden").css("position", "relative");
       $(".categories ul a").css("list-style","none").css("display","inline");
       $(".categories ul").css("width", ulSize+"px").css("left", -(current * liSize)).css("position", "absolute").css("white-space","nowrap").css("margin","0px").css("padding","5px");      
  });

 $(document).unbind('click').bind('click', function () {
        scroll();
 });
   function callMenuConnection() {  
       $.support.cors = true;
       $.ajax({
            type: "GET",
            url: "one.html",
            contentType: "text/xml",
            dataType: "xml",
            data: "",
            cache:false,
            processData:false,
            crossDomain:true,
            success: processSuccess,
            error: processError
        }); 
  }
      var scripts ="";     
  function processSuccess(data) {
         $(data).find("category").each(function () {     
         var id = $(this).find('id').text();
         var title = $(this).find('title').text();
          scripts = scripts+'<a  class="ids_cat" data-role="button" data-transition="slide"  data-inline="true" >' +title+ '</a>';
        });
        $('#cat_list').append(scripts);
        $('#cat_list').trigger('create');
         maximum = $(".categories ul a").size();
  }

     function processError(data)
       {
           alert("error");
       }

 function scroll(){ 
 $(".categories").swipeleft(function(event){
  if(current + step < 0 || current + step > maximum - visible) {return; }
else {
    current = current + step;
    $('.categories ul').animate({left: -(liSize * current)}, speed, null);
}
return false;
 });

  $(".categories").swiperight(function(event){
      if(current - step < 0 || current - step > maximum - visible) {return; }
     else {
         current = current - step;
        $('.categories ul').animate({left: -(liSize * current)}, speed, null);
   }
   return false;
 });         
}