Кнопки приложения Tizen Wearable не нажимаются

Я создал два href, которые действуют как кнопки в комической игре. Я следую этому учебнику. . У меня проблема в том, что ссылки не кликабельны. На прикосновения не реагируют, при нажатии ничего не происходит.

Вот структура проекта:

введите здесь описание изображения

вот мои стили.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;
}

а теперь я покажу вам 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" >&lt;&lt;</a>
            <a href="comic/page1.html" class="btn" >&gt;&gt;</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, она выглядит так, но ничего не кликабельно:

введите здесь описание изображения


html css tizen tizen-wearable-sdk
person j2emanue    schedule 14.12.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

На мой взгляд, если вы хотите перемещаться между страницами с библиотекой tau.js, вам нужно следовать их правилу. Вот справочное руководство.
https://developer.tizen.org/development/ui-practices/web-application/tau/hello-world#fill_content

Возможно, эта проблема возникла из-за того, что вы не определили "страницу" TAU.
Это очень просто. Просто вставьте class="ui-page" в корневой тег ‹div›.
Я тестировал на своем рабочем столе с Tizen IDE. В вашем 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">&lt;&lt;</a>
          <a href="comic/page1.html" class="btn">&gt;&gt;</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>

И на всех остальных страницах (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" >&lt;&lt;</a>
          <a href="page2.html" class="btn" >&gt;&gt;</a>
        </div>
      </div>
    </div>
    <script type="text/javascript" src="../../lib/tau/wearable/js/tau.min.js"></script>
  </body>
</html>

Пожалуйста, попробуйте еще раз с моим примером выше.
Я проверил, что проект теперь работает нормально :)

person Lucy    schedule 29.12.2015