我的jQuery Mobile应用程序由一个index.html页面组成,并且在启动时只包含一个带有链接的页面:
<div data-role="page">
<div data-role="content">
<a id="startPageLink" href="startPage">start</a>
</div>
</div>
当用户点击开始链接时,我想startPage异步加载来自我的JSON api 的内容.在回调中,我想为startPagevia JavaScript 创建所有必需的DOM元素,并将内容添加到它.我createStartPage(data)为此创建了一个方法.
实现这种动态创建的页面的正确方法是什么,这样开放index.html#startPage也有效？我认为应该有一种方法来$.mobile.changePage()包含自定义加载/页面创建代码,但我没有找到任何东西.或者这个问题有更好的解决方案吗？
jQuery UI datepicker有一个选项,只在单击按钮图像时打开日期选择器.请参阅以下示例:
http://jqueryui.com/demos/datepicker/#icon-trigger
问题是,一旦datepicker打开,焦点就在文本字段中.是否可以禁用焦点设置？
当在iPhone等移动设备上使用上述页面时,键盘会弹出,因为文本字段会获得焦点.这不是真正的用户友好,因为您必须关闭键盘才能真正到达日期选择器并使用它...
有没有人知道任何其他方法来捕获扩展或折叠标记data-role="collapsible"除了onclick标题事件之外的组件的事件？
编辑:我想要某种事件,它还将提供有关组件的扩展/折叠状态的信息.
我正在为主要的os平台开发一个Phonegap应用程序,目前正在iOS 5的iPad上测试它.我正在使用jquery mobile.因此对于大屏幕,我使用了splitview jquery移动插件.http://asyraf9.github.com/jquery-mobile/
我放了一个
$scrollArea.css('overflow-y','auto');
$scrollArea.css('-webkit-overflow-scrolling','touch');
使页面滚动而不是像插件使用的那样使用iscroll.现在发生的是,当用户滚动页面时,页面没有加载/重新绘制.我有100个项目的列表,我滚动它们.
滚动本身并不慢,但滚动后新的列表视图行需要几乎整整一秒才会弹出视图.在此之前它是一个空白区域.
在观察时,我可以看到列表项在滚动停止之前不会进入视图.(动量滚动)
我该怎么做才能使这项工作正常工作？同样的事情在Android选项卡上工作正常.请帮助.
编辑:如果我只使用
$scrollArea.css('overflow-y','auto');
然后我不会在滚动后面对这个瞬间空白区域的问题,但滚动速度非常缓慢.
请不要建议使用iScroll.已经尝试过了.我用-webkit-overflow-scrolling得到的速度要慢得多,而且我无法使用它.
我正在动态填充<ul data-role="listview">然后调用location.href="#Results"列表所在的位置listview('refresh').
所有这些都是在同一页面成功回调Ajax请求时完成的.它的工作或多或少,但我收到以下错误:
Uncaught cannot call methods on listview prior to initialization; attempted to call method 'refresh'
我猜jQuery mobile还没有构建listview.我能做什么？
我正在使用jQuery Mobile 1.1.1和Apache Cordova 2.0.0.当我按下后退按钮时,我希望我的应用程序退出,但仅当当前页面具有ID = feedZive时.我正在使用以下代码来执行此操作:
function onDeviceReady(){
document.addEventListener("backbutton", onBackKeyDown, false);
function onBackKeyDown(){
if ($.mobile.activePage.is("#feedZive")){
navigator.app.exitApp();
}
else{
navigator.app.backHistory();
}
}
};
但是看起来我无法获取当前页面,因为我尝试了以下代码:
var activePage = $.mobile.activePage;
alert(activePage);
我的警报显示未定义.我也试图改变$.mobile.activePage,$.mobile.activePage.attr("id")但它没有奏效.
我在<head>我的网络应用程序中有以下代码,但我只是在我的iPhone 3GS上获得白屏,而DOM加载而不是启动画面.
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!--STYLES-->
<!--SCRIPTS-->
<!-- iPhone LAUNCHSCREEN-->
<link href="includes/images/apple-launch-480h.png" sizes="320x480" media="(device-height: 480px)" rel="apple-touch-startup-image">
<!-- iPhone (Retina) LAUNCHSCREEN-->
<link href="includes/images/apple-launch-480h2X.png" sizes="640x920" media="(device-height: 480px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPhone 5+ LAUNCHSCREEN-->
<link href="includes/images/apple-launch-568h.png" sizes="640x1136" media="(device-height: 568px)" rel="apple-touch-startup-image">
如何让我的启动画面在所有版本的iPhone上正确显示？代码未显示,但我的网络应用程序图标在添加到主页时正在运行.我正在使用jQuery Mobile来构建这个Web应用程序.
我还确认PNG图像的大小正确,我删除了Web应用程序图标,刷新并重新添加到主屏幕多次.我在StackOverflow上找到的解决方案都没有为我工作.我没有尝试过JavaScript解决方案,因为我确信有一个纯CSS解决方案.
我想在我的jQuery Mobile和jQuery webside上使用国际化选项.我尝试使用http://i18next.com上的文档生成一个示例,但似乎我失败了.有没有人有i18next的经验？
这是我的例子:
index.html的:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<script src="js/i18next-1.5.6.min.js" type="text/javascript"></script>
<script src="js/translation.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="content">
<div id="headline1" data-i18n="headline"></div>
<table width="100%" border="0" id="menu1" class="menu">
<tr id="surname">
<td width="50%" data-i18n="menu.surname"></td>
<td width="50%"> </td>
</tr>
<tr id="firstName">
<td width="50%" data-i18n="menu.firstName"></td>
<td width="50%"> </td>
</tr>
</table>
</div>
</div>
</body>
</html>
翻译文件:/locales/de/translation.json
{
"menu": {
"surname": "Name:",
"firstName": "Vorname:"
},
"headline": "Daten:",
"headline_1": "Daten Allgemein:",
"headline_2": "Daten Speziell:"
}
/locales/en/translation.json …
我正在尝试建立一个网站,用户可以将一些项目(div中的一个项目)拖动到页面上的其他div.它不是一张桌子左右,只是在页面的某个地方划分.
使用html5拖放它运行良好,现在我尝试为移动设备执行此操作.我可以将项目拖动到div,将它们放在那里并阻止这个dropzone,因为只有一个元素应该在dropzone中.我也可以将这个元素拖到另一个div或页面上的其他地方(如果我犯了一个错误,可放置区域只能在第一次删除div时工作)但是我不能在div中删除另一个现在为空的项目再次.
如何再次启用Dropzone？
如果一个被拖到另一个div上,是否有可能改变两个div的位置？
这是我的代码的相关部分:
<script type="text/javascript">
$ (init);
function init() {
$(".dragzones").draggable({
start: handleDragStart,
cursor: 'move',
revert: "invalid",
});
$(".dropzones").droppable({
drop: handleDropEvent,
tolerance: "touch",
});
}
function handleDragStart (event, ui) {}
function handleDropEvent (event, ui) {
$(this).droppable('disable');
ui.draggable.position({of: $(this), my: 'left top', at: 'left top'});
ui.draggable.draggable('option', 'revert', "invalid");
}
</script>
<body>
<div id="alles">
<div class="dropzones" id="zone1"><div class="dragzones" id="drag1">Item 1</div></div>
<div class="dropzones" id="zone2"><div class="dragzones" id="drag2">Item 2</div></div>
<div class="dropzones" id="zone3"><div class="dragzones" id="drag3">Item 3</div></div>
<div class="dropzones" id="zone4"><div class="dragzones" id="drag4">Item 4</div></div>
<div class="dropzones" …我们即将使用提到的库启动一个项目.我们已经在另一个项目中使用了jQM,但是与Backbone相结合.现在我们考虑将AngularJS与jQM一起使用.你认为这是个好主意吗？如果没有,为什么？
详细说明,问题是将这些库一起使用是否可取/推荐/容易/有益,或者有些东西可能会阻止我们在一个项目中使用它们.我们不想花费一半的项目时间让它们在原则上协同工作.