标签: jquery-mobile
添加jquery移动滑动事件
我有一个listview,我想要做的是在链接上添加一个滑动事件.例如,如果用户滑动第一个链接,则会转到该页面.这可能与listview元素一起使用.我试过div,href,a,li,ul但仍然没有警报.它适用于身体.谢谢
<div>
<ul data-role="listview" data-inset="true">
<li class="rqstpage"><a href="./requests.php">Requests</a></li>
<li><a href="./speakers.php" data-transition="pop">Control Panel</a></li>
<li><a href="./schedule.html">Schedule</a></li>
<li><a href="./information.html">Information</a></li>
</ul>
</div>
<script>
$("div ul li.rqstpage").bind('swipe',function(event, ui){
$.mobile.changePage("requests.php", "slide");
});
</script>
推荐指数
解决办法
查看次数
在动态添加HTML到jquery mobile后刷新一个部分
可能重复:
动态添加可折叠元素
我已经看到了一些这方面的帖子,但它们似乎都没有真正适用,或者我只是读错了.我有一些HTML从服务器提供给我,我真的无法改变.我想要做的是,获取HTML,将其插入div元素并让jQuery mobile在它上面做样式.我可能需要多次这样做,这就是痛苦发生的地方.
当我第一次插入它时,它一切都很好,jqm拾取添加和完美的样式.如果我第二次尝试,jqm根本不会拿起它.我已经尝试制作一个我复制和修改的"模板",或者只是插入静态HTML并且都不起作用.
我在下面有一个测试用例,正如你所看到的,点击一次添加新列表,没关系,再点击它就可以得到一个没有样式的选择.我在某处读过使用直播活动可能会有效,但在这种情况下也不行.
此外,我知道jQuery mobile中的选择列表selectmenu方法,但我得到的项目可能是单/多选列表,一堆单选按钮甚至一组自由文本字段.正如你所看到的,我也尝试在最顶层的元素上运行页面方法,我也尝试在我即将添加的元素上运行页面,但都无济于事.:(
测试:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>List insert test</title>
<meta http-equiv="Pragma" content="no-cache" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<!-- include jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.js"></script>
<!-- include jQuery Mobile Framework -->
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.css" />
</head>
<body>
<div data-role="page" data-theme="b" id="Dashboard">
<button id='addlist'>add new list</button>
<button id='addips'>add templated list</button>
<button id='clearall'>clear</button>
<div id='theplace'></div>
<div id='newtemp'>
<select id='thelisttemplate'>
<option value="1">1</option>
<option value="2">2</option> …推荐指数
解决办法
查看次数
导航按钮上的jquery mobile force ui-btn-active
我遇到了jQuery移动导航(导航栏)的问题.
我有4页,我在每页上将class ="ui-btn-active"设置为不同的页面.
例如:
第1页:
<div data-role="footer">
<div data-role="navbar">
<ul>
<li><a href="index.html" data-icon="home" data-iconpos="top" class="ui-btn-active">Page 1</a></li>
<li><a href="index2.html" data-icon="plus" data-iconpos="top">Page 2</a></li>
<li><a href="index3.html" data-icon="grid">Page 3</a></li>
<li><a href="index4.html" data-icon="star" data-iconpos="top">Page 4</a></li>
</ul>
</div><!-- /navbar -->
那么如果你去第2页:
第1页:
<div data-role="footer">
<div data-role="navbar">
<ul>
<li><a href="index.html" data-icon="home" data-iconpos="top">Page 1</a></li>
<li><a href="index2.html" data-icon="plus" data-iconpos="top" class="ui-btn-active">Page 2</a></li>
<li><a href="index3.html" data-icon="grid">Page 3</a></li>
<li><a href="index4.html" data-icon="star" data-iconpos="top">Page 4</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
等等...
我的问题是它并不总是突出显示,有时我必须按两次按钮才能高亮显示.
有没有人知道如何强制这个工作？
推荐指数
解决办法
查看次数
jquery移动背景图像
我正在构建一个jQuery移动网站,我正在尝试将可缩放图像插入到背景中,这将调整到手机的屏幕大小.这是我的代码:
<!DOCTYPE html>
<html>
<head>
<title>Discover Dubrovnik</title>
<link rel="stylesheet" href="jquery.mobile-1.0a4.1.min.css" />
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.0a4.1.min.js"></script>
<style type="text/css">
.ui-page {
background: transparent url(image.gif);
}
</style>
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header">
<h1>Header tex</h1>
</div><!-- /header -->
<div data-role="content" data-theme="d">
some text
</div><!-- /content -->
<div data-role="footer">
<h1>Neki izbornik</h1>
</div>
</div><!-- /page -->
当窗口全屏时,我得到背景图像,但是当我调整它/缩小它时(比如电话中的屏幕),图像没有调整大小并且没有居中,所以我只能看到它的一部分...
连接的jQuery和CSS文件从jquerymobile.com下载
推荐指数
解决办法
查看次数
在jquery mobile中输入焦点,但键盘不会出现
我正在使用jquery,jquery mobile和phonegap.我想在这个页面上显示键盘输入类型="text".
<section id="page1" data-role="page">
<header data-role="header">
<h1>jQuery Mobile</h1>
</header>
<div data-role="content" class="content">
<input type="text" placeholder="?????" />
</div>
</section>
我的剧本是
$(document).ready(function(){
$('input').select();
$('input').focus();
});
文本字段是聚焦的,但是键盘没有显示,并且当单击输入type ="text"时它被激活.如何强制在javascript中启动键盘或使用phonegap插件？
推荐指数
解决办法
查看次数
在jQuery Mobile中使用Bootstrap
Bootstrap(v2)和jQuery Mobile(v1.1 RC1)都提供了我想用于我的应用程序的构建块.
Bootstrap干净,简单而精彩.但是,它缺乏jQuery Mobile的极其简单和可定制的"列表视图",我需要创建移动Web应用程序.
从我的简单测试中,他们互相帮助(弄乱一些布局,填充,大小等).
所以,我的问题:
- 我们可以在同一个HTML页面上同时使用Bootstrap和jQuery Mobile吗？
- 如果我们不能将它们结合起来,那么Bootstrap对jQuery Mobile的"列表视图"的回答是什么？
推荐指数
解决办法
查看次数
jQuery Mobile加载消息
当我将jQuery Mobile链接到我的页面时,页面底部出现了某种加载消息,我无法摆脱它.我试过$ .mobile.pageLoading(true)但它没有用.
我应该如何删除它？我没有把它打印到任何地方.
推荐指数
解决办法
查看次数
JQuery解析JSON数组
我有JSON如下输出:
["City1","City2","City3"]
我想获得每个城市名称,我该怎么做？
$.getJSON("url_with_json_here",function(json){
});
编辑:
$.getJSON('url_here', function(data){
$.each(data, function (index, value) {
$('#results').append('<p>'+value+'</p>');
console.log(value);
});
});
以上似乎不起作用,没有输出值.
推荐指数
解决办法
查看次数
JQuery Mobile出错
下面,我收到此错误:
我已将问题代码缩小到JQuery Mobile 1.0或更高版本以及Asp.NET ScriptManager.
我向Visual Studio 2012添加了一个新的Web窗体项目,并包含以下代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" ScriptMode="Release" runat="server"></asp:ScriptManager>
<div>
</div>
</form>
</body>
</html>
代码背后没有代码页面.
- 这就是它,但是当我运行项目时, 当包含ScriptManager和JQuery Mobile脚本时,我收到上述错误.
- 删除JQuery Mobile或ScirptManager时不会发生错误.
半天想知道并试图找到解释,我遇到的一个特定网站建议将ScriptMode ="Release"添加到ScriptManager.
将ScriptMode ="Release"添加到ScriptManager后,我没有收到上述错误.
搜索MSDN,它定义了ScriptMode:获取或设置一个值,该值指定是否呈现客户端脚本库的调试版本或发行版本.
将ScriptMode添加到ScriptManager后没有抛出错误,但为什么？有人可以解释为什么添加ScriptMode会阻止错误出现,而且只是添加ScriptMode,意味着真正的解算器还是创可贴？
这里抛出错误:
谢谢
下面我已经包含了渲染的HTML页面:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title><link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<form method="post" …推荐指数
解决办法
查看次数
在datepicker上禁用过去的日期
如何在datetimepicker上禁用当前日期的过去日期？我试过类似问题的帖子很少但是无法实现它,下面就是我尝试过的
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen"
href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
<script type="text/javascript"
src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script type="text/javascript"
src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
</script>
<script type="text/javascript">
$(function() {
$('#datetimepicker2').datetimepicker({
language: 'en',
pick12HourFormat: true
});
});
</script>
<div id="datetimepicker2" class="input-append">
<input data-format="MM/dd/yyyy" type="text"/>
<span class="add-on">
<i data-date-icon="icon-calendar">
</i>
</span>
我也试过了
$("datetimepicker2").datepicker({ changeYear: true, dateFormat: 'dd/mm/yy', showOn: 'none', showButtonPanel: true, minDate:'0d' });
和
$("#datetimepicker2").datepicker({ minDate: 0 });
推荐指数
解决办法
查看次数