巧克力片UI导航无法使用Dukescript

时间：2016-01-24 19:04:24

标签： dukescript chocolatechip-ui

由于其导航功能，我决定加入，但似乎没有效果。

正如您在此Web示例中看到的那样，它可以正常工作，但它不适用于Dukescript。

.icon.help {
  background-image: url('https://cdn2.iconfinder.com/data/icons/bitsies/128/Info-128.png');
}
.icon.config {
  background-image: url('https://cdn1.iconfinder.com/data/icons/technology-and-hardware-2/200/vector_66_14-128.png');
}
.icon.about {
  background-image: url('https://cdn0.iconfinder.com/data/icons/news-and-magazine/512/about_us-128.png');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77047/chui-3.0.4.min.js"></script>
<link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77047/chui.ios-3.0.4.min.css" rel="stylesheet" />
<nav class='current'>
  <h1 id='mainTitle'>Unnofficial Oracle PL/SQL Developer Certified Associate Simulator</h1>
</nav>

<article id="main" class="current">
  <h1 class="master">Menú Principal</h1>
  <ul class="list">
    <li class="comp" data-goto="config">
      <aside>
        <span class="icon config"></span>
      </aside>
      <h3>Configuración</h3>
    </li>
    <li class="comp" data-goto="help">
      <aside>
        <span class="icon help"></span>
      </aside>
      <h3>Ayuda</h3>
    </li>
    <li class="comp" data-goto="about">
      <aside>
        <span class="icon about"></span>
      </aside>
      <h3>Acerca de...</h3>
    </li>
  </ul>
  <p>La mayoría de las marcas mencionadas son propiedad de &copy; Oracle Inc.</p>
  <p>Este simulador de exámen está basado en mi propio conocimiento y podría no ajustarse a sus encesidades específicas.</p>
</article>
<nav class="next">
  <a href="#" class="button back">Menú</a>
  <h1 id='recipeTitle'>Ayuda</h1>
</nav>
<article id="help" class="next">
  <section>
    <h2>Ayuda</h2>
    <ul class="list">
      <li>
        <ul id='ingredients'></ul>
      </li>
    </ul>
    <h2>Directions</h2>
    <ul class="list">
      <li>
        <ol id='directions'></ol>
      </li>
    </ul>
  </section>
</article>
<nav class="next">
  <a href="#" class="button back">Menú</a>
  <h1 id='recipeTitle'>Configuración</h1>
</nav>
<article id="config" class="next">
  <section>
    <h2>Configuración</h2>
    <button value="some button" />
    <h2>Directions</h2>
    <ul class="list">
      <li>
        <ol id='directions'></ol>
      </li>
    </ul>
  </section>
</article>
<nav class="next">
  <a href="#" class="button back">Menú</a>
  <h1 id='recipeTitle'>Acerca De...</h1>
</nav>
<article id="about" class="next">
  <section>
    <h2>Acerca De...</h2>
    <button value="some button" />
    <h2>¿Quien hizo esta app?</h2>
    <p>
      Esta aplicación fue hecha por Ruslan López
    </p>
  </section>
</article>

代码

HTML：                                                                  

        <meta name="apple-mobile-web-app-title" content="OCA">

        <title>Simulador no Oficial para la certificación de PL/SQL</title>

        <style>
            .icon.help {
                background-image: url('https://cdn2.iconfinder.com/data/icons/bitsies/128/Info-128.png');
            }

            .icon.config {
                background-image: url('https://cdn1.iconfinder.com/data/icons/technology-and-hardware-2/200/vector_66_14-128.png');
            }

            .icon.about {
                background-image: url('https://cdn0.iconfinder.com/data/icons/news-and-magazine/512/about_us-128.png');
            }

        </style>
        <link href="css/chui/chui-ios-3.8.0.min.css" rel="stylesheet" type="text/css">
        <script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
        <script src="js/chui/chui-3.8.0.min.js" type="text/javascript"></script>
    </head>
    <body contenteditable="true">
        <nav class='current'>
            <h1 id='mainTitle'>Simulador no Oficial para la certificación de PL/SQL</h1>
        </nav>

        <article id="main" class="current">
            <h1 class="master">Menú Principal</h1>
            <ul class="list">
                <li class="comp" data-goto="config">
                    <aside>
                        <span class="icon config"></span>
                    </aside>
                    <h3>Configuración</h3>
                </li>
                <li class="comp" data-goto="help">
                    <aside>
                        <span class="icon help"></span>
                    </aside>
                    <h3>Ayuda</h3>
                </li>
                <li class="comp" data-goto="about">
                    <aside>
                        <span class="icon about"></span>
                    </aside>
                    <h3>Acerca de...</h3>
                </li>
            </ul>
            <p>La mayoría de las marcas mencionadas son propiedad de &copy; Oracle Inc.</p>
            <p>Este simulador de exámen está basado en mi propio conocimiento y podría no ajustarse a sus encesidades específicas.</p>
        </article>
        <nav class="next">
            <a href="#" class="button back">Menú</a>
            <h1 id='recipeTitle'>Ayuda</h1>
        </nav>
        <article id="help" class="next">
            <section>
                <h2>Ayuda</h2>
                <ul class="list">
                    <li>
                        <ul id='ingredients'></ul>
                    </li>
                </ul>
                <h2>Directions</h2>
                <ul class="list">
                    <li>
                        <ol id='directions'></ol>
                    </li>
                </ul>
            </section>
        </article>
        <nav class="next">
            <a href="#" class="button back">Menú</a>
            <h1 id='recipeTitle'>Configuración</h1>
        </nav>
        <article id="config" class="next">
            <section>
                <h2>Configuración</h2>
                <button value="some button" />
                <h2>Directions</h2>
                <ul class="list">
                    <li>
                        <ol id='directions'></ol>
                    </li>
                </ul>
            </section>
        </article>
        <nav class="next">
            <a href="#" class="button back">Menú</a>
            <h1 id='recipeTitle'>Acerca De...</h1>
        </nav>
        <article id="about" class="next">
            <section>
                <h2>Acerca De...</h2>
                <button value="some button">sss </button>
                <h2>¿Quien hizo esta app?</h2>
                <p>
                    Esta aplicación fue hecha por Ruslan López
                </p>
            </section>
        </article>


        <!-- ${browser.bootstrap} -->
    </body>
</html>

爪哇：

对于java，只删除了项目生成的示例代码的一些内容。

package com.codermasters.simulators.ocaplsql;

import net.java.html.json.ComputedProperty;
import net.java.html.json.Function;
import net.java.html.json.Model;
import net.java.html.json.Property;
import com.codermasters.simulators.ocaplsql.js.Dialogs;

/** Model annotation generates class Data with
 * one message property, boolean property and read only words property
 */
@Model(className = "Data", targetId="", properties = {
    @Property(name = "message", type = String.class),
    @Property(name = "rotating", type = boolean.class)
})
final class DataModel {
//preguntasFelices    
    //pregunta
        //categoría
    //respuestas
        // mensaje
        // es aceptable


    @Function static void showScreenSize(Data model) {
        model.setMessage(Dialogs.screenSize());
    }
    private static Data ui;
    /**
     * Called when the page is ready.
     */
    static void onPageLoad() throws Exception {
        ui = new Data();
        ui.setMessage("Hello World from HTML and Java!");
        ui.applyBindings();
    }
}

是否可以修复javascript导航？

0 个答案:

没有答案
相关问题
最新问题