皓轩的jquery mobile之路(二)

jQuery Mobile 使用 HTML5 & CSS3 最小的脚本来布局网页。

编写代码要注意最外层div需要添加data-role="page" ,标题需要添加data-role="header",内容需要添加data-role="content",底部需要添加data-role="footer"。

代码:

----------------------------------------------------------

<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>

----------------------------------------------------------

jQuery Mobile 页面切换效果

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

代码:

<a href="#div2" data-transition="slide">切换到div2</a>

<a href="#div1" data-transition="slide">切换到div1</a>

data-transition的参数:

fade:默认淡入到下一页;flip:从后向前翻转到下一页;flow:前一页缩小向左抛出到下一页;pop:弹出进入下一页; slide:从右到左滑动到下一页

slidefade:从右到左滑动并淡入到下一页;slideup:从下到上滑动到下一页;slidedown:从上到下滑动到下一页;turn:翻到下一页;none:去除效果。

2. data-transition的所有效果都支持退后功能需添加data-direction="reverse"

代码:

<a href="#div2" data-transition="flow">切换到div2</a>

<a href="#div1" data-transition="flow"  data-direction="reverse">切换到div1</a>

jQuery Mobile 按钮

1. 在 jQuery Mobile 中,按钮可通过三种方式创建:

  • 使用 <button> 元素
  • 使用<input type="button" value="按钮"> 元素
  • 使用带有 <a href="#" data-role="button">按钮</a> 的 <a> 元素

在什么场景用那种按钮:

data-role="button" 用于页面之间的链接 input 和button用于表单提交

代码:

<a href="#div2" data-role="button">访问第二个页面</a>

<a href="#div1" data-role="button">访问第二个页面</a>

<div data-role="page"  id="div1">
  <div data-role="header">
    <h1>页面标题</h1>
  </div>

<div data-role="content">
    <p><a href="#div2" data-role="button">访问第二个页面</a></p>
  </div>

<div data-role="footer">
    <h1>页面底部内容</h1>
  </div>
</div>

<div data-role="page"  id="div2">
  <div data-role="header">
    <h1>页面标题</h1>
  </div>

<div data-role="content">
    <p><a href="#div1" data-role="button">访问第二个页面</a></p>
  </div>

<div data-role="footer">
    <h1>页面底部内容</h1>
  </div>
</div>

2. 按钮默认情况下都是占满屏幕宽度,所以提供了data-inline="true"让按钮的宽度和字一样宽

<a href="#pagetwo" data-role="button" data-inline="true">按钮宽度和我一样</a>

3. jqmobile组合按钮,组合顾名思义是几个按钮拼接在一起,那么就有两种情况,一种是一个按钮占一行(默认),一种是几个按钮占一行;所以提供data-role="controlgroup" 属性和 data-type="horizontal|vertical"对按钮布局。

代码:

<div data-role="page" id="pageone">
  <div data-role="header">
  <h1>组合按钮</h1>
  </div>

<div data-role="content">
    <div data-role="controlgroup" data-type="horizontal">
    <p>水平组合按钮:</p>
    <a href="#" data-role="button">按钮 1</a>
    <a href="#" data-role="button">按钮 2</a>
    <a href="#" data-role="button">按钮 3</a>
    </div><br>
    
    <div data-role="controlgroup" data-type="vertical">
    <p>垂直组合按钮 (默认):</p>
    <a href="#" data-role="button">按钮 1</a>
    <a href="#" data-role="button">按钮 2</a>
    <a href="#" data-role="button">按钮 3</a>
    </div>
  </div>

<div data-role="footer">
  <h1>底部文本</h1>
  </div>
</div>

4. jqmobile后退按钮需要添加 data-rel="back"。

代码:

<a href="#" data-role="button" data-rel="back">返回</a>

5. 更多用于按钮的data-*属性

data-corners="true/false"   是否让按钮圆角

data-mini="true/false"        规定按钮是否最小

data-shadow="/true/false"  按钮是否有阴影

6. jqmobile按钮图标 添加 data-icon="”

data-icon="arrow-l"  左箭头

data-icon="arrow-r" 右箭头

data-icon="delete" 删除

data-icon="info" 信息

data-icon="home" 首页

data-icon="back" 后退

data-icon="search" 搜索

data-icon="grid" 网格

代码:

<a href="#anylink" data-role="button" data-icon="arrow-l">Search</a>

7. 图标定位 添加data-iconpos=""/顶部(top)、右侧(right)、底部(bottom)、左侧(left)。

代码:

<a href="#link" data-role="button" data-icon="search" data-iconpos="top">顶部</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="right">右侧</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="bottom">底部</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="left">左侧</a>

8. 只显示图标添加data-iconpos="notext"

代码:

<a href="#link" data-role="button" data-icon="search" data-iconpos="notext">搜索</a>

jQuery Mobile 工具栏

下面的代码,将添加一个按钮到头部标题文本的左侧,添加一个按钮到头部标题文本的右侧

<div data-role="header">
<a href="#" data-role="button">首页</a>
<h1>欢迎来到我的主页</h1>
<a href="#" data-role="button">搜索</a>
</div>

下面的代码,将添加一个按钮到头部标题文本的左侧:

<div data-role="header">
<a href="#" data-role="button">首页</a>
<h1>欢迎来到我的主页</h1>
</div>

如果您把按钮链接放置在 <h1> 元素之后,将无法显示右侧的文本。要添加一个按钮到头部标题的右侧,请指定 class 为 "ui-btn-right":

