（二）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 是默认通过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>

属性可选值：

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

来自为知笔记(Wiz)

时间： 2024-10-05 04:00:28

（二）Jquery Mobile介绍以及Jquery Mobile页面与对话框的相关文章

02.Jquery Mobile介绍以及Jquery Mobile页面与对话框

一.为什么要学Jquery Mobile JqueryMobile 是jquery的移动版本,懂基本的jquery知识,会简单的html+css就可以完成很多复杂的功能,还有就是这个框架在企业中用的也是比较多的二.Adobe Dreamweaver CS6 环境搭建以及软件破解软件安装步骤: http://www.phonegap100.com/article-79-1.html 软件下载链接地址: http://bbs.phonegap100.co

jQuery的介绍和选择器详解

本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. jQuery 的介绍引入 jQuery 的原因在用 js 写代码时,会遇到一些问题: window.onload 事件有事件覆盖的问题,因此只能写一个事件. 代码容错性差. 浏览器兼容性问题. 书写很繁琐,代码量多. 代码很乱,各个页面到处都是. 动画效果很难实现. 如下图所示: jQuery的出现,可以解决以上问题. 什么是 jQuery jQuery 是 js

jQuery + jQuery Mobile 实现省市二级下拉列表页面

一.需求: 提供省.市下拉列表,当用户选择省一级下拉列表项后,市下拉列表的各个选项自动变为该省对应的城市列表. 二.效果: 三.实现: 1.省市json数据,来自: http://www.cnblogs.com/jinzhao/archive/2012/04/01/2428142.html Js代码 /** * 省市json数据 */ var provinceAndCityArray = [{ name: "北京", cities: ["西城", "东

JQuery简单介绍

1.精准简单的选择对象(dom): $('#element');// 相当于document.getElementById("element") $('.element');//Class $('p');//html标签 $("form > input");//子对象 $("div,span,p.myClass");//同时选择多种对象 $("tr:odd").css("background-color&q

jQuery语法介绍

来自:http://www.cnblogs.com/ccorz/p/5803353.html jQuery类似于Python中模块的概念,是集成了javaScript和Dom的模块.大致分为两种版本1.12....或者2....的版本,由于2以上的版本去掉了IE9以下的兼容性,所以我们一般写页面使用1.12XXX的版本.jQuery的语法很多,jQuery API 中文在线手册 jQuery1.12.4下载地址查找选择器 id选择器根据给定的ID匹配一个元素. 使用任何的元字符(如 !"#

web基础知识（二）关于ajax，Jquery传值最基础东西

这次还是一些关于jQuery,ajax前后台传值情况, 是自己在做点小东西过程中遇到的,记录下来为自己也方便别人列表很多,点击编辑和删除无刷新的进行操作的话,肯定是ajax了,因为无刷新嘛,可能有的朋友会说直接传值,传ID到Action删除不就OK了,用得着写js么,纯粹自己找麻烦嘛. 其实这里重点是无刷新的啦, 这个上传后到这里来,有个预览功能,把本次的全部预览,如果全部刷新的话,那么刚才上传的就不会在这个页面了,so,还是采用无刷新的比较好. 点击编辑跳到一个新的页面的时候有两种方法可以选

jquery二维码生成插件jquery.qrcode.js

插件描述:jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生成二维条码. 转载于:http://www.jq22.com/jquery-info294 如何使用它将jquery.qrcode.min.js和jquery添加到您的网页中 <script src="jquery.min.js"></script> <script type="text/javascrip

jQuery实现AJAX定时刷新局部页面实例

本篇文章通过两种方法实例讲解ajax定时刷新局部页面,当然方法有很多种,也可以不使用ajax来刷新页面,可以使用jquery中的append来给指定内容加东西, 但是都不太实用,最实用的方法还是ajax加载数据了. 方法一: 局部刷新我们讲述到最多的是ajax 了,当然也可以不使用ajax来刷新页面了,我们可以使用jquery中的append来给指定内容加东西了,当然最实用的还是ajax加载数据了. 例子,定时局部刷新定时局部刷新用到jQuery里面的setInterval方法,setInte

jQuery.smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件

插件介绍: jQuery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转.翻转.放大缩小等动画特效.使用Smoove页面滚动元素动画特效插件可以很轻松的制作出各种华丽的CSS3动画效果. 基本用法 $('.smoove').smoove(options); 上面的代码会在class为 smoove 的元素上使用默认参数初始化 jQuery Smoove. 你可以通过dat