jQuery Mobile 入门教程

jQuery Mobile 入门教程jquery mobile教程,jquerymobile入门教,jquery mobile,jquery教程,jquerymobileapi,jquerymobile,jquerymobiledemo,入门教程,jquery入门教程,arm入门教程
社会化媒体营销 > jQuery Mobile 入门教程

jQuery Mobile 入门教程(1)

jQuery Mobile 入门教程jQuery Mobile入门jQuery Mobile 基本页面结构

DOCTYPE html><html>    <head>        <title>jQuery Mobile基本页面结构title>        <link rel="stylesheet" href="https://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />        <script type="text/javascript" src="https://code.jquery.com/jquery-1.5.min.js">script>        <script type="text/javascript" src="https://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js">script>    head>    <body>        <div data-role="page" id="home">            <div data-role="header">                <h1>Headerh1>            div>            <div data-role="content">                <p>Content goes herep>            div>            <div data-role="footer">                <h4>Footerh4>            div>        div>    body>html>

代码说明

要使用 jQuery Mobile,首先需要在开发的界面中包含如下3个内容:CSS文件jquery.mobile-1.0a3.min.cssjQuery类库文件 jquery-1.5.min.js jQuery Mobile文件 jquery.mobile-1.0a3.min.js 在上面的页面基本模板中,引入这三个元素采用的是jQuery CDN方式,开发人员也可以这些文件及主题到你的服务器上。

我们可以看到页面中的内容都是包装在div标签中并在标签中加入data-role=page属性。 这样jQuery Mobile就会知道哪些内容需要处理。说明:data-属性是HTML5新推出的很有趣的一个特性,它可以让开发人员添加任意属性到html标签中,只要添加的属性名有“data-”前缀。pagediv中,还可以包含header content footerdiv元素,这些元素都是可选的,但至少要包含一个 “content”divjQuery Mobile 入门:

使用jQuery Mobile的第一步,先创建一个html页面,并在head标签中加入以下内容:

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css"><script src="https://code.jquery.com/jquery-1.5.min.js">script><script src="https://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js">script>

正如你在代码中看到的,jQuery MobilejQuery的一个扩展。目前来说,压缩后的jQuery Mobile 12Kb

点击显示全文

  • jQuery Mobile 入门教程

    jQuery Mobile 入门教程 jQuery Mobile 入门 jQuery Mobile 基本页面结构 <!DOCTYPE html> jQuery Mobile 基本页面结构 ...

    贡献者:123zongyan123
    527176
  • jQuery Mobile入门教程——主题的使用和定制

    在之前的文章 jQuery Mobile 入门教程里,我对 jQueryMobile 的使用进行了入门介绍, 你可以使用它创造出非常华丽的移动站点——漂亮的按钮、优雅的界面等等等等。 ...

    贡献者:igroove_cn
    784927
  • 初学者必读jQuery_Mobile_入门教程

    初学者必读jQuery_Mobile_入门教程_计算机软件及应用_IT/计算机_专业资料。初学者必读jQuery_Mobile_入门教程初学者必读:jQuery Mobile 入门教程 原作:Getting started...

    贡献者:redinsz
    399837
  • jQuery Mobile简单介绍

    jQuery Mobile 简单介绍今天,jQuery 驱动着 Internet 上的大量网站,在浏览器中...与 jQuery 一样,JQM 是一个在 Internet 上直接托管、免费可用的开 源代码基础...

    贡献者:liuyapingnm
    255967
  • Web 前端 使用jQuery Mobile开发Web App免费学习_javas...

    jQuery Mobile 快速入门视频教程,达内精品在线TMOOC全套教学,在线学习javascript课程,Web 前端 使用jQuery Mobile开发Web App视频下载

    贡献者:不见莫尘
    140140
  • jQuery_Mobile入门教程_提升篇

    在之前的文章 jQuery Mobile 入门教程里,我对 jQueryMobile 的使用进行了入门介绍, 你可以使用它创造出非常华丽的移动站点——漂亮的按钮、优雅的界面等等等等。 ...

    贡献者:redinsz
    198929
  • jQuery mobile学习笔记

    data-role="footer" data-position="fixed" data-fullscreen="true"> 10、jQuery Mobile 导航栏导航栏由一组水平排列的链接构成,通常位于页眉或页脚内部。 默认地...

    贡献者:zhangxj是我
    642121
  • jQuery Mobile 教程《精》

    jQuery Mobile 教程《精》_计算机软件及应用_IT/计算机_专业资料。jquery mobile教程 jQuery Mobile 教程 一、 JQueryMobile 基础 1. jQuery Mobile 的渐进增强设计与...

    贡献者:潇洒的tang
    368865
