| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657 |
- <!DOCTYPE html>
- <html>
- <head>
- <title>iPhone.Zepto</title>
- <link href="iphone.css" media="screen" rel="stylesheet" type="text/css" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
- <meta name="apple-mobile-web-app-capable" content="yes" />
- <meta name="format-detection" content="telephone=no" />
- </head>
- <body>
- <section id="menu">
- <div class="toolbar">
- <h1>Title</h1>
- </div>
- <ul class="menu">
- <li class="arrow"><a href="#menu_1">Menu 1</a></li>
- <li>Menu 1</li>
- <li>Menu 1</li>
- <li>Menu 1</li>
- <li>Menu 1</li>
- </ul>
- </section>
- <section id="menu_1">
- <div class="toolbar">
- <h1>Menu 1</h1>
- </div>
- <ul class="menu">
- <li>SubMenu 1</li>
- <li>SubMenu 2</li>
- </ul>
- </section>
- <script src="../../src/zepto.js"></script>
- <script src="../../src/event.js"></script>
- <script src="../../src/touch.js"></script>
- <script>
- $(document).ready(function(){
- var activate = ('createTouch' in document) ? 'touchstart' : 'click'
- $("body > section").first().addClass("current")
- $("a.back").live(activate, function(event) {
- var current = $(this).attr("href")
- $(".current").removeClass("current").addClass("reverse")
- $(current).addClass("current")
- })
- $(".menu a[href]").live(activate, function(event) {
- var link = $(this), section = link.closest('section'),
- prev_element = "#"+(section.removeClass("current").addClass("reverse").attr("id"))
- $(link.attr("href")).addClass("current")
- $(".current .back").remove()
- $(".current .toolbar").prepend("<a href=\""+prev_element+"\" class=\"back\">Back</a>")
- })
- })
- </script>
- </body>
- </html>
|
