第九天 jQuery.Mobile前端框架

第九天 jQuery.Mobile前端框架

jQuery 官网 http://jquery.com/
jQueryMobile 官网 http://jquerymobile.com/
jQueryMobile 帮助 http://api.jquerymobile.com/
jQueryMobile w3school帮助 http://www.w3school.com.cn/jquerymobile/index.asp

jQuery Mobile

jQuery Mobile 是创建移动 web 应用程序的框架。
jQuery Mobile 适用于所有流行的智能手机和平板电脑。
jQuery Mobile 使用 HTML5 和 CSS3 通过尽可能少的脚本对页面进行布局。

jQuery Mobile 安装

创建一个html的静态页面

touch index.html

1. head部分:
   1). 引入jquery、jqueryMobile文件

2). 设置屏幕宽度
方式一：设置屏幕宽度为设备宽度，禁止用户手动调整缩放

方式二：设置屏幕密度为高频，中频，低频自动缩放，禁止用户手动调整缩放

2. div的data-role属性

data-role="page" 是显示在浏览器中的页面
data-role="header" 创建页面上方的工具栏（常用于标题和搜索按钮）
data-role="content" 定义页面的内容，比如文本、图像、表单和按钮，等等
data-role="footer" 创建页面底部的工具栏
在这些容器中，您可以添加任意 HTML 元素 - 段落、图像、标题、列表等等。
提示：HTML5 data-* 属性用于通过 jQuery Mobile 为移动设备创建“对触控友好的”交互外观。

3. 在 jQuery Mobile 中添加页面

    在 jQuery Mobile，您可以在单一 HTML 文件中创建多个页面。
    请通过唯一的 id 来分隔每张页面，并使用 href 属性来连接彼此
   

   实例

   
     
   
       转到页面二
     
   
   
   
     
   
       转到页面一
     
   
   

4. 为 jQuery Mobile 按钮添加图标
   如需向您的按钮添加图标，请使用 data-icon 属性：

搜索

提示：您也可以在 或 元素中使用 data-icon 属性。
使用 data-iconpos 属性来规定位置: data-iconpos="top"

5. 页脚中的导航栏

    

      

        
更多
        
更少
        
删除
        
喜爱
        
信息