加载中...
加载中...
  • XPath语法规则及实例

    XPath语法规则及实例_IT/计算机_专业资料。XPath 语法规则术语: 一、 XPath 术语: 1. 节点: 在 XPath 中,有七种类型的节点:元素、属性、文本、命名空间、处理...

  • 给xpath添加正则表达式匹配函数

    public override IXsltContextVariable ResolveVariable《string prefix, string name》 《 // Create an instance of an XPathExtensionVariable. XPathExtensionVariable ...

  • xpath详解总结,很全面

    请看一个典型的 XPath 查询表达式:/messages/message//child:: node《》[@id=0],其中/messages/message 是路径《绝对路径以"/ "开始》,child::是轴表示在子节点...

  • xpath的使用方法

    xpath的使用方法_计算机软件及应用_IT/计算机_专业资料。xpath的使用方法 首先要说的是 XPath 数据类型。XPath 可分为四种数据类型: 1. 节点集《node-set》 节点...

  • python+xpath笔记

    python+xpath笔记_计算机软件及应用_IT/计算机_专业资料。一、选取节点 常用的路劲表达式: 表达式 描述 实例 选取了 div 节点的所有子节 点 从根节点上选取 div ...

24小时热门信息
  • 关于docker的15个小tip

    获取最近运行容器的 id 这是我们经常会用到的一个操作,按照官方示例,你可以这样做《环境 ubuntu》: $ ID=$《docker run ubuntu echo hello world》 hello world ...

    贡献者:isle2013
    407193
  • CentOS系统下docker的安装配置及使用详解

    使用镜像创建容器 [root@localhost /]# docker run chug/ubuntu12.10x64 /bin/echo hello world hello world 交互式运行 [root@localhost /]# docker run -i...

    贡献者:NathanHD
    165711
  • docker环境搭建

    docker环境搭建_计算机软件及应用_IT/计算机_专业资料。docker环境安装全文 Docker 是 PasS 提供商 DoctCloud 开源的一个基于 LXC 的高级容 器引擎,源代码托管在 ...

    贡献者:张小飞705
    767694
  • docker使用手册

    docker使用手册_计算机软件及应用_IT/计算机_专业资料。docker使用手册及常用命令 概念Docker daemon Docker images Docker client Docker Registries Docker containers ...

    贡献者:w19821216w
    560967
  • 非常详细的 Docker 学习笔记

    ... 4.9 Docker 1.3 新增特性和命令 4.10 Docker 1.5 新特性 5.1 自动映射端口 5.2 绑定端口到指定接口 6.1 Docker 四种网络模式 6.2 列出当前主机网桥 ...

    贡献者:a_a_a_a_a_t
    943743
  • docker从入门到实践

    docker从入门到实践_互联网_IT/计算机_专业资料。docker从入门到实践 超人学院——Docker从入门到实践基础篇 什么是 Docker Docker 是一个开源项目,诞生于 2013 年...

    贡献者:圈圈圆圆heaven
    106996
精彩推荐
  • CRM_中间件数据传输配置V3.0CRM_中间件数据传输配置V3.0

    CRM_中间件数据传输配置V3.0_计算机软件及应用_IT/计算机_专业资料。SAP CRM_中间件数据传输配置 CRM 项目技术文档 三全食品 CRM 配置手册中间件配置手册 Version ...贡献者:zhouqingxiang1156505

  • 实施CRM过程中的问题及对策实施CRM过程中的问题及对策

    理解 CRM《客户关系管理》的含义是实施 CRM 的前提与依据。CRM 首先是一种管 理理念,其核心思想是将企业的客户《包括最终客户、分销商和合作伙伴》作为最重要的 ...贡献者:墨镜小13142339

  • 客户关系管理《CRM》产生背景客户关系管理《CRM》产生背景

    客户关系管理《CRM》产生背景_企业管理_经管营销_专业资料。十几年市场竞争的磨练,尤其是中国加入 WTO 在即,竞争的压力使得中国的企业对于 可以提高企业竞争力的各种...贡献者:89513380278226

  • CRM客户关系管理系统建设方案《完整版》CRM客户关系管理系统建设方案《完整版》

    CRM客户关系管理系统建设方案《完整版》_计算机软件及应用_IT/计算机_专业资料。CRM客户关系管理系统建设方案《完整版》 CRM 客户关系管理系统 建设方案 商务代表:沈言炎...贡献者:melody_syyxx171113

  • 客户关系管理客户关系管理

    CRM 是一种以客户为中心的商务战略;是一套集理念、组织、流程、技术为一 体的整体解决方案;是一种旨在改善企业与客户之间关系的新型管理机制;企业实施 CRM 战略...贡献者:我死了喂狗狗390139

  • 客户关系管理客户关系管理

    CRM 管理 包括访客名片的建立、 对话记录的管理 、熟客识别等为企业建立良好的客 情关系数据库,帮助企业有效维护老客户和挖掘潜在客户。 河北工商银行集成实现客户...贡献者:新菲尔伯爵390139

  • CRM简介CRM简介

    信息系统开发与设计 CRM 系统简介一 、 主要思想客户关系管理《 Customer Relationship Management, CRM》, 是以 信息技术为媒介, 以客户及其价值为中心, 通过管理和...贡献者:holiter337996

  • 客户关系管理《CRM》系统设计报告客户关系管理《CRM》系统设计报告

    客户关系管理《CRM》系统设计报告 摘 要 通过CRM系统分析、 本公司需求分析及考察CRM的一般系统与实际业务流程关 系,确定本公司CRM系统设计定位于基于部门应用、运营...贡献者:八百客CRM143860

手机版 | 欢迎来到社会化媒体营销
RSS订阅