0

ログインモジュールを使用しているワークライトのサンプルプロジェクトに取り組んでいます。だから私はからログインモジュールページをトリガーしていますwlCommonInit

function wlCommonInit(){

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


}

含まれている

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

Jquery モバイル設計用。しかし、通常のテキスト ボックスが表示されるため、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います。そこから、プロシージャを実行するクリックイベントをバインドしています。成功したら、このようにページ 3 に変更します。

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

displayFeeds関数は、リストビューのスタイリングを処理します。しかし、それも jquery モバイル設計をサポートしていません。ここで何が間違っていますか？

4

1 に答える 1