文章/答案/技术大牛

发布

社区首页 >问答首页 >Jquery Mobile Design - Worklight

问Jquery Mobile Design - Worklight
EN

Stack Overflow用户

提问于 2013-09-27 18:21:28

回答 1查看 438关注 0票数 0

我正在处理worklight的一个示例项目，其中我使用了登录模块。因此，我将从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，并从那里绑定一个运行过程的单击事件。成功后，我将其更改为第3页，如下所示。

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

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

jquery

jquery-mobile

ibm-mobilefirst

worklight-server

回答 1

Stack Overflow用户

发布于 2013-10-17 01:11:37

我认为这些评论是正确的。样式没有出现在你的列表中，因为你没有以“jquery的方式”显示你的列表。这将通过调用$.mobile.changepage() (如注释中所述)来实现。

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

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

您应该尝试在页面更改的回调函数中为listview调用此函数。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/19048389

复制

相似问题

问Jquery Mobile Design - Worklight
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jquery Mobile Design - WorklightEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jquery Mobile Design - Worklight
EN