如何在 data-role="footer"（用于动态加载数据的页脚）上应用鼠标和触摸滑动？

Question

在Android应用程序中，我想要触摸或鼠标滑动来滑动页脚中存在的数据。在 Phonegap 中，我正在制作 Android 应用程序。我如何为这些滑动事件编写 jQuery 脚本和 css3？

在 jQuery 中：

           function get_Menu_List() {
                window.my_cat_index=0;
                    $(location).attr('href', '#menu_list'); 
             $.support.cors = true; 
             $.ajax({
                 type: "GET",
                 url: "xyz.html",
                 contentType: "text/xml",
                 dataType: "xml",
                 data: "",
                 crossDomain:true,
                 success: function(xml) {
                       $(xml).find('category').each(function(){
                       var menu_cat_id = $(this).find('id').text();
                       var menu_cat_title = $(this).find('title').text();
                       my_cat_index++;
                       $('#scroller').append('<li class="selected"  id="envy_cat_ID'+my_cat_index+'"><a href="#" data-role="button" data-theme="b" data-inline="true"><span>'+menu_cat_title+'</span></a></li>');   
                  });

在 html5 中：

         <div data-role="page" id="menu_list">
              <div data-role="footer" data-position="fixed" id="footer_ids" data-theme="c">
                 <div class="titles"  id="wrapper" onmousedown="startReverseSlider(event)" ontouchstart="startReverseSlider(event)">
                           <ul id="scroller" ></ul>
                </div> 
                <div class="sliderOuterDiv" >
                        <div class="sliderThumb" onmousedown="start(event)" ontouchstart="start(event)" style="width: 1263.3445783132531px;"></div>
                </div>
        </div>

脚本部分和CSS部分如何写？

Answer 1

这就是你的答案。

在 HTML 5 中：

 <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>    

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

正确吗？

Answer 2

我终于得到了这些的答案

在 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>    

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