Question

请检查我的代码中我的错误，我的水平滚动无法正常工作提前谢谢

在jquery中的

： -

      var step = 1;
var current = 0;
var maximum = $(".categories ul a").size();
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: "http://192.162.1.205/EServices/retrieve.aspx?command=get_menu&outlet=RBC",
                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+'<span><a  data-role="button" data-transition="slide"  data-inline="true" >' +title+ '</a></span>';

            });

            $('#cat_list').append(scripts);
            $('#cat_list').trigger('create');

      }

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

     function scroll(){           
       $(".cat_list_class").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;
});

$(".cat_list_class").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;
});         
}

在html5中： -

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

Answer 1

最后我得到了这些

的答案

在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;
  });         
  }

水平滚动在phonegap中不起作用

1 个答案: