0

请找到以下代码...

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

提前致谢...

4

1 回答 1

0

如果您查看您提到的演示的源代码，您会看到它显示

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

你只需要使用 swiperight 和 swipeleft 事件来做你需要的

于 2013-06-24T12:12:34.610 回答