Question

我正在使用登录模块工作的示例项目。所以我从wlCommonInit

触发了登录模块页面

function wlCommonInit(){

    WL.Client.login("AuthRealm", {onSuccess: winFunction, onFailure: failureFunction}); 


}

包含

window.$ = WLJQ;
window.jQuery = WLJQ;

用于Jquery Mobile设计。但Jquery Mobile设计仍在运行，因为它显示了一个普通的文本框。这是我完整的HTML代码

        <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>LatestKen</title>
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <link rel="shortcut icon" href="images/favicon.png">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    <link href="jqueryMobile/jquery.mobile-1.1.2.css" rel="stylesheet">
    <link rel="stylesheet" href="css/LatestKen.css">
    <script>
    window.$ = window.jQuery = WLJQ;
</script>
    <script src="jqueryMobile/jquery.js"></script>
    <script src="jqueryMobile/jquery.mobile-1.1.2.js"></script>
    <script
        src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">

    </script>
    </head>
    <body  id="content" style="display: none;">

        <div data-role="page" id="page2" style="display: none">
            <div data-role="header" id="header0" data-position="fixed">
                <h3>Select the Facility</h3>
            </div>

            <div data-role="content" name="contentConfirmation">



                <input type="button" value="Logout"
                    onclick="WL.Client.logout('AuthRealm', {onSuccess:WL.Client.reloadApp})" />
    <div id="response"></div>

                <div id="facility1"></div>
                <br>
                <div id="facility2"></div>

                <br>
                <div id="facility3"></div>
                <br>
                <div id="facility4"></div>
                <br>
            </div>
            <div data-role="footer" data-position="fixed" id="footer">
                <h3 align="center">Footer</h3>
            </div>

        </div>

        <div data-role="page" id="page3" style="display: none">

            <div data-role=header>

                <h1>Home</h1>

            </div>

            <div data-role="content" style="padding: 15px">
                <p>hello</p>
                <ul data-role="listview" id="listview" data-inset="true"
                    data-filter="true">
                    <li data-role="list-divider" id="divider">Available Devices</li>

                </ul>


            </div>

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

        </div>

    </div>

    <div data-role="page" id="AuthDiv" style="display: none">
            <div data-role="header">
                <h2>Login</h2>
            </div>
            <div data-role="content" style="padding: 15px">

                <div data-role="fieldcontain" id="fieldcontain">
                    <label for="text">Username:</label><input type="text" name="text"
                        id="AuthUsername">
                </div>

                <div data-role="fieldcontain" id="fieldcontain0">
                    <label for="text0">Password:</label><input type="text" name="text0"
                        id="AuthPassword">

                </div>

                <div class="ui-grid-a">
                    <div class="ui-block-a">
                        <input type="button" id="AuthCancelButton" value="cancel">
                    </div>
                    <div class="ui-block-b">

                        <input type="button" data-role="button" id="AuthSubmitButton"
                            value="submit">

                    </div>

                    <div id="ResponseDiv"></div>
                </div>
            </div>
        </div>

        <script src="js/initOptions.js"></script>
        <script src="js/LatestKen.js"></script>
        <script src="js/authChallengeHandler.js"></script>
        <script src="js/messages.js"></script>
        <script src="js/map.js"></script>
    </body>
    </html>

每当用户登录时，我都会显示#Page2，从那里我绑定了一个运行过程的click事件。在成功的过程中，我将其改为像这样。

function loadSQLQuerySuccess(result) {
    WL.Logger.debug("Retrieve success" +  JSON.stringify(result));
    $("#page2").hide();
    $("#page3").show();
    displayFeeds(result.invocationResult.resultSet);
}

displayFeeds函数负责设计listview的样式。但这也不支持jquery移动设计。我在这里做错了什么？

Answer 1

我认为评论是正确的。您的列表上没有样式，因为您没有以“jquery方式”显示列表。通过调用$ .mobile.changepage（）（如评论中所述）。

每当我执行jquery移动项目并动态更新listview时，我总是必须调用以下函数才能应用jquery移动样式：

$('#list_view_id').listview('refresh');

您应该尝试在回调函数中为列表视图调用此页面以进行页面更改。

Jquery移动设计 - Worklight

1 个答案: