Размах событие - перемещение 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 контента в направлении салфетки, и загрузить тот же DIV с новым вопросом и данных ..

, например, пожалуйста, найти ссылку ... http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/swipe/swipe-page.html#

Примечание:

выше пример показывает загрузку новой страницы в каждой салфетки. Здесь я хочу, как загрузить новый div с новыми данными?

Заранее спасибо ...

источник

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 animation здесь http://api.jqueryui.com/slide-effect/?rdfrom=http%3A%2F%2Fdocs.jquery.com%2Fmw%2Findex.php% 3Ftitle% 3DUI% 2FEffects% 2FSlide% 26redirect% 3Dno –

Размах событие - перемещение DIV

ответ

Смежные вопросы