（二）Jquery Mobile介绍以及Jquery Mobile页面与对话框

时间：2015-04-05 20:16:45 阅读：135 评论：0 收藏：0 [点我收藏+]

标签：

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 是默认通过ajax切换页面的

1、Jquery Mobile页面的基本组成
<meta name="viewport" content="width=device-width" />
通常情况移动设备以900px的宽度显示页面,加上这句话,可以使页面的宽度与移动设备的屏幕宽度相同
需要引用的文件有：

<linkhref="Css/jquery.mobile-1.0.1.min.css"rel="Stylesheet"type="text/css"/> 
<scriptsrc="Js/jquery-1.6.4.js"type="text/javascript"></script> 
<scriptsrc="Js/jquery.mobile-1.0.1.js"type="text/javascript"></script>

2、JM主要标签说明

<div   data-role="page"> 
  <div   data-role="header">头部</div> 
  <div   data-role="content">被容</div> 
  <div   data-role="footer">底部</div> 
</div>

第一个实例：

!DOCTYPEhtml> 
<html> 
<head> 
<title>jQuery Mobile 页面框架</title> 
<metaname="viewport"content="width=device-width"/> 
  <metacharset="utf-8"> 
<linkhref="Css/jquery.mobile-1.0.1.min.css"
rel="Stylesheet"type="text/css"/> 
<scriptsrc="Js/jquery-1.6.4.js"
type="text/javascript"></script> 
<scriptsrc="Js/jquery.mobile-1.0.1.js"
type="text/javascript"></script> 
</head> 
<body> 
<sectionid="page1"  data-role="page"> 
<header  data-role="header"><h1>标题</h1></header> 
<div data-role="content"class="content"> 
<p>这是内容</p> 
</div> 
<footer data-role="footer"><h1>这是底部</h1></footer> 
</section> 
</body> 
</html>

3、跳转

第一种：<a href="#page">返回主页</a> 将跳转到id=page的div上

第二种：与普通的html跳转相同，<a href="index2.htm">第 2 页</a>

4、对话框

通过设置data-rel="dialog"，来打开一个对话框。

<a href="foo.html" data-rel="dialog">Open dialog</a>

<a href="foo.html" data-rel="dialog" data-transition="pop">Open dialog</a>

属性可选值：

pop（默认）, fade，flip，turn，flow，slidefade，slide，slideup，slidedown，none

来自为知笔记(Wiz)

（二）Jquery Mobile介绍以及Jquery Mobile页面与对话框

标签：

原文地址：http://www.cnblogs.com/wang3680/p/4d31e423b5f35215028d4a6f721a0eef.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行