我在一个HTML页面中创建了一个小的Jquery Mobile应用程序.我面临的问题是移动设备中页面转换的性能是可怕的.在我滑到下一页后,我最终等了3-4秒才更改页面.我有什么想法可以改进吗？
这是代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Multi-page template</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="http://jquerymobile.com/branches/tables/css/themes/default/jquery.mobile.css">
<link rel="stylesheet" href="http://jquerymobile.com/branches/tables/docs/_assets/css/jqm-docs.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 id="test" method="post">
<!-- Start of page: #p01 -->
<div data-role="page" id="p01" data-theme="b" data-prefetch>
<div data-role="header" data-theme="a">
<h1>Page 01 of 05</h1>
</div><!-- /header -->
<div data-role="content" >
<h3>Please provide these details about the child</h3>
<br/>
<fieldset>
<label>Child's Full Name:</label>
<fieldset>
<input id = "p01_childFirstName_text" type="text" placeholder="First Name...">
<input id …我正在使用jquery mobile.我只是想阻止jquery mobile做任何事情,除非我明确地调用trigger('create')方法.有没有办法停止jquery移动自动初始化一段时间.
我的索引页面上有一个非常简单的用例.
<script src="js/jquery-min.js"></script>
<script src="js/jquery-mobile.js"></script>
<script type="text/javascript" src="cordova-2.2.0.js"></script>
<script>
$("body").on("swipeleft", function(event) {
alert('hello');
/*window.location.href = "html/first.html";*/
});
</script>
由于某种原因,这个事件发射了2次.现在我确定我没有在body标签上绑定另一个事件,因为这是第一页.我尝试过其他简单的事件,比如touchstart等.他们都开了两次.我究竟做错了什么 ？
更新: -
我已经按照以下方式修改了我标记为正确的答案,并且它有效.此页面上的事件未触发两次.
<head>
<script type="text/javascript" src="js/jquery-min.js"></script>
<script>
$(document).bind("mobileinit", function() {
$.mobile.autoInitializePage = false;
$.mobile.defaultPageTransition = 'none';
$.mobile.touchOverflowEnabled = false;
$.mobile.defaultDialogTransition = 'none';
$.mobile.loadingMessage = '' ;
});
</script>
<script type="text/javascript" src="js/jquery-mobile.js"></script>
<script type="text/javascript" src="cordova-2.2.0.js"></script>
</head>
我正在使用Jquery Mobile在dreamviewer中制作基本的"新闻"应用程序.
我做了所有的设计,但现在是时候把我的api服务器上的Json数据放到我的应用程序中了.
这是我的api服务器链接; fe"http:/ mywebapiurl"
我想我需要编写关于getJson的Jquery函数,但我不知道如何制作它？
我将如何通过小文章图片,发表文章和文章头条将其放入我的列表视图中？
这是我的列表视图的示例,我将展示来自Json的新闻.
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Post Mobile</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li><a href="#headline">
<img src=ArticlePicture" class="ui-li-has-thumb"/>
<h3>ArticleTitle</h3>
<p>ArticleHeadline</p>
</a></li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<h4>© funky app </h4>
</div>
这是我试过的代码示例;
<script>
$(document).ready(function() {
$.getJSON("http://mywebapiurl", function(data) {
var result= "";
$.each(data.LatestNews, function(index, value) {
result+= "<ul><li><a href='#'><h3>"+value.TITLE+"</h3><p>"+value.SPOT+"</p></a></li></ul>";
});
$("#articleContainer").html(result);
})
});
</script>
等你的回答.
非常感谢你.
请找到以下小提琴http://jsfiddle.net/yesvin/Xj8p8/
<ul data-role="listview">
<li data-role="fieldcontain">
<label for="basic">Text Input:</label>
<input type="text" name="name" id="basic" value="" />
</li>
<li data-role="fieldcontain">
<label for="basic">Text Input:</label>
<input type="text" name="name" id="basic" value="" />
</li>
<li data-role="fieldcontain">
<label for="pageselect">page select</label>
<select name="pageselect" id="pageselect" data-native-menu="false">
<option value="">Choose One</option>
<option value="">pageselect opt 1</option>
<option value="">pageselect opt 2</option>
<option value="">pageselect opt 3</option>
</select>
</li>
<li data-role="fieldcontain">
<label for="basic">Text Input:</label>
<input type="text" name="name" id="basic" value="" />
</li>
</ul>
<a href="#pop" data-rel="popup" data-position-to="window" data-role="button" id="farmer_family_member">Add Popup</a>
<div data-role="popup" id="pop">
<ul data-role="listview">
<li …jquery event-propagation jquery-mobile jquery-mobile-fieldset jquery-mobile-popup
我是jquery mobile和jquery的新手.我正在开发一个带有phonegap和jquery mobile的项目.我正在使用PhotoSwipe图片库.它工作得很好,并显示图像.但我想为我的画廊制作照片的自定义工具栏.我看到了他们给定的自定义工具栏示例,几乎成功了.虽然我是这个领域的新手,但我没能将它与jquery mobile集成.而我的自定义按钮根本不起作用.这是我的代码示例.
for (var i = 0; i < photo_len; i++) {
$('.GalleryAccessories').append('<li><a href="' + image_item[i].original + '" rel="external"><img src="' + image_item[i].original + '" alt=""/></a></li>');
}
$('.GalleryAccessories').trigger("create");
var myPhotoSwipe = $(".GalleryAccessories a").photoSwipe({
getToolbar: function(){
return '<div class="ps-toolbar-close" style="padding-top: 12px;">Back</div><div class="ps-toolbar-play" style="padding-top: 12px;">Play</div><div class="ps-toolbar-previous" style="padding-top: 12px;">Previous</div><div class="ps-toolbar-next" style="padding-top: 12px;">Next</div><div class="ps-toolbar-close" style="padding-top: 12px;">View All</div>';
},
jQueryMobile: true,
loop: false,
enableMouseWheel: false,
enableKeyboard: false
});
myPhotoSwipe.show(0);
查看全部按钮根本不起作用.我试过他们给出的代码,但没有运气.我甚至尝试过我现在所做的但仍然没有用.抱歉我的英语不好.请帮帮我...提前谢谢.
使用jQuery Mobiles滑动事件时,是否可以获得回调函数中的方向和距离？我在官方文档中没有发现任何相关内容.
TouchSwipe是一个不错的选择,但我需要tapjQuery Mobile 的事件形式,我不想包含两个库.
我正在尝试使用phonegap应用程序,但我不知道如何构建体系结构.
我尝试了一种带有大js的MVC模型用于控制器,带有ajax请求的js文件从服务器(模型)获取信息.
对于视图,我使用带有标题和头部的主要布局.
我使用JQuery中的load更新我的内容.
我使用这个系统有一些问题,例如前一个按钮关闭应用程序,因为我总是使用相同的页面.当我旋转屏幕时,我回到第一个屏幕,因为页面正在刷新.
我想知道你是否有一些解决方案或一些代码样本以良好的基础开始
谢谢
architecture model-view-controller android jquery-mobile cordova
我有以下html,
http://jsfiddle.net/2bWfL/168/
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>My Title</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview">
<li>
<a href="#">
<img width="80" height"80" src="http://www.gravatar.com/avatar/7efa2e4098f60c15d230436ca99d7250?s=32&d=identicon&r=PG" />
<h3>New Latest One</h3>
<p>$12,000</p>
<input type="text" style="width:75px"/>
</a>
</li>
</ul>
</div><!-- /content -->
</div><!-- /page -->
<style>
.ui-input-text{
width: 75px;
}
</style>
</body>
但是图像不是垂直居中的.如何让它成为中心？
我正在尝试使用数据类型"对话框"来获取一个div,以便在JQuery Mobile中显示,由Javascript事件触发.下面示例中的按钮单击纯粹是为了触发事件.
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//$.mobile.changePage('#addCatForm');
$('#createEvent').click (function () {
console.log('Prove event fired');
$.mobile.changePage('#addCatForm', {
transition: 'pop',
changeHash: false,
role: 'dialog'
});
});
});
</script>
</head>
<body>
<div data-role="page" id="mainPage">
<button id="createEvent">Create Event</button>
<div data-role="dialog" id="addCatForm" data-theme="c">
<p>here is some text</p>
<div data-role="content">
<input type="text" id="catText" data-theme="c"/>
<input data-role="button" data-mini="true" data-theme="b" data-inline="true" type="submit" id="addCat" value="Add Category">
<button data-role="button" data-mini="true" data-theme="c" data-inline="true" id="canCat">Cancel</button>
</div>
</div>
</div>
</body>
console.log输出正确触发,但我无能为力似乎要显示对话框.
任何帮助赞赏.
谢谢,
jquery-mobile ×10
jquery ×9
javascript ×5
cordova ×3
css3 ×3
html5 ×3
android ×1
architecture ×1
json ×1
listview ×1
photoswipe ×1
swipe ×1