我想在JQueryMobile页面中显示加载动画微调器,该页面加载了a/ajax off.
页面加载data-ajax="false"或rel="external"
我试着pagebeforecreate和pageshow事件,但它不工作如我所料:
$( '#page' ).live( 'pagebeforecreate',function(event){
$.mobile.loading('show');
});
$( '#page' ).live( 'pageshow',function(event){
$.mobile.loading('hide');
});
setinterval jquery-mobile clearinterval jquery-mobile-loader
我有一个简单的登录对话框,我在文档加载时弹出:
<div data-role="popup" id="signupPopup" data-theme="a" class="ui-corner-all" data-dismissible="false" data-add-back-btn="true" data-transition="pop">
<h3 class="centerText">Login</h3>
<div class="popup">
<form>
<input type="email" name="email" id="email" class="centerText" placeholder="email" data-theme="a"/>
<input type="text" name="zip" id="zip" class="centerText" placeholder="pass" data-theme="a"/>
</form>
</div>
</div>
$(document).ready(function(){
$("#signupPopup").popup('open');
});
这是一个例子的jsFiddle.现在,在正常加载弹出窗口弹出没有问题,然后它更新url哈希到http://myurl.com/#&ui-state=dialog并且如果我点击重新加载这个哈希在我的网址js错误:Uncaught Error: cannot call methods on popup prior to initialization; attempted to call method 'open'.
我试图在http://view.jquerymobile.com/master/demos/widgets/popup/上复制相同的行为
通过添加has到这样的链接:
http://view.jquerymobile.com/master/demos/widgets/popup/#&ui-state=dialog但我无法复制相同的错误.所以,我想知道是否有人遇到这个错误以及他/她是如何解决的？顺便说一下,我确实在这个错误上检查了谷歌排名前20的所有链接,但没有一个帮助,包括很少来自SO.此外,值得注意的是,如果我使用jQuery Mobile 1.2和jQuery 1.7.1,我不会收到此错误.
我正在使用jQuery Mobile 1.3.1和jQuery 1.9.1.
我正在使用jQuery mobile动态构建一个新页面.我想现在添加主题即 data-theme="a".有更简单的方法吗？目前看起来我将它添加到下面的每个div.
var newPage = $("<div data-role='page' id='" + v["id"] +
"'><div data-role=header><a data-iconpos='left' data-icon='back' href='#' data-role='button' " +
"data-rel='back'>Back</a>" +
"<h1>" + v["name"] + "</h1>" +
"</div>" +
"<div data-role=content>" + pagecontent +
"</div>" +
"<div data-role='footer'>" +
"<h4>" + v["name"] + "</h4>" +
" </div>" +
"</div>");
// Append the new page info pageContainer
newPage.appendTo($.mobile.pageContainer);
也就是说如果有这样的东西会很好....
newPage.appendTo($.mobile.pageContainer).theme('a');
如何构建包含3页的滑动页面并添加"气泡"按钮以显示您刚刷过的页面？
你能给我一些建议或链接,可以找到一个例子吗？
jQuery Mobile和加载其他脚本使我丧命。我已经阅读了他们的文档，并且我知道他们的AJAX模型会带来一些复杂性，我从这里可以得到一些帮助以应用这些信息，但是我仍然无法使所有事情始终如一地工作。这是一个例子：
我有一个包含2个表单字段的页面，一个用于日期，一个用于时间。我在日期字段上调用jQuery UI Datepicker，在时间字段上调用第三方Timepicker（此timepicker）。如果我直接访问该页面或进行刷新，则两者都可以正常运行。但是，如果我从其他地方导航到该页面，则仅运行日期选择器。它们都链接在我的文档头中，并且都在页面上用调用pageinit。为什么一个起作用而另一个不起作用？
头：
<!DOCTYPE html>
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en" > <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Test Site</title>
<!-- Make it Mobile friendly -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="cleartype" content="on">
<!-- Stylesheets -->
<link rel="stylesheet" href="_css/normalize.css" />
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet">
<link rel="stylesheet" href="_css/jquery.mobile.structure-1.3.1.css" />
<link rel="stylesheet" href="_css/red_variant/red_variant.css" />
<link href="_libraries/jquery-ui-timepicker-0.3.2/jquery.ui.timepicker.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="_css/foundation.css" …我已经挣扎了几个小时,我无法获得以下代码;
<li>
<img width="100px" height="100px" src="$profile_picture">
<p>Username: $username</p>
<p>UserID: $userid</p>
<p>Bio: $bio</p>
<p>Website: $website</p>
<input type="button" value="Block" data-role="button" id="myButton"/>
</li>
<li data-role="list-divider"></li>
我想将按钮的值更改为"已阻止",这是我的javascript:
<script type="text/javascript">
$("input[type='button']").toggle(function () {
$(this).val("Block");
}, function () {
$(this).val("Blocked");
});
</script>
我正在使用以下版本的jquery和jqm:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
知道为什么这不能正常工作吗？所有的帮助非常感谢... TKS!
我是jquery mobile的新手,同时发出ajax请求我用来显示加载消息,直到从服务器获得响应.我为此尝试了很多但没有用.任何人都可以提前帮助我解决这个问题.
吼叫ajax电话代码
$.ajax({
url: "url",
type: "GET",
contentType: "application/json; charset=utf-8",
beforeSend: function(){
setTimeout(function(){
$.mobile.loading('show');},1);
},
success: function(msg) {
// $.mobile.loading('hide');
$.each(msg.empWall, function() {
alert(this.name);
});
},
error: function(err) {
alert(err.toString());
},
complete: function(){
setTimeout(function(){
$.mobile.loading('hide');
},1);
});
我想删除标题下方的空格和第一个内容,如果你看到jsfiddle链接.这是标题"header"和"i'm list0"之间的空格.我想删除它们之间的空间.所以我用过
margin-top:5px;
对于列表,它不起作用.所以我尝试了margin-bottom:-5px for header也..它没有;任何情况我都用过.
我正在尝试创建一个在单击列表视图中的特定链接时启动的函数.问题是当您单击链接时似乎没有触发事件.该列表是动态创建的.我不确定这是否会导致问题.
<label for="listviewForLastTenCalls">Last Ten Calls:</label>
<ul data-role="listview" id="listviewForLastTenCalls">
</ul>
<script>
$('#listviewForLastTenCalls li').click(function(){
//alert('click event handler fired');
</script>
我通过JSON为我的应用程序带来外部数据.加载数据没问题.问题是当我显示这些数据时.我有这个页面:
<!-- cinema -->
<div data-role="page" id="cinema">
<div data-role="header">
<h1>WGBN Cinema Salvador</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-inset="true" data-divider-theme="d" id="programa">
</ul>
</div>
</div>
和这个javascript到这个页面:
$(document).delegate("#cinema", "pageinit", function(data) {
// loop nas salas
$.each($.objCinema, function(key,value) {
$("#programa").append('<li data-role="list-divider">'+value.sala+'</li>').trigger('create');
$.each(value.filmes, function(a,b) {
$.each(b, function(c,d) {
$("#programa").append('<li>'+d+'</li>').trigger('create');
});
});
});
});
甚至使用插入页面中的.trigger("create")元素也没有被jQuery Mobile设置样式,我做错了什么？
jquery-mobile ×10
jquery ×9
html ×4
javascript ×4
css ×2
cordova ×1
css3 ×1
dom ×1
jquery-ui ×1
listview ×1
setinterval ×1
settimeout ×1
swipe ×1