Question

请找到以下代码......

<!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？

提前致谢...

Answer 1

如果你看一下你提到的演示的源代码，你会看到它显示

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

您只需使用向右滑动并向左滑动即可执行您需要的操作

滑动事件 - 移动div

1 个答案: