jQuery Mobile 101

###jQuery mobile jQuery Mobile是一个基于jQuery/jQuery-ui的UI库,用于构建基于HTML5的应用程序,当然它主要针对移动设备平台,开发者使用它可以很容易的开发出运行在ios/android/windows phone上的应用,这些应用(尽管运行在不同的硬件/软件系统上)在界面上看起来几乎一致。 ###基本元素 ####页面布局 在移动设备上,一个页面一般由三部分组成(header区域,content区域,footer区域),当然,有的页面可能会缺失一部分(最常见的如:没有footer的长列表),jQuery Mobile通过在DOM元素上定义data-role来指定元素的归属: page 整个页面 header header区域 content content区域 footer footer区域 <div data-role='page'> <div data-role='header'> <h1>This is header</h1> </div> <div data-role='content'> <p>This is content</p> </div> <div data-role='footer'> <h1>This is footer</h1> </div> </div> ####多个页面 通常一个应用程序会有多个“页面”,在jQuery Mobile中,所有的“页面”都放在同一个html文件中,通过data-role为page的元素的id来指定一个页面: <div data-role='page' id='edit-page'> <div data-role='header'> <h1>Edit page</h1> </div> <div data-role='content'> <form> <label for='desc'>Description: </label> <input type='text' value='' /> </form> </div> </div> 在另一个页面中,可以通过link的href来引用这个id: <a href="#edit-page">Go to edit page</a> ####列表元素...

February 14, 2013 1 min

使用Heroku开发Web应用

###heroku 使用heroku,开发人员可以很容易的将自己的应用程序公开给世界上的其他用户使用,heroku会为你提供一个url,一些预设的空间如数据库(postgresql)等。这对于需要频繁远程showcase的场景提供了非常好的方式,当然对于开发人员向其他的开发人员或者最终用户展现自己的框架的外观/行为等场景也会非常有用。 ###在heroku上注册用户 首先,当然是在heroku上注册一个开发账户,如果你已经注册过,就请接着第二步 ###下载heroku的本地Toolbox heroku提供了一个很好用的工具包,通过这个工具包,开发人员可以很容易的对部署在heroku上的应用程序做操作。 ###在本地登陆heroku 如果没有上传过key的话,heroku会提醒你创建一个新的ssh公钥,然后上传到heroku(这个过程与使用github非常类似) $ heroku login Enter your Heroku credentials. Email: adam@example.com Password: Could not find an existing public key. Would you like to generate one? [Yn] Generating new SSH public key. Uploading ssh public key /Users/adam/.ssh/id_rsa.pub 如果已经上传过key,则可以直接登陆 ###准备工作 在本地生成一个应用程序的基本结构,如:Gemfile,目录结构等。然后在本地配置好git环境,比如: $ git init $ git add . $ git commit -m "init" 准备Procfile: web: bundle exec ruby app.rb -p $PORT -E production app.rb相当于你的应用程序的主入口(main),-E指定运行环境(此处指定为production),你的应用程序可能会根据次设置来进行一些资源的选择(数据库指向,资源文件位置等) 在上传之前,需要确保自己的应用程序可以在本地正常运行: foreman start 应用程序将在本地的5000端口上运行,此时可以做一些简单的验证,保证应用程序运行正常。...

January 26, 2013 1 min