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 · 邱俊涛 | Juntao Qiu