문제

In Html5:- in footer it will store the data which is cuming dynamically and footer part should move by touch not whole window only footer should move with the data is present in footer left to right

<div data-role="page" id="page1">
         <div data-role="footer" data-position="fixed" id="footer">
              <div class="menu" id="menu_button1" id="scroll_menu" onmouseover='this.style["overflowX"]="scroll";'  onmouseout='this.style["overflowX"]="visible";'></div>
         </div> 
</div>

In Jquery:- I am using Ajax calling to get the data dynamically in stored that data in footer part of Htm5 in there i want to use touch event how i can use plz help me out

function callMenuConnection() {  
        $.support.cors = true;
           $.ajax({
                type: "POST",
                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();
             var scripts = "<a href='#' data-role='button' data-theme='b' data-inline='true'>"+title+"</a>"                
            $("#menu_button1").append(scripts).trigger('create'); 
        });
      }

         function processError(data)
           {
               alert("error");
           }
    $(document).unbind('pageinit').bind('pageinit', function () {
         callMenuConnection(); 
     });
도움이 되었습니까?

해결책

Finally i got the answer of these

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

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

다른 팁

Please use swipe event on the footer selector. Something like :

// Temp Id Card back page swipe event $("#FooterId").on('swipe', function (e) { // keep changing the data here in some div, it would give illusion that footer is changing... });

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top