刷卡事件 - 移动DIV

请找到下面的代码...刷卡事件 - 移动DIV

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Page</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
    </head> 
    <body> 

     <div data-role="page">   

      <div data-role="header"> 
       <h2>Header</h2>    
      </div> 

      <div data-role="content">     

       <ul data-role="listview" data-inset="true">     
        <li>       
         <p class="question"></p>       
         <div class="answerTxt"></div>      
        </li> 
       </ul> 

      </div>   

      <div data-role="footer" data-position="fixed">    
       <h3>Footer</h3> 
      </div> 

     </div> 

     <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>  
     <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 

     <script> 
      var ct = 0; 

      var jsonObj = { 
       "questions": [ 
        "question 1", 
        "question 2", 
        "question 3"      
       ], 
       "Type": [ 
        "radio",     
        "checkbox", 
        "radio"    
       ], 
       "Value": [ 
        ["Yes","No","Not Applicable"],    
        ["Land","Garden","House","Office"], 
        ["Good","Fair","Poor"]   
       ] 
      }  

      $(document).on('pagebeforeshow',"[data-role=page]", function() {     
       init(); 

      }); 

      $(document).on("swipeleft","[data-role=page]",function(event) {       
       ct++; 
       init();    
      }); 

      $(document).on("swiperight","[data-role=page]",function(event) {    
       ct--; 
       init(); 
      }); 

      function init() {    
       $(".answerTxt").empty(); 
       $(".question").text((ct+1)+". "+jsonObj.questions[ct]);     

       if (jsonObj.Type[ct] == "radio" || jsonObj.Type[ct] == "checkbox"){ 
        $(".answerTxt").append('<fieldset data-role="controlgroup" id="compCon"/>');       
        for(var i=0; i<jsonObj.Value[ct].length; i++){      
         $("#compCon").append('<label for="'+i+'"id="'+i+'">'+jsonObj.Value[ct][i]+'</label><input type="'+jsonObj.Type[ct]+'" name="rg2" id="'+i+'"/>'); 
         $(".answerTxt").trigger("create"); 
         $("input[type='"+jsonObj.Type[ct]+"']:first").attr("checked",true).checkboxradio("refresh"); 
        } 
       }     
      } 
     </script> 

    </body> 
</html>

在这个例子中，我使用刷卡事件改变的问题。它工作正常...

我的问题是如何在我的刷卡方向移动内容的div，并加载了新的问题和数据在同一格..

例如，请找到下面的链接... http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/swipe/swipe-page.html#

注：

例如上面显示每个刷卡加载了新的一页。这里我想要的是我如何加载新的数据与新的数据？

在此先感谢...

来源

2013-06-24 Yesvinkumar

如果你看看你提到你会演示的源代码中看到它显示

$(document).on("swiperight", page, function() { 
       $.mobile.changePage(prev + ".html", { reverse: true }); 
      });

你只需要使用swiperight和swipeleft事件做您需要什么

来源

2013-06-24 12:12:34

示例显示移动更改页面和每个页面动态加载。但我需要的是在每次刷卡时加载与新数据相同的div ...希望我能让你清楚... – Yesvinkumar

是啊，您只需修改swiperight页面上的内容即可完成您需要的操作，如果您不知道如何使元素滑动到页面上看看这里的jquery动画http://api.jqueryui.com/slide-effect/?rdfrom=http%3A%2F%2Fdocs.jquery.com%2Fmw%2Findex.php% 3Ftitle％3DUI％2FEffects％2FSlide％26redirect％3Dno –

刷卡事件 - 移动DIV

回答

相关问题