如何应用鼠标并轻触滑动data-role =“footer”，用于动态加载数据的页脚？

问题描述：

在Android应用程序，我想触摸或鼠标轻扫其刷卡这是目前在footer.in的PhoneGap我想提出的Android应用程序中的数据plz帮助我如何写这些刷卡事件如何应用鼠标并轻触滑动data-role =“footer”，用于动态加载数据的页脚？

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

PLZ告诉我怎么牛逼O写了剧本的部分和css部分PLZ帮我出

预先感谢

答

这是你的答案。

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

是不是正确的？

答

最后我得到的这些

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

如何应用鼠标并轻触滑动data-role =“footer”，用于动态加载数据的页脚？

相关推荐