jQuery Mobile学习--第一篇

一、引用

1、从CDN引用

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

2、下载

<head>
<link rel=stylesheet href=jquery.mobile-1.3.2.css>
<script src=jquery.js></script>
<script src=jquery.mobile-1.3.2.js></script>
</head>

二、页面

例:

<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文件中可以建立多个页面,只需要给page的不同的id即可,如下

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

三、过渡效果

格式:

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

相关效果:

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

四、按钮

<button></button>、<input>、<a href="#pageone" data-role="button"> 

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



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值