iOS开发记录（4）

来源：互联网发布：c语言预处理命令讲解编辑：程序博客网时间：2024/06/06 04:48
<!DOCTYPE html><html>    <head>        <title>title</title>        <meta charset="utf-8">        <meta name="viewport" content="width=device-width, initial-scale=1">        <script src="lib/jquery-1.6.4.js"></script>        <script src="lib/jquery.mobile-1.0.js"></script>        <script src="lib/web-ui-fw-libs.js"></script>        <script src="lib/web-ui-fw.js"></script>        <link href="src/css/jquery.mobile.structure-1.0.css" rel="stylesheet">        <link href="src/css/jquery.mobile-1.0.css" rel="stylesheet">        <link href="src/css/web-ui-fw-theme.css" rel="stylesheet">        <link href="src/css/web-ui-fw-widget.css" rel="stylesheet">        <style>.tabbar .ui-btn .ui-btn-inner { font-size: 11px!important; padding-top: 24px!important; padding-bottom: 0px!important; }.tabbar .ui-btn .ui-icon { width: 30px!important; height: 20px!important; margin-left: -15px!important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: none !important; border-radius: none !important; }#home .ui-icon { background:  url(images/53-house-w.png) 50% 50% no-repeat; background-size: 22px 20px; }#bottles .ui-icon { background:  url(images/107-widescreen-w.png) 50% 50% no-repeat; background-size: 25px 17px; }#pick .ui-icon { background:  url(images/12-eye-lg.png) 50% 50% no-repeat; background-size: 20px 20px; }#about .ui-icon { background:  url(images/15-tags-w.png) 50% 50% no-repeat; background-size: 20px 20px; }.segmented-control { text-align:center;}.segmented-control .ui-controlgroup { margin: 0.2em; }.ui-control-active, .ui-control-inactive { border-style: solid; border-color: gray; }.ui-control-active { background: #BBB; }.ui-control-inactive { background: #DDD; }</style>    </head>        <body>        <div data-role="page" id="page1">            <div data-role="header">                <h1>末日漂流瓶</h1>                <div data-role="navbar" class="tabbar">                    <ul><li><a href="#page1" id="home" data-icon="custom" class="ui-btn-active">首页</a></li><li><a href="#page2" id="bottles" data-icon="custom">漂流瓶</a></li><li><a href="#page5" id="about" data-icon="custom">关于</a></li>    </ul>                </div>            </div>            <div data-role="content">                                <ul data-role="listview" data-inset="true">                    <li>亲，你知道的，12月21日是末日。</li>                    <li>末日有可能来，</li>                    <li>有可能不来。</li>                    <li>我们就假设末日会到来吧。</li>                    <li>末日那天，你会做什么呢？</li>                    <li>过了12月21日，一切都不存在了。</li>                    <li>过了那天，</li>                    <li>说过的话，做过的事，爱过的人，</li>                    <li>都不在了。</li>                </ul>            </div>        </div>        <div data-role="page" id="page2">            <div data-role="header">                <h1>末日漂流瓶</h1>                <div data-role="navbar" class="tabbar">                    <ul><li><a href="#page1" id="home" data-icon="custom">返回</a></li><li><a href="#page3" id="throw" data-icon="custom">扔瓶子</a></li><li><a href="#page4" id="pick" data-icon="custom">捞瓶子</a></li>    </ul>                </div>            </div>            <div data-role="content">                <img src="images/splash.jpg">            </div>        </div>        <div data-role="page" id="page3">            <div data-role="header">                <h1>末日漂流瓶</h1>                <div data-role="navbar" class="tabbar">                    <ul><li><a href="#page1" id="home" data-icon="custom">返回</a></li><li><a href="#page3" id="throw" data-icon="custom" class="ui-btn-active">扔瓶子</a></li><li><a href="#page4" id="pick" data-icon="custom">捞瓶子</a></li>    </ul>                </div>            </div>            <div data-role="content">                <img src="images/info1.png" width="99%">                <form action="" method="POST">                    <textarea><##></textarea>                </form>                <a data-role="button" href=“#” data-icon="star">我扔</a>            </div>        </div>        <div data-role="page" id="page4">            <div data-role="header">                <h1>末日漂流瓶</h1>                <div data-role="navbar" class="tabbar">                    <ul><li><a href="#page1" id="home" data-icon="custom">返回</a></li><li><a href="#page3" id="throw" data-icon="custom">扔瓶子</a></li><li><a href="#page4" id="pick" data-icon="custom" class="ui-btn-active">捞瓶子</a></li>            </ul>                </div>            </div>            <div data-role="content" align="center">                <label align="center">亲，摇一摇吧</label>                <br/>                <img src="images/info2.png" align="center">            </div>        </div>        <div data-role="page" id="page5">            <div data-role="header">                <h1>末日漂流瓶</h1>            <div data-role="navbar" class="tabbar">                     <ul><li><a href="#page1" id="home" data-icon="custom">首页</a></li><li><a href="#page2" id="bottles" data-icon="custom">漂流瓶</a></li><li><a href="#page5" id="about" data-icon="custom" class="ui-btn-active">关于</a></li>    </ul></div>            </div>            <div data-role="content">                <div class="ui-grid-a">                    <img src="images/logo-trans.png" width="80%">                    <div class="ui-block-a">                        <label>亲，这个应用只能用一次，如果你已经扔过瓶子，或是已经捞过瓶子，那么，请你，请你静静的等待末日过后，把这个应用删了吧。^_^</label>                    </div>                    <div class="ui-block-b"><img src="images/footer.png" width="99%"></div>                </div>            </div>        </div>    </body></html>
接着昨天的，把app的框架搭了起来。
主要就一个页面，几行代码。如上。
剩下的是几个功能点：
1、扔瓶子的时候，将文字内容以JSON的格式发给服务端，并接收服务端返回消息。
2、扔完瓶子后在手机上记录已经扔过瓶子，等末日来吧。
3、捞瓶子用的是摇一摇的功能，应该要调用phoneGap的API来实现。
4、捞完后记录手机以后打开就只显示捞到的瓶子。