当前位置:首页 > 行业知识 > 正文

jQuery Mobile 教程 - jQuery Mobile 入门

2014-01-18 21:07:22   来源:www.niuxsoft.com   编辑:牛叉软件

摘要:jQueryMobile简介jQueryMobile是创建移动web应用程序的框架。jQueryMobile适用于所有流行的智能手机和平板电脑。jQueryMobile使用HTML5和CSS3通过尽可能少的脚本对页面进行布局。jQueryMobile构建于jQuery库之上,这使...

jQuery Mobile 简介

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

jQuery Mobile 适用于所有流行的智能手机和平板电脑。

jQuery Mobile 使用 HTML5 和 CSS3 通过尽可能少的脚本对页面进行布局。

jQuery Mobile 构建于 jQuery 库之上,这使其更易学习,如果您通晓 jQuery 的话。

它使用 HTML5、CSS3、JavaScript 和 AJAX 通过尽可能少的代码来完成对页面的布局。

jQuery Mobile 将“写得更少、做得更多”这一理念提升到了新的层次:它会自动为网页设计交互的易用外观,并在所有移动设计上保持一致。您不需要为每种移动设备或 OS 编写一个应用程序。

jQuery Mobile 解决了这个问题,因为它只用 HTML、CSS 和 JavaScript,这些技术都是所有移动 web 浏览器的标准。

尽管 jQuery Mobile 工作于所有移动设备,它可能在桌面计算机上存在兼容性问题(“归功于”有限的 CSS3 支持)。

因此在本教程中,我们推荐您使用谷歌的 Chrome 浏览器,以获得最好的阅读体验。

有多个办法可供您在网站上开始使用 jQuery Mobile。您可以:

从 CDN 引用 jQuery Mobile(推荐)

从 jQuerymobile.com 下载 jQuery Mobile 库

与 jQuery 类似,无需在您的计算机上安装任何程序;您只需直接在 HTML 页面中引用以下样式表和 JavaScript 库,这样 jQuery Mobile 就可以工作了:

<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>

您是不是奇怪为什么 <script> 标签中没有 type="text/javascript" 属性?

在 HTML5 中该属性不是必需的。JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言!

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

  <div data-role="header">
    <h1>欢迎访问我的主页</h1>
  </div>

  <div data-role="content">
    <p>我是一名移动开发者!</p>
  </div>

  <div data-role="footer">
    <h1>页脚文本</h1>
  </div>

</div>
</body>

例子解释:

data-role="page" 是显示在浏览器中的页面

data-role="header" 创建页面上方的工具栏(常用于标题和搜索按钮)

data-role="content" 定义页面的内容,比如文本、图像、表单和按钮,等等

data-role="footer" 创建页面底部的工具栏

在这些容器中,您可以添加任意 HTML 元素 - 段落、图像、标题、列表等等。

提示:HTML5 data-* 属性用于通过 jQuery Mobile 为移动设备创建“对触控友好的”交互外观。



在 jQuery Mobile,您可以在单一 HTML 文件中创建多个页面。

请通过唯一的 id 来分隔每张页面,并使用 href 属性来连接彼此:

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo">转到页面二</a>
  </div>
</div>

<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">转到页面一</a>
  </div>
</div>

注释:包含大量内容的 web 应用程序会影响加载时间(比如文本、链接、图像和脚本等等)。如果您不希望在内部链接页面,请使用外部文件:

<a href="externalfile.html">转到外部页面</a>


对话框是用来显示信息或请求输入的视窗类型。

如需在用户点击(轻触)链接时创建一个对话框,请向该链接添加 data-rel="dialog":

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo" data-rel="dialog">转到页面二</a>
  </div>
</div>

<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">转到页面一</a>
  </div>
</div>


首页上页12345678910...下页尾页
(责任编辑:牛叉软件)


相关文章:

^

 

客服中心 | 授权中心 | 购买授权 | 付款方式 | 广告合作 | 联系我们 | 关于我们

Copyright © 2013-2099 NiuXsoft.com All Rights Reserved. 湘ICP备11016562号-1

Powered by NiuXcms