0
나는 로그인 모듈을 사용하고있는 worklight 샘플 프로젝트를 진행 중이다. 그래서 나는 JQuery와 모바일 디자인을위한 포함 된 wlCommonInitJquery Mobile Design - Worklight
function wlCommonInit(){
WL.Client.login("AuthRealm", {onSuccess: winFunction, onFailure: failureFunction});
}
window.$ = WLJQ;
window.jQuery = WLJQ;
에서 로그인 모듈 페이지를 유발하고있다. 하지만 여전히 Jquery Mobile 디자인은 일반 텍스트 상자를 보여 주므로 작동합니다. Here`s 내 전체 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을 표시하고있는 사용자가 로그인. 그것의 성공에 나는 이것을 이렇게 바꾸고있다.
function loadSQLQueerySuccess(result){
WL.Logger.debug("Retrieve success" + JSON.stringify(result));
$("#page2").hide();
$("#page3").show();
displayFeeds(result.invocationResult.resultSet);
}
displayFeeds 함수는 listview의 스타일을 결정합니다. 하지만 너무 jquery 모바일 디자인을 지원하지 않습니다. 여기서 내가 뭘 잘못하고 있니?
page2를 떠나기 전이나 후에 page3에 항목을 삽입합니까? – Omar
div # facility1에 클릭 이벤트를 바인딩하고 있습니다. 클릭하면 프로 시저를 호출합니다. 해당 프로 시저의 Onsuccess (Function)에서 데이터를 Page3에 주입하고 있습니다. – Ash
그리고 page3으로 이동합니까? listview는 스타일이 지정되지 않았습니까? – Omar