Jquery mobile IBM Worklight-应用程序在浏览器中正确显示,但在MBS中预览时不会显示
我正在编写Worklight混合应用程序,并在其中使用jQuery Mobile HTML:Jquery mobile IBM Worklight-应用程序在浏览器中正确显示,但在MBS中预览时不会显示,jquery-mobile,ibm-mobilefirst,worklight-console,worklight-mbs,Jquery Mobile,Ibm Mobilefirst,Worklight Console,Worklight Mbs,我正在编写Worklight混合应用程序,并在其中使用jQuery Mobile HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</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 rel="stylesheet" href="jqueryMobile/jquery/jquery.mobile-1.3.1.css">
<link rel="stylesheet" href="css/itemDetails.css">
<script>window.$ = window.jQuery = WLJQ;</script>
<script src="jqueryMobile/jquery/jquery-1.9.1.js"></script>
<script src="jqueryMobile/jquery/jquery.mobile-1.3.1.js"></script>
<script src="js/itemDetails.js"></script>
</head>
<body >
<div data-role="page" id="detailsPage">
<div data-role="header" id="itemDetailsNavBar">
<a href="#leftPanel" data-role="ui-icon-list-panel" data-corners="false" id="listButtonLeft"></a>
<h1>Item Details</h1>
<a href="index.html" data-role="ui-icon-edit" data-corners="false" id="editButtonRight"></a>
</div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/messages.js"></script>
<script src="modules/core/MenuPanel.js"></script>
</body>
</html>
@CHARSET "UTF-8";
#itemDetailsNavBar
{
background: #ffb400 !important;
height: 44px;
padding-top: 20px;
}
#listButtonLeft {
background: transparent url("images/list.png");
box-shadow: none;
data-corners :"false";
margin-top: 19px;
border: none;
}
#editButtonRight {
background: transparent url("images/edit.png");
box-shadow: none;
data-corners :"false";
margin-top: 15px;
border: none;
}
在浏览器中预览时,我可以正确地看到它:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</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 rel="stylesheet" href="jqueryMobile/jquery/jquery.mobile-1.3.1.css">
<link rel="stylesheet" href="css/itemDetails.css">
<script>window.$ = window.jQuery = WLJQ;</script>
<script src="jqueryMobile/jquery/jquery-1.9.1.js"></script>
<script src="jqueryMobile/jquery/jquery.mobile-1.3.1.js"></script>
<script src="js/itemDetails.js"></script>
</head>
<body >
<div data-role="page" id="detailsPage">
<div data-role="header" id="itemDetailsNavBar">
<a href="#leftPanel" data-role="ui-icon-list-panel" data-corners="false" id="listButtonLeft"></a>
<h1>Item Details</h1>
<a href="index.html" data-role="ui-icon-edit" data-corners="false" id="editButtonRight"></a>
</div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/messages.js"></script>
<script src="modules/core/MenuPanel.js"></script>
</body>
</html>
@CHARSET "UTF-8";
#itemDetailsNavBar
{
background: #ffb400 !important;
height: 44px;
padding-top: 20px;
}
#listButtonLeft {
background: transparent url("images/list.png");
box-shadow: none;
data-corners :"false";
margin-top: 19px;
border: none;
}
#editButtonRight {
background: transparent url("images/edit.png");
box-shadow: none;
data-corners :"false";
margin-top: 15px;
border: none;
}
但当通过Worklight Console的MBS预览时,我得到的是:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</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 rel="stylesheet" href="jqueryMobile/jquery/jquery.mobile-1.3.1.css">
<link rel="stylesheet" href="css/itemDetails.css">
<script>window.$ = window.jQuery = WLJQ;</script>
<script src="jqueryMobile/jquery/jquery-1.9.1.js"></script>
<script src="jqueryMobile/jquery/jquery.mobile-1.3.1.js"></script>
<script src="js/itemDetails.js"></script>
</head>
<body >
<div data-role="page" id="detailsPage">
<div data-role="header" id="itemDetailsNavBar">
<a href="#leftPanel" data-role="ui-icon-list-panel" data-corners="false" id="listButtonLeft"></a>
<h1>Item Details</h1>
<a href="index.html" data-role="ui-icon-edit" data-corners="false" id="editButtonRight"></a>
</div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/messages.js"></script>
<script src="modules/core/MenuPanel.js"></script>
</body>
</html>
@CHARSET "UTF-8";
#itemDetailsNavBar
{
background: #ffb400 !important;
height: 44px;
padding-top: 20px;
}
#listButtonLeft {
background: transparent url("images/list.png");
box-shadow: none;
data-corners :"false";
margin-top: 19px;
border: none;
}
#editButtonRight {
background: transparent url("images/edit.png");
box-shadow: none;
data-corners :"false";
margin-top: 15px;
border: none;
}
我将CSS从头部移除,并将其添加到body end标记之前,在模拟器和MBS中,一切似乎都很正常
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
</head>
<body >
<div data-role="page" id="detailsPage">
<div data-role="header" id="itemDetailsNavBar">
<a href="#leftPanel" data-role="ui-icon-list-panel" data-corners="false" id="listButtonLeft"></a>
<h1>Item Details</h1>
<a href="index.html" data-role="ui-icon-edit" data-corners="false" id="editButtonRight"></a>
</div>
</div>
<link rel="stylesheet" href="css/itemDetails.css">
<script src="js/itemDetails.js"></script>
</body>
</html>
在此处插入标题
项目详细信息
什么是数据角:“false”
应该做什么?我想是为了去除圆角。这不应该出现在css中,因为这不是css规则。你应该只使用它作为一个html属性,你似乎已经有。删除它从CSS,没有用!这是Worklight 6.0,对吗?已经有jquery内置,您不需要包括这一行:--它也不是jquery mobile,那么为什么要将它放在那个文件夹中呢?此外,该文件甚至没有被使用,因为您没有删除它上面的行,这意味着应用程序仍在使用内置jquery。