progress

by Yoshiharu Kamata

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css">
<section id="home" data-role="page">
    <header data-role="header">
         <h1>ホームタスク</h1>

    </header>
    <div data-role="content">
        <ul data-role="listview">
            <li data-role="list-divider">機能</li>
            <li> <a href="#start-task">勉強を開始する</a> 
            </li>
            <li> <a href="#result">勉強結果を見る</a>

            </li>
        </ul>
    </div>
</section>
<section id="start-task" data-role="page">
    <header data-role="header">
         <h1>勉強開始</h1>

    </header>
    <div data-role="content">
        <form>
            <label>教科
                <select>
                    <option>国語</option>
                    <option>算数</option>
                    <option>理科</option>
                    <option>社会</option>
                </select>
            </label>
            <label>種類
                <select>
                    <option>ホームタスク</option>
                    <option>ベーシックトレーニング</option>
                    <option>チャレンジ1000題</option>
                    <option>スピードチャレンジ</option>
                    <option>演習</option>
                </select>
            </label>
            <label>結果
                <input type="text" />
            </label> 
            <a class="timer start" href="#timer" data-role="button">開始</a>
 <a href="#" data-role="button">登録</a>

        </form>
    </div>
</section>
<section id="timer" data-role="page">
    <div data-role="content">
        <div> <span class="time">00:00:00</span>

        </div>
        <fieldset class="ui-grid-a">
            <div class="ui-block-a">
                <a href="#start-task" class="timer finish" data-role="button">完了</a>
            </div>
            <div class="ui-block-b">
                <a href="#"...

CSS

#timer .time {
    font-size: 6em;
}

CoffeeScript

#class Task extends Backbone.Model
    
#class TaskInfo extends Backbone.Model

#class TaskList extends Backbone.Collection
#    model: Task

#class TaskInfoList extends Backbone.Collection
#    model: TaskInfo
class Timer extends Backbone.View
  events:
    "click .timer.finish", ""
$ ->
  $(document).on "click", ".timer.start", ->
    console.log "start", $.now()