Html Tizen可穿戴应用程序按钮不可单击
我在一个漫画游戏中创建了两个类似按钮的href。我正在关注这一点。我的问题是链接不可点击。他们对触摸没有反应,点击时什么也不会发生 以下是项目结构: 以下是我的styles.css:Html Tizen可穿戴应用程序按钮不可单击,html,css,tizen,tizen-wearable-sdk,Html,Css,Tizen,Tizen Wearable Sdk,我在一个漫画游戏中创建了两个类似按钮的href。我正在关注这一点。我的问题是链接不可点击。他们对触摸没有反应,点击时什么也不会发生 以下是项目结构: 以下是我的styles.css: * { font-family: Verdana, Lucida Sans, Arial, Helvetica, sans-serif; } body { margin: 0px auto; background-color:#0a3003; } img { margin:
* {
font-family: Verdana, Lucida Sans, Arial, Helvetica, sans-serif;
}
body {
margin: 0px auto;
background-color:#0a3003;
}
img {
margin:0px;
padding:0px;
border:0px;
width:100%;
height:auto;
display:block;
float:left;
}
.btn {
display: inline-block;
padding: 15px 4% 15px 4%;
margin-left: 1%;
margin-right: 1%;
margin-top: 5px;
margin-bottom: 5px;
font-size: 30px;
text-align: center;
vertical-align: middle;
border: 0;
color: #ffffff;
background-color: #4b4237;
width: 40%;
height: 80px;
text-decoration: none;
}
现在我将向您展示index.html,其中按钮无法从以下位置单击:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=no">
<title>2nd Race</title>
<link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.min.css">
<link rel="stylesheet" media="all and (-tizen-geometric-shape: circle)" href="lib/tau/wearable/theme/default/tau.circle.min.css">
<!-- load theme file for your application -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div>
<div>
<img src="images/coverpage.png" alt="Cover Page"/>
</div>
<div>
<a href="#" class="btn" ><<</a>
<a href="comic/page1.html" class="btn" >>></a>
</div>
</div>
<script type="text/javascript" src="lib/tau/wearable/js/tau.min.js"></script>
<script type="text/javascript" src="js/circle-helper.js"></script>
<script src="app.js"></script>
<script src="lowBatteryCheck.js"></script>
</body>
</html>
第二场比赛
当我将程序加载到tizen wearable emulator上时,它看起来像这样,但没有任何东西是可点击的:
在我看来,
如果您想使用tau.js库在页面之间移动,需要遵循它们的规则。这是一些参考指南。可能出现此问题是因为您没有定义TAU的“页面”。
这很简单。只需在根标记中插入class=“ui page”。
我用TizenIDE在我的桌面上进行了测试。在index.html中
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=no">
<title>2nd Race</title>
<link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.min.css">
<link rel="stylesheet" media="all and (-tizen-geometric-shape: circle)" href="lib/tau/wearable/theme/default/tau.circle.min.css">
<!-- load theme file for your application -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="ui-page">
<div class="ui-content">
<img src="images/coverpage.png" alt="Cover Page"/>
<div>
<a href="#" class="btn"><<</a>
<a href="comic/page1.html" class="btn">>></a>
</div>
</div>
</div>
<script type="text/javascript" src="lib/tau/wearable/js/tau.min.js"></script>
<script type="text/javascript" src="js/circle-helper.js"></script>
<script src="app.js"></script>
<script src="lowBatteryCheck.js"></script>
</body>
</html>
第二场比赛
每隔一页(漫画/page1.html、page2.html…等)
请用上面的例子再试一次。我检查过项目现在运行良好:)
<!DOCTYPE html>
<html>
<body>
<div class="ui-page">
<div class="ui-content">
<img src="../images/page1.png" alt="Page 1" />
<div>
<a href="../index.html" class="btn" ><<</a>
<a href="page2.html" class="btn" >>></a>
</div>
</div>
</div>
<script type="text/javascript" src="../../lib/tau/wearable/js/tau.min.js"></script>
</body>
</html>