必威jQuery Mobile 学习。jQuery Mobile

jQuery
Mobile是创造移动web应用程序触控优化的框架,适用于流行智能手机和平板电脑,构建于jQuery之上.
它们见面自行吗网页设计互动的易用外观,并于颇具活动设计上保持一致.

1.其是呀

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

在线教程:http://www.w3school.com.cn/jquerymobile/index.asp
法定下载:http://jquerymobile.com/

页面添加

1.从CDN引用jQuery Mobile
2.从 jQuerymobile.com下载jQuery Mobile库

2. 广泛应用

  • 单页面多采用
  • 混合APP开发

  • 哪下


<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
         /*
     content属性值 :
          width:可视区域的宽度,值可为数字或关键词device-width
          height:同width
          intial-scale:页面首次被显示是可视区域的缩放级别,取值1.0则页面按实际尺寸显示,无任何缩放
          maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别,
          maximum-scale用户可将页面放大的程序,1.0将禁止用户放大到实际尺寸之上。
          user-scalable:是否可对页面进行缩放,no 禁止缩放
         */
    <link rel="stylesheet" href="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.css" />
    <script src="http://code.jquery.com/jquery-[version].min.js"></script>
    <script src="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.js"></script>
</head>
<body>

<div data-role="page">

    <div data-role="header">
        <h1>Page Title</h1>
    </div><!-- /header -->

    <div role="main" class="ui-content">
        <p>Page content goes here.</p>
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

</body>
</html>

官网DEMO地址:http://demos.jquerymobile.com/1.4.5/

  • 页面

<body>
<div data-role="page">

    <div data-role="header">
        <h1>Page Title</h1>
    </div><!-- /header -->

    <div role="main" class="ui-content">
        <p>Page content goes here.</p>
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->
</body>

事例说:
data-role=”page” 是显得在浏览器中之页面
data-role=”header” 创建页面顶端之工具栏(常用于标题和找按钮)
data-role=”content” 定义页面的情节,比如文本、图像、表单和按钮,等等
data-role=”footer” 创建页面底部的工具栏
备注:在这些器皿被,您可以加上任意 HTML 元素 –
段落、图像、标题、列表等等。
提示:HTML5 data-* 属性用于通过 jQuery Mobile
为运动装备创建“对触控友好的”交互外观。

  • 单页面多用
  • 1.当 jQuery Mobile,您可以单一 HTML 文件中开创多单页面。
  • 2.伸手通过唯一的 id 来分隔每张页面,并利用 href 属性来连接彼此

<body>
<!-- Start of first page -->
<div data-role="page" id="pageone">
    <div data-role="header">
        <h1>pageone</h1>
    </div><!-- /header -->
    <div role="main" class="ui-content">
        <p>I'm first in the source order so I'm shown as the page.</p>
        <p>View internal page called <a href="#pagetwo">to pagetwo</a></p>
    </div><!-- /content -->
    <div data-role="footer" data-position="fixed">
        <h4>Page Footer</h4>
        <div data-role="navbar">
            <ul>
              <li><a href="#pageone">页面一</a></li>
              <li><a href="#pagetwo">页面二</a></li>
            </ul>
          </div>        
    </div><!-- /footer -->
</div><!-- /page -->

<!-- Start of first page -->
<div data-role="page" id="pagetwo">

    <div data-role="header">
        <h1>pagetwo</h1>
    </div><!-- /header -->

    <div role="main" class="ui-content">
        <p>I'm first in the source order so I'm shown as the page.</p>
        <p>View internal page called <a href="#pageone">to pageone</a></p>
    </div><!-- /content -->

    <div data-role="footer" data-position="fixed">
        <h4>Page Footer</h4>
        <div data-role="navbar">
            <ul>
              <li><a href="#pageone">页面一</a></li>
              <li><a href="#pagetwo">页面二</a></li>
            </ul>
          </div>        
    </div><!-- /footer -->
</div><!-- /page -->
</body>
  • 于 jQuery Mobile 中创造按钮
    jQuery Mobile 中之按钮可由此三种植方式创建:

    • 使用 <button> 元素
    • 使用 <input> 元素
    • 使用 data-role=”button” 的 <a>元素

<button>按钮</button>
<input type="button" value="按钮">
<a href="#" data-role="button">按钮</a>
  • 于 jQuery Mobile 过渡效果
    jQuery Mobile 拥有同等多元关于如何由平页过渡至下一样页的功能。
    注解:如需要兑现通效果,浏览器必须支持 CSS3 3D 转换:

