worklight道场日历导航按钮重叠

时间:2014-09-17 21:22:40

标签: button dojo navigation calendar ibm-mobilefirst

我是Worklight的新手,我正在尝试制作混合应用程序。 我有Dojo日历的问题。 在设计时,日历看起来很好,但在预览中,导航按钮与日历重叠。 “Dojo Library Request”要求我在项目中添加一些库,所以我做了。

有人可以告诉我我做错了吗?

提前致谢。

(我无法添加图片,因为我没有足够的声誉)

这是我的代码,直到现在。

<!DOCTYPE HTML>
<html>

<head>
<link rel="stylesheet" type="text/css" href="dijit/themes/dijit.css">
<link rel="stylesheet" type="text/css"
	href="dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css"
	href="dojox/calendar/themes/claro/Calendar.css">

<meta charset="UTF-8">
    		<title>Test1</title>
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">

<link rel="stylesheet" href="dojo/dojox/calendar/themes/claro/Calendar.css" />
<link rel="stylesheet" href="css/main.css">

    		<script>window.$ = window.jQuery = WLJQ;</script>
    		<script type="text/javascript" src="dojox/mobile/deviceTheme.js"></script>
    		<script type="text/javascript" data-dojo-config="isDebug: false, async: true, parseOnLoad: true, mblHideAddressBar: false" src="dojo/dojo.js"></script>

       	
</head>
<body onload="WL.Client.init({})" style="display: none;" class="claro">

	<div data-dojo-type="dojox.mobile.ScrollableView" id="view0"
		data-dojo-props="selected:true">
		<div data-dojo-type="dojox.mobile.Heading"
			data-dojo-props="label:'Teamwork Planning'"></div>
		<ul data-dojo-type="dojox.mobile.TabBar" data-dojo-props="barType:'tabBar'">
			<li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="moveTo:'AboutPage',transition:'slide'" id="Tab1">About</li><li
				data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="moveTo:'PlanningPage',transition:'fade'" id="Tab2">Planning</li><li
				data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="moveTo:'UpdateFieldPage',transition:'fade'" id="Tab3">Update field</li>
		</ul>

		<div data-dojo-type="dojox.mobile.View" id="AboutPage" data-dojo-props="selected:true">
			Questo e' un programma di test sviluppato da Antonio Cosentino:<br>
			<ul>
				<li type="disc">
					Cliccare sulla tab 'Planning' per creare nuovi appuntamenti del Gruppo di Lavoro
				</li><br>
				<li type="disc">
					Clicccare su update field per testare l'aggiornamento di un campo su Sqlserver
				</li>
			</ul>
			
		</div>
		<div data-dojo-type="dojox.mobile.View" id="PlanningPage" data-dojo-props="selected:false">

				<div data-dojo-type="dojox.calendar.Calendar"
								data-dojo-props="dateInterval:'day'"
								style="position: absolute; width: 300px; height: 400px"></div>

		</div>
	


		<div data-dojo-type="dojox.mobile.View" id="UpdateFieldPage" data-dojo-props="selected:false">
			<table>
				<tbody>
					<tr>
						<td>Questa tab serve a testare l'aggiornamento di un campo</td>
						<td></td>
					</tr>
					<tr>
						<td>
							<label>Codice Officina</label>
						</td>
						<td>
							<input data-dojo-type="dojox.mobile.TextBox" id="fld_CodOff" onchange="fld_CodOff_OnChange()">
						</td>
					</tr>
					
					<tr>
						<td>
							<label>Ragione Sociale</label>
						</td>
						<td>
							<input data-dojo-type="dojox.mobile.TextBox" id="fld_RagSoc">
						</td>
					</tr>
					
					<tr>
						<td></td>
						<td>
							<button data-dojo-type="dojox.mobile.Button" id="ButtonAggiorna" onclick="ButtonAggiorna_OnClick()">Aggiorna</button>
						</td>
					</tr>
					
				</tbody>
			</table>
		</div>
		
	</div>
	
	<script src="js/initOptions.js"></script>
    		<script src="js/main.js"></script>
    		<script src="js/messages.js"></script>
</body>
</html>
 

2 个答案:

答案 0 :(得分:0)

dojox / calendar在工具中有一些限制。为了解决这个问题,您需要手动将以下内容从dojoLib / toolkit / dojo树复制到项目的dojo树中:

  • DojoX中/日历/主题/克拉罗/ *
  • 的dijit /图标/ *
  • dijit / themes / claro / *&lt; - 这里实际上只需要几个文件

完整复制前两个目录,然后您应该能够使用Chrome的网络检查器查看哪些其他文件在模拟器中显示404错误并手动复制它们直到看起来正确。

希望这有帮助

答案 1 :(得分:0)

我解决了这个问题。显然,worklight 6.2有一些bug需要修复。事实上,我更新了worklight(帮助检查更新),还有3个更新要做。其中一个是关于Dojo的。之后我创建了一个新的工作区和一个全新的项目,我注意到在新版本中,他们现在可以在添加日历时在项目中创建更多文件。但仍然缺少一些东西。所以我运行预览,然后点击手机,我选择检查日历:通过这种方式,我能够找到我的www文件夹中所有丢失的文件。在我添加它们之后它最终起作用!!!!经过25年的程序员和所有这些技术的服务,我无法相信你仍然需要做所有这些混乱,在表单中添加控件。也许.net太过分了! :)