Я работаю над примером проекта 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 для мобильных устройств. Что я здесь делаю неправильно?
.hide()и.show()просто добавьте этот$.mobile.changePage('#page3');, хотя я не уверен, что Worklight это потерпит. Это правильный способ навигации между страницами JQM. - person Omar schedule 27.09.2013