我正在构建一个使用Cordova/PhoneGap和JQuery Mobile的应用程序.
我想在应用程序中使用JQuery,但我无法让它工作 - 即使使用简单的代码也没有任何反应.
我相信我的标题设置正确:
<script type="text/javascript" src="cordova-2.7.0.js"></script>
<script type="text/javascript" src="js/jquery.min.1.9.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript" src="js/myscripts.js"></script>
<script type="text/javascript">
app.initialize();
</script>
当我得到JQuery Mobile样式标题和后退按钮等.
但是当我尝试一些简单的事情时:
document.addEventListener("deviceready", function(){
$('p').append("<strong>HEllO</strong>");
});
在myscripts.js文件中我什么都没得到.我是否需要以不同的方式触发JQuery？有人能指出我正确的方向吗？
编辑:
我发现这提到它把它放在div中.这实际上对我有用,例如
<div class="normal" data-role="page" data-title="Program">
<script type="text/javascript">
$(".normal").on('pageinit', function() {
$('p').append("<strong>HEllO</strong>");
});
</script>
但肯定有更好的方法吗？必须有一种方法可以将这些脚本全部放在自己的外部文件中吗？
PS:我的HTML是:
<body>
<div data-role="page" data-title="Program">
<div id="programholder">
<div data-role="header">
<a href="index.html" data-role="button" data-rel="back" data-direction="reverse" data-icon="arrow-l" data-iconpos="left">Back</a>
<h1>HEADER</h1>
</div><!--HEADER-->
<div data-role="content">
<p>
Append here
</p>
</div><!--CONTENT-->
</div><!--HOLDER-->
</div><!--PAGE-->
</body>
我正在使用带有JavaScript的jQuery移动页面.问题是除非刷新页面,否则JavaScript不起作用.这是我的代码:
jQuery(function($) {
var url = window.location.search.substring(1);
$('#mydiv').load('real_news.asp?' + url);
});
JQM加载页面的方式是data-role="page"通过ajax 获取具有属性的元素,而不是整个文档.
那么,我如何让JQuery Mobile从任何页面(或刷新)加载样式和脚本,而不是仅在入口点(index.htm)加载它们？
我正在使用jquery validate.js在我的jquery移动应用程序中验证我的联系表单.当我通过url或页面刷新加载页面时,验证似乎完美无缺.但是当我从另一个刷新的页面链接返回联系表单时,验证将停止工作.
它刷新页面时有效.我尝试过以下方法:
1)在jquery mobile js之前包含contact.js.
2)data-ajax="false";
3)使用 bind
$(document).bind("mobileinit", function(){
$.extend( $.mobile , { ajaxEnabled: false });
});
5)使用 window.onload
window.onload = function() {
if(!window.location.hash) {
window.location = window.location + '#loaded';
window.location.reload();
}
}
6)第一页加载后的一次页面刷新 Javascript仅适用于jQuery mobile中的页面刷新
但这些都不起作用.我需要做的是在导航到它时刷新页面一次.这是我与jquery mobile的联系表单代码.
<form method="post" action="" id="feedback" name="feedback">
<input type="text" name="user_name" data-role="none" id="name" value="" placeholder= "Your name*" />
<br />
<input class="email" required="true" type="text" name="user_email" data-role="none" id="email" value="" placeholder="Your Email*" />
<br />
<textarea cols="70" …我正在构建一个由几个jquery移动页面组成的项目,每个页面都有一个导航栏.
当我查看每个页面时,$(document).ready函数启动良好,但是当我通过导航栏进入页面时它不会启动..也在chrome调试器中我只看到一个html页面(我"我正在查看"在源文件夹中.
当我刷新页面时功能正常
试图用"$(document).ready(function(){"代替:
"$("div [data-role*='page']").live('pageshow',function(event,ui){"正如有人建议的那样
但这不起作用.
那是我加载的第一页:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/jquery.mobile-1.2.0.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
<link href="css/TableCSSCode.css" rel="stylesheet" type="text/css" />
<script>
$(document).ready(function () {
$.ajax({
type: "POST",
url: "getdata.aspx/return_member_list",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (res) {
var parsedData = JSON.parse(res.d);
var tableStr = "<table class='CSSTableGenerator'>";
$.each(parsedData, function () {
tableStr += "<tr><td>" + this.fName + "</td><td>" + this.lName + "</td></tr>";
});
tableStr …我想将脚本添加到 jquery mobile 中的外部页面而不是 home 文件（调用 jquery mobile 的源代码）。这是我的两个文件的代码
index.php 里面的代码
<head>
<title>My Web Application</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" href="view/css/mobile.css" />
<link rel="stylesheet" href="view/css/reset.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript" src="view/js/light.js"></script>
</head>
<body>
<div data-role="page" class="page">
<div data-role="header" id="index-header" data-theme="b">
<div id="logo">
<a href="#"><img src="view/images/Milan.png" alt="logo" height="80"></a>
</div>
</div>
<div id="color-bar"></div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="b">
<li><a href="#" title="theme"><img src="view/images/1.png" />Security</a></li>
<li><a href="light.php" title="calendar"><img src="view/images/2.png" />Info</a></li> …我有一个网站,直接加载时工作正常(通过调用其URL),但是,当我通过滑块转换到达网站时:
<li><a href="html/mySite.html" data-transition="slide">mySite</a></li>
好像它不会加载一个刚刚在head中声明的.js文件:
<script type="text/javascript" src="../../myJS.js"></script>
我是jQuery mobile,jQuery,HTML5和JS的新手.所以...有人可以向我解释一下URL调用和jQuery移动转换之间的区别是什么？
(顺便说一句.我用它来开发Android-App)
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" …jquery ×8
javascript ×5
html ×3
ajax ×1
android ×1
cordova ×1
external-js ×1
html5 ×1
jquery-ui ×1