[英]Tizen Wearable app buttons not clickable
I have created two href's which act like buttons, in a comic game. 我在漫画游戏中创建了两个href,它们的作用类似于按钮。 I am following this tutorial . 我正在关注本教程 。 The issue i have is the links are not clickable. 我的问题是链接不可点击。 They dont respond to touch, nothing happens when clicked. 他们不响应触摸,单击时没有任何反应。
Here is the project structure: 这是项目结构:
here is my styles.css: 这是我的styles.css:
* {
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;
}
and now i'll show you the index.html where the button is not clickable from : 现在,我将向您显示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>
When i load the program onto the tizen wearable emulator it looks like this but nothing is clickable: 当我将程序加载到tizen可穿戴模拟器上时,它看起来像这样,但是没有可点击的内容:
In my opinion, if you want to move between pages with tau.js library, you need to follow their rule. 我认为,如果要在带有tau.js库的页面之间移动,则需要遵循它们的规则。 Here is some reference guide. 这是一些参考指南。
https://developer.tizen.org/development/ui-practices/web-application/tau/hello-world#fill_content https://developer.tizen.org/development/ui-practices/web-application/tau/hello-world#fill_content
Maybe this issue was appeared because you didn't define "page" of TAU. 也许出现此问题是因为您没有定义TAU的“页面”。
It is very simple. 这很简单。 Just insert class="ui-page" in root <div> tag. 只需在根<div>标记中插入class =“ ui-page”。
I tested on my desktop with Tizen IDE. 我使用Tizen IDE在台式机上进行了测试。 In your index.html, 在您的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>
And on every other pages(comic/page1.html, page2.html... etc) 并在其他所有页面上(comic / 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>
Please try again with above my example. 请在我的示例上方重试。
I checked that project runs well now :) 我检查了项目现在运行良好:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.