包含jquerymobiledemo的词条
jQuery Mobile中有像confirm和prompt这样的控件么
jqm中没有confirm，但是有popup，我们可以利用popup，改变下就可以了。
下面是我以前写的一个例子
/**
* jQueryMobile 弹出提示框
* @param text：提示内容
* @param callback:点击确定要执行的函数
*/
function confirmJQM(text, callback) {
var popupDialogId = 'popupDialogC';
$('div data-role="popup" id="' + popupDialogId + '" data-confirmed="no" data-position-to="window" data-transition="pop" data-theme="b" data-dismissible="false" style="max-width:500px;"'+
'div role="main" class="ui-content" style="text-align: center;"'+
'h3 class="ui-title"' + text + '/h3'+
'p/p'+
'a data-role="button" data-theme="b" class="optionCancel" data-mini="true" data-inline="true" onclick="$(\'#popupDialogC\').popup(\'close\');" 取消/a'+
'a data-role="button" data-theme="b" class="optionConfirm" data-transition="flow" data-inline="true" data-mini="true"确定/a'+
'/div'+
'/div').appendTo($.mobile.pageContainer);
var popupDialogObj = $('#' + popupDialogId);
popupDialogObj.trigger('create'); //动态加载时 需要重新刷新下 也就是给popup赋上jqm对应的css
//初始化popup
popupDialogObj.popup({
//关闭时 绑定的事件
afterclose: function (event, ui) {
popupDialogObj.find(".optionConfirm").first().off('click'); //关闭时 需要清除确定按钮上 绑定的事件
$(event.target).remove();//删除 创建的 popup
},
//显示时 绑定的事件
afteropen: function (event, ui) {
popupDialogObj.find(".optionConfirm").first().on('click', function () {
popupDialogObj.attr('data-confirmed', 'no');
$('#popupDialogC').popup('close');
if(callback callback instanceof Function ){
callback();
}
});
}
});
//打开
popupDialogObj.popup('open');
}
//调用
confirmJQM('确认?', function(){alert('点击了确定')});
使用jqueryMobile怎么分页
刚开始项目只是选择了iscroll框架实现滚动翻页，后来和jQuery mobile（jqm）框架整合后，界面没法使用
在网上搜索了很多资料，各种尝试后还是问题很多。最后在老外的网站上发现了jquery-mobile-iscrollview框架，用于整合jquery mobile和iscroll的一个开源框架，处理了很多jquery mobile和iscroll整合中出现的问题。
1、jquery-mobile-iscrollview下载地址：
解压后的\jquery-mobile-iscrollview-master\jquery-mobile-iscrollview-master\demo\source路径下是需要引用的js和css文件
\jquery-mobile-iscrollview-master\jquery-mobile-iscrollview-master\demo\build路径下是各个jquery mobile版本下的列表和滚动翻页的例子
在该路径下，我选择了pull_14.html文件，用chrome打开后，发现下面的导航栏变形，将
link href="stylesheets/demo.css" media="screen" rel="stylesheet" type="text/css" /
script src="javascripts/demo.js" type="text/JavaScript"/script
去掉后，下面的导航栏正常了
页面中引用的pull-example.js文件是上拉、下拉事件的处理，只需要将gotPullDownData和gotPullUpData函数修改一下即可实现自己需要加载的数据
2、直接测试该功能没有什么问题，当把该翻页的页面链接到其他页面上时，通过链接打开该页面，下面的导航栏又出现了问题
后来发现，这是问题可能是由于jqm的外部页面链接引起的错。jqm在使用外部链接打开另一个页面时，会使用ajax读取需要打开的文件，然后将该文件动态加载到已经打开的页面的后面，jqm只加载文档中取出的第一个页面（第一个带有role="page"的div），其他内容都将被忽略。
后来，将列表页面(b.html)所有加载的css和js的标签放到链接该页面的页面(a.html)的head标签中。
[html] view plain copy
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" /
meta name="apple-mobile-web-app-capable" content="yes" /
meta name="apple-mobile-web-app-status-bar-style" content="black" /
link rel="stylesheet" href="../jquery.mobile-1.4.2.min.css" type="text/css"
link href="../jquery.mobile.iscrollview.css" media="screen"
rel="stylesheet" type="text/css" /
link href="../jquery.mobile.iscrollview-pull.css"
media="screen" rel="stylesheet" type="text/css" /
script src="../jquery.js" type="text/javascript"/script
script
$(document).bind("mobileinit", function(){
//容许ajax跨域访问
$.mobile.allowCrossDomainPages = true;
});
/script
script src="../jquery.mobile-1.4.2.min.js"
type="text/javascript"/script
script src="../javascripts/iscroll.js" type="text/javascript"/script
script src="../javascripts/jquery.mobile.iscrollview.js"
type="text/javascript"/script
script src="../javascripts/pull-example.js" type="text/javascript"/script
当链接打开该页面后，列表页面稳定了
3、jquery-mobile-iscrollview中引用的jqm框架的版本没有项目中的高，试着将jqm的版本替换为项目中使用的版本后，该功能依旧没有出现问题
jquery mobile怎么在一个网页中调用另一个网页的内容
因为是在两个页面之间传值，所以
1、首先定义一个获取URL函数
//获取URL参数
function?getQueryString(name)?{?
var?reg?=?new?RegExp("(^|)"?+?name?+?"=([^]*)(|$)",?"i");?
var?r?=?window.location.search.substr(1).match(reg);?
if?(r?!=?null)?return?unescape(r[2]);?return?null;?
}
2、定义一个全局变量用来存储第一个页面的值；如
var?zhi=10;
3、如点击事件跳转,并把这个值传到另一个页面；如
window.location="demo.html?zhi=10";
4、在跳转过来的这个页面需要用到的地方使用我们之前的getQueryString(name)这个函数来接收这个值；如
zhi=getQueryString(zhi)
5、到此，页面之间的内容已经传递完毕，你可以在第二个页面中的随意一个事件中使用这个值，不过记住了，是这样来接收的哟！zhi=getQueryString(zhi)
jquery mobile 能实现响应式布局吗
看 jquerymobile 官方网站上的 demo，网站名就是 jquerymobile + com。
像 table 已经实现了响应式布局，这个在 demo 中有演示。jQuery mobile 本身就是为了在多种不同平台和尺寸的移动设备上做到响应式而出现的，它会尽量做跨平台，手机和平板自动调节尺寸，不过并不是完美和足够智能，想要达到自己的目的，还是需要借助 W3C 的 CSS Media Query 来提供多个不同版本的 CSS，浏览器会跟据你在这个CSS 中设定的 media query 表达式来探测设备尺寸、方向等来决定使用哪套方案。
jquery mobile data-demo-jsp 这个属性是什么意思
Button
带有 data-role="button" 的超链接。工具栏中的按钮元素和链接以及输入字段会被自动设置按钮的样式，无需 data-role="button"。
Data 属性 值 描述
data-corners true | false 规定按钮是否有圆角。
data-icon Icons Reference 规定按钮的图标。默认是没有图标。
data-iconpos left | right | top | bottom | notext 规定图标的位置。
data-iconshadow true | false 规定按钮图标是否有阴影。
data-inline true | false 规定按钮是否是行内的。
data-mini true | false 规定按钮是小型的还是常规尺寸的。
data-shadow true | false 规定按钮是否有阴影。
data-theme letter (a-z) 规定按钮的主题颜色。
jquery mobile 的问题
那是因为jqm 在运行的时候会将对应的标签替换成它自己的一些标签，用谷歌浏览器审查元素可以发现JQM在input标签外会嵌套一层div，有个小细节您的label for里面的值与下面的inputname不匹配哦
如：
label?for="text-basic"Text?input:/label
input?type="text"?name="text-basic"?id="text-basic"?value=""
会被替换成：
div?data-demo-html="true"
?????????????label?for="text-basic"Text?input:/label
?????????????div?class="ui-input-text?ui-body-inherit?ui-corner-all?ui-shadow-inset"input?type="text"?name="text-basic"?id="text-basic"?value=""/div
????????/div
tap对于label和input嵌套这种类型的只能执行一个吧，因为点击lable和input都最终只执行input focus的动作。这2个比较特殊， tap触摸状态要比click状态快300MS左右，手机上有按下 划动 松开 上状态而 input是松开后才触发focus状态，而tap没有松开那个状态，所以您出发不了那个js
touch模块绑定事件touchstart,touchmove和touchend到document上，然后通过计算touch事件触发的时间差，位置差来实现了自定义的tap,swipe等。
tap???? 当用户点屏幕时触发 ?
taphold 当用户点屏幕且保持触摸超过1秒时触发 ?
swipe?? 当页面被垂直或者水平拖动时触发。这个事件有其相关联的属性，分别为scrollSupressionThreshold, durationThreshold, horizontalDistanceThreshold, and verticalDistanceThreshold ?
swipeleft?? 当页面被拖动到左边方向时触发 ?
5 ? ?swiperight? 当页面被拖动到右边方向时触发 ?