jQuery Mobile页面

用于通过jQuery Mobile为走装备创建自己的交互外观

  • data-role=’page’:浏览器被形的页面
  • data-role=’header’:在页面顶层创建工具条(通常用于标题,搜索按钮)
  • data-role=’main’:定义页面的情,例如文本,按钮等
  • data-role=’footer’:用于创造页面底部工具条
浏览器支持
Internet Explorer 10 支持 3D 转换(更早的版本不支持)
Opera 仍然不支持 3D 转换

通效果可使叫自由链接或者透过采取 data-transition 属性进行的表单提交:

<a href="#anylink" data-transition="slide">滑动到页面二</a>

翻开官方:http://www.w3school.com.cn/jquerymobile/jquerymobile\_transitions.asp

  • jQuery Mobile 事件
    卿能够在 jQuery Mobile 中行使其他专业的 jQuery
    事件。
    另外,jQuery Mobile 还提供多栽也走浏览定制的风波:
  • 触摸事件 – 当用户触摸屏幕时接触(敲击和滑动)
  • 滚动事件 – 当左右滚动时接触
  • 趋势事件 – 当设备垂直或水平旋转时接触
  • 页面事件 – 当页面被显示、隐藏、创建、加载与/或卸载时点

假设用有关所有 jQuery Mobile 事件之圆信息,请看我们的 jQuery Mobile
事件参考手册。

以上使用办法才是一致有的,更多之运方法要查阅官方。
官网
:http://jquerymobile.com/
DEMO:http://demos.jquerymobile.com/1.4.5/
在线教程:http://www.w3school.com.cn/jquerymobile/index.asp

对话框

显示信息或请求输入的视窗类型

  • data-rel=’dialog’:用户点击(轻触)时创造一个会话框
过渡

兑现从同页过渡至另外一页面底css效果

  • data-transition:过渡效果可应用为自由链接或者通过以 data-transition
    属性进行的表单提交
实例
<div data-role='page' id="page1">
   <div data-role = 'header'>
    <a href="###" data-role='button' class="ui-btn-left">首页</a>
    <h1>标题</h1>
   </div>
   <div data-role = 'content'>
     <p>内容</p>
     <a href="#page2" data-rel='dialog'>跳转第二页</a>
     <!-- data-inline='true'设置内容撑开宽高-->
     <button data-inline='true'>按钮1</button>
     <input type="button"  value="按钮2" data-inline='true'/>
     <a href="###" data-role="button" data-inline='true'>按钮3</a>
   </div>
   <div data-role ='footer'>
     <h1>页脚</h1>
   </div>
  </div>
  <div id="page2" data-role = 'page'> 
   <a href="#page1">回到第一页</a>
  </div>
按钮

Mobile 应用程序是确立于您想只要出示的简单的点击事物上。

创建的老三栽方式
  • 运用 <button> 元素,用于表单提交
  • 动用 <input> 元素,用于表单提交
  • 以 data-role=”button” 的a元素,创建页面中的链接
主题

jQuery Mobile 提供了五种植不同之样式主题,从 “a” 到 “e” –
每种主题带有不同颜色之按钮、栏、内容块

  • <div data-role=”page” data-theme=”a|b|c|d|e”>
导航

导航栏由同样组水平排列的链接构成,通常位于页眉或页脚内部

  • data-role=”navbar” 属性来定义导航栏
图标

按钮上加图标

按钮图标

表单

jQuery Mobile 会自动吗 HTML
表单自动抬高样式,让它们看起再也享有吸引力,触摸起来再享有友好性

类型
  • 文本输入框
  • 探寻输入框
  • 单选按钮
  • 复选框
  • 选菜单
  • 滑控件
  • 切换开关
jQuery Mobile事件

于 jQuery Mobile 中动用其它正式的 jQuery 事件

  • 触摸事件:当用户触摸屏幕时点(敲击和滑动)

触摸事件

  • 滚动事件:当页面上下滚动

scrollstart 事件于用户开始滚动页面时让硌

  • 页面事件:当页面被显示,隐藏,创建,加载与卸载是点

页面事件

  • 方向事件:当设备垂直或水平旋转时接触

事件在用户垂直或水平旋转运动装备时叫点

相关文章