android - 如何在数据角色 ="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;
      });         
 }

正确吗？