<div data-role="header">
<h1>欢迎来到我的主页</h1>
<a href="#" data-role="button" class="ui-btn-right">搜索</a>
</div>

时间: 2024-10-11 02:01:09

皓轩的jquery mobile之路(二)的相关文章

jQuery插件之路(二)——轮播

还记得以前刚接触前端的时候,浏览各大网站,很多都少不了的有个轮播的效果,那个时候自己是一个彻彻底底的小白,想着这些图片滚动起来还真是有意思,是什么让这些图片在一个方向上连续的滚动呢.后来慢慢的接触多了,觉得这些也是so easy的嘛,于是为了加深对js.jQuery的理解以及探究网站上各种效果的实现方法,就有了jQuery插件之路这样一个系列,当然为了纪念当初对轮播的执念,于是就从轮播开始写了一个小小的插件,这只是一个开始,随着后面的了解的更多,也会写一些更加绚丽的DEMO.源代码在这里:点我获

使用 jQuery Mobile 与 HTML5 开发 Web App 系列文章目录

使用 jQuery Mobile 与 HTML5 开发 Web App 系列文章目录 时间:2012年9月20日 分类:JavaScript 标签:HTML5‚ jQuery Mobile‚ Web App “使用 jQuery Mobile 与 HTML5 开发 Web App”系列文章的数目累积起来也比较多了,为方便大家浏览, Kayo 把这些文章整理成一个目录,收录那些已经写好的文章并会继续更新. 该系列的文章实质上分成四个部分,分别是总体概况.jQuery Mobile 组件.jQuer

HTML5移动开发之路(23)—— jQuery Mobile入门

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(23)-- jQuery Mobile入门 一.下载jQuery Mobile 下载地址:http://jquerymobile.com/ 点击Download 下载如下zip包 下载成功后如下图 解压目录如图: 点击index.html进入demo主页,这里面有很多例子. 二.创建JQuery Mobile的Helloword 1.创建demo 2.新建站点 3.站点建立成功后将生成的demo拷贝到站点中

(二)Jquery Mobile介绍以及Jquery Mobile页面与对话框

Jquery Mobile介绍以及Jquery Mobile页面与对话框  一. Adobe Dreamweaver CS6 环境 最新版本的cs6会支持JM的使用,有自动提示功能,很强大.安装说明地址:http://www.phonegap100.com/article-79-1.html 下载地址说明:http://bbs.phonegap100.com/thread-135-1-1.html  二.JM说明 默认data-ajax="true"jquery mobile 是默认通

jquery Mobile应用第2课《构建跨平台APP:jQuery Mobile移动应用实战》连载二(简单的QWER键盘)

在jQuery Mobile的布局中,控件大多都是单独占据页面中的一行,按钮自然也不例外,但是仍然有一些方法能够让多个按钮组成一行,比如说在范例6-5中就利用按钮分组的方法使4个按钮并列在一行中,如图6-24和图6-25所示. 图6-24 实现按钮分组的方法 图6-25 分组的按钮 而在上一节中也许有读者已经注意到,头部栏中的按钮并没有占据一整行,也没有与多个按钮一起成组存在,那么在页面的其他部分是否也可以让按钮以这样的形式出现呢? [范例6-9 简单的QWER键盘] 01 <!DOCTYPE

jQuery Mobile学习之grid、等待显示的ajax效果、页面跳转、页面跳转传递参数等(二)

Index.cshtml <!-- Start of second page --> <section data-role="page" id="bar"> <header data-role="header"> <h1>Bar</h1> </header> <!-- /header --> <div role="main" class=

html5+jQuery Mobile开发移动端wap经验总结(二)- a / input样式重新定义

jQuery mobile中,很多样式都是写好的,虽然有主题,但是对于个性化的wap网站来说,还是很难驾驭的. 使用html5+jQuery Mobile做了几个页面之后,中间所遇到的问题,以及解决方法,现在加以总结,以便过后查阅. 问题: 1.a的颜色重新定义问题 2.input中button颜色问题. input输入框中,左边图标展示问题(文字缩进) 3.上文中的图标自定义问题[上文已经说明,通过ui-icon-XXX:after进行重新定义] 解决: 1-2.a / input的重新定义均

面向Web Cloud的HTML5 App开发实战:Browser&amp;HTML5&amp;CSS3&amp;PhoneGap&amp;jQuery Mobile&amp; WebSocket&amp;Node.js(2天)

如何理解Android架构设计的初心并开发出搭载Android系统并且具备深度定制和软硬整合能力特色产品,是本课程解决的问题. 课程以Android的五大核心:HAL.Binder.Native Service.Android Service(并以AMS和WMS为例).View System为主轴,一次性彻底掌握Android的精髓. 之所以是开发Android产品的必修课,缘起于: 1,     HAL是Android Framework&Application与底层硬件整合的关键技术和必修技

jQuery Mobile 简介与安装

一.什么是 jQuery Mobile?(不是一个编程的框架,是一个UI框架,是一个偏重与设计的一个框架) jQuery Mobile 是一个为触控优化的框架,用于创建移动 web 应用程序. jQuery 适用于所有流行的智能手机和平板电脑: jQuery Mobile 构建于 jQuery 库之上,这使其更易学习,如果您通晓 jQuery 的话. 它使用 HTML5.CSS3.JavaScript 和 AJAX 通过尽可能少的代码来完成对页面的布局. 二. jQuery Mobile适合开发