全栈工程师 09 笔记（jquery mobile）

jQuery Mobile 前端框架

1. jQuery Mobile 是创建移动 web 应用程序的框架。

2. jQuery Mobile 适用于所有流行的智能手机和平板电脑。
3. jQuery Mobile 使用 HTML5 和 CSS3 通过尽可能少的脚本对页面进行布局。
   jQueryMobile 官网 http://jquerymobile.com/
   jQueryMobile 帮助 http://api.jquerymobile.com/
   w3school http://www.w3school.com.cn/jquerymobile/index.asp
   jQuery 官网 http://jquery.com/

jQuery Mobile 安装

1. 创建一个静态页面文件
   touch index.html

2. head头部引入

   从 CDN 中加载 jQuery Mobile 百度CDN：

下载 jQuery Mobile
将 jQuery Mobile 放于你的主机中,可以从 jQuerymobile.com下载该文件。

设置屏幕宽度(两种)

    1. 
     
    2. 
     

div data-role属性：

data-role="page" 是在浏览器中显示的页面。
data-role="header" 是在页面顶部创建的工具条 (通常用于标题或者搜索按钮)
data-role="main" 定义了页面的内容，比如文本， 图片，表单，按钮等。
"ui-content" 类用于在页面添加内边距和外边距。
data-role="footer" 用于创建页面底部工具条。
提示：在这些容器中你可以添加任何 HTML 元素 - 段落, 图片, 标题, 列表等。

在 jQuery Mobile 中添加页面

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

例子：

  
    
      跳转到第二个页面 
  

  
  
    
     跳转到第一个页面 
  

为 jQuery Mobile 按钮

在 jQuery Mobile 中，按钮可通过三种方式创建：
使用 元素
使用 元素
使用带有 data-role="button" 的 元素

1. 普通按钮：data-role="button"
   按钮
   转到页面二

2. 行内按钮：
   如果需要按钮适应其内容，或者如果需要两个或多个按钮并排显示，请添加 data-inline="true"
   转到页面二

3. 组合按钮：

   
   按钮 1
   按钮 2
   按钮 3
   

4. 后退按钮：
   返回

5. 更多用于按钮的 data-* 属性：值都是 true/false
   data-corners 规定按钮是否有圆角
   data-mini 规定是否是小型按钮
   data-shadow 规定按钮是否有阴影

jQuery Mobile 页面切换效果

页面切换效果可被应用于任何使用 data-transition 属性的链接或表单提交：

切换到第二个页面

过度	描述
fade	默认。淡入到下一页
flip	从后向前翻转到下一页
flow	抛出当前页面，引入下一页
pop	像弹出窗口那样转到下一页
slide	从右向左滑动到下一页
slidefade	从右向左滑动并淡入到下一页
slideup	从下到上滑动到下一页
slidedown	从上到下滑动到下一页
turn	转向下一页
none	过渡无效果

想要页面从左向右滑动，而不是从右向左滑动，请使用带有 "reverse" 值的 data-direction 属性。在后退按钮上这是默认的。

切换

** 页面底部的导航栏**

 
  

     

       
更多
 
       
更少
 
       
删除
       
喜爱
       
信息