I'm developing a webapp here using HTML and jQuery Mobile (JQM), so I'm pretty new at this.
What I'm trying to do here is to populate a JQM listview with a list of names.
Each of this names will link to a new page with personal data being displayed (Full name, address, date of birth, etc).
Currently, because of my lack of knowledge, I manually create a new .html file for EACH individual person (e.g. johnDoe.html for a fictional character Mr. John Doe). I then physically link the list elements to this html file via the
Problem is now I have 100 over individuals to populate that list view. I think that there's an easier way to do this rather than manually creating 100+ html files for all these individual persons right?
I heard of this JSON thing that might do the trick, but coming from a background of ZERO computing knowledge, I don't really understand how it works. Will someone please shed some light on how can I do this?
Thanks a lot!
I'm using Dreamweaver CS5.5 to do the coding. For this webapp that I'm tasked to develop, I was given a "template" or sorts that uses JQM and Backbone.js. As such, somehow the "multi-page" structure for a single HTML file doesn't seem to work. From what I see in the template, every HTML file has a corresponding JS file that has code that looks like this:
define(['jquery',
'underscore',
'backbone',
'views/phr/list',
'text!templates/vpr2.html'
function ($,
phrListView,
tmpVpr2) {
var view = Backbone.View.extend({
transition: 'fade',
reverse: true,
initialize: function () {
this.phrlistview = new phrListView();
render: function () {
$(this.el).append(_.template(tmpVpr2, {}));
console.log("Rendering subelements...");
Helper.assign(this, {
'#phrListView': this.phrlistview
return this.
For the HTML pages, they all begin with a &div data-role=header& tag, then a &div data-role=content&, before ending with a &div data-role=footer&, all with their respective content within the opening and closing tags.
For my listview in question, the JQM code for the listview will be within the &div data-role=content& part of the HTML file. How can I populate this listview with JSON data then?
(Apologies if I sound extremely noob at this, because I really am >.& Really appreciate the help!)
解决方案 Solution
Yes. Its possible to have two pages and use one for displaying your data and one to show up the details of the clicked item. I had to pull in some old stuff, a demo I made when jQM was in version 1.1 and change it to modern times. Anyway, considering I have an array like this :
"age": 31,
"name": "Avis Greene",
"gender": "female",
"company": "Handshake",
"email": "",
"phone": "+1 (845) 575-2978",
"address": "518 Forrest Street, Washington, New York, 3579"
"age": 31,
"name": "Dunn Haynes",
"gender": "male",
"company": "Signity",
"email": "",
"phone": "+1 (829) 454-3806",
"address": "293 Dean Street, Dante, Oregon, 5864"
I randomly generated stuff and made it upto 100 elements, just like how you seem to have. I have two pages.
&!--first page --&
&div data-role="page" id="info-page"&
&div data-role="header" data-theme="b"&
&h1& Information&/h1&
&div data-role="content"&
&ul data-role="listview" id="prof-list" data-divider-theme="a" data-inset="true"&
&li data-role="list-divider" data-theme="b" role="heading"&Names&/li&
&!--second page --&
&div data-role="page" id="details-page"&
&div data-role="header" data-theme="b"&&a href="#" data-rel="back" data-role="button"&Go back&/a&
&h1&Employee Details&/h1&
&div data-role="content"&&/div&
The first page, #info-page is for showing data in a listview. The second page, #details-page is for the info of the clicked item. Thats all you need. Only two pages, not more than that. So every time a click happens, you do the following through JavaScript
Get the current value of data from the array. Like if you click on the 4th li in the list, get the 4th object from the array which has all the data.
Store it in the data variable of the second page, so that it can be retrieved later. Something like this:
$("#details-page").data("info", info[this.id]);
Then, redirect to second page using changePage, like this :
$.mobile.changePage("#details-page");
When the second page opens, use the pagebeforeshow event to get the data from the page (which you stored into this page when the
tag in the previous page was clicked.
Use some HTML layout to populate the data. I used jQM's grids.
That's all folks!
Ive attached the JS used with the HTML. Its self explanatory. Read the inline comments in the code and you'll be able to understand more. Assume info is the array in picture.
//pageinit event for first page
//triggers only once
//write all your on-load functions and event handlers pertaining to page1
$(document).on("pageinit", "#info-page", function () {
//set up string for adding &li/&
var li = "";
//container for $li to be added
$.each(info, function (i, name) {
//add the &li& to "li" variable
//note the use of += in the variable
//meaning I'm adding to the existing data. not replacing it.
//store index value in array as id of the &a& tag
li += '&li&&a href="#" id="' + i + '" class="info-go"&' + name.name + '&/a&&/li&';
//append list to ul
$("#prof-list").append(li).promise().done(function () {
//wait for append to finish - thats why you use a promise()
//done() will run after append is done
//add the click event for the redirection to happen to #details-page
$(this).on("click", ".info-go", function (e) {
e.preventDefault();
//store the information in the next page's data
$("#details-page").data("info", info[this.id]);
//change the page # to second page.
//Now the URL in the address bar will read index.html#details-page
//where #details-page is the "id" of the second page
//we're gonna redirect to that now using changePage() method
$.mobile.changePage("#details-page");
//refresh list to enhance its styling.
$(this).listview("refresh");
//use pagebeforeshow
//DONT USE PAGEINIT!
//the reason is you want this to happen every single time
//pageinit will happen only once
$(document).on("pagebeforeshow", "#details-page", function () {
//get from data - you put this here when the "a" wa clicked in the previous page
var info = $(this).data("info");
//string to put HTML in
var info_view = "";
//use for..in to iterate through object
for (var key in info) {
//Im using grid layout here.
//use any kind of layout you want.
//key is the key of the property in the object
//if obj = {name: 'k'}
//key = name, value = k
info_view += '&div class="ui-grid-a"&&div class="ui-block-a"&&div class="ui-bar field" style="font-weight : text-align:"&' + key + '&/div&&/div&&div class="ui-block-b"&&div class="ui-bar value" style="width : 75%"&' + info[key] + '&/div&&/div&&/div&';
//add this to html
$(this).find("[data-role=content]").html(info_view);
I've also made a demo where you can read more about this at jsfiddle.net.
Here's the link :
本文地址： &
我开发web应用程序在这里使用HTML和jQuery移动（JQM），所以我pretty在这个新的。我想在这里做的是填充的ListView JQM与名称的列表。与正在显示的个人资料（姓名，地址，出生日期等），每次这个名称将链接到一个新的页面。目前，因为我的知识的缺乏，我手动创建每个个人（例如johnDoe.html为一个虚构的人物李四先生）一个新的.html文件。然后，我通过功能物理链接列表中的元素这个HTML文件。但问题是我现在有100个人以上用来填充列表视图。我认为有一个更简单的方法来做到这一点，而不是手动创建100+ HTML文件，所有这些个别人士对吧？我听说过这个JSON事情，可能会做的伎俩，而是从零计算知识背景的，我真的不明白它是如何工作的。会有人请阐明我怎么能做到这一点一些轻？非常感谢！编辑：我使用Dreamweaver CS5.5做编码。对于这个web应用程序，我是负责制订，我得到了一个使用JQM和Backbone.js的“模板”或排序。这样，莫名其妙的“多页”结构，一个HTML文件中似乎并没有工作。从我在模板中看到，每个HTML文件中有一个具有code，看起来像这样相应的JS文件： 定义（['jQuery的'，
“下划线”，
“意见/份/列表'，
“的文字！模板/ vpr2.html”
phrListView，
tmpVpr2）{
VAR视图= Backbone.View.extend（{
过渡：'褪色'，
反向：真实，
初始化：功能（）{
this.phrlistview =新phrListView（）;
渲染：功能（）{
$（this.el）.append（_模板（tmpVpr2，{}））;
的console.log（“渲染子元素...”）;
Helper.assign（这一点，{
“#phrListView'：this.phrlistview
返回视图。
}）; 有关HTML页面，它们都开始于一个＆LT; DIV数据角色=头＆GT; 标签，那么＆LT; DIV数据 - 角色=含量＆GT; ，以＆LT结束前，格数据角色=页脚＆GT; ，所有的开始和结束标记在各自的内容有关我的问题的列表视图中，JQM code为ListView将是＆LT中; DIV数据角色=含量＆在HTML文件的部分。我怎么能填充此列表视图与JSON数据呢？（道歉，如果我的声音在这个极其小白，因为我真的很>＆LT;！真的AP preciate的帮助下）解决方案 解决方案是的。其可能有两页，并使用一个用于显示数据和一个显示在点击的项目的详细信息。我有一些旧的东西拉，演示我做的时候JQM是1.1版本，并将其更改为近代。无论如何，考虑到我有一个这样的数组：
“ID”：0，
“时代”：31，
“名”：“安飞士格林”
“性别女”，
“公司”：“握手”
“电子邮件”：“”
“手机”：“+1（845）575-2978”
“地址”的：“518福雷斯特街，华盛顿，纽约，3579”
“标识”：1，
“时代”：31，
“名”：“唐恩海恩斯”
“性别”：“男”，
“公司”：“Signity”
“电子邮件”：“”
“手机”：“+1（829）454-3806”
“地址”：“293迪恩街，但丁，俄勒冈州，5864”
}] 我随机生成的东西，使得它高达100个元素，就像你似乎怎么有。我有两页。
＆LT;！ - 第一页 - ＆GT;＆LT; DIV数据角色=“页面”ID =“信息页”＆GT;
＆LT; DIV数据角色=“头”的数据主题=“B”＆GT;
＆LT; H1＆GT;信息＆LT; / H1＆GT;
＆LT; / DIV＆GT;
＆LT; DIV数据角色=“内容”＆GT;
＆LT; UL数据角色=“列表视图”ID =“教授清单”数据分压器主题=“a”的数据插入=“真”＆GT;
＆LT;李数据角色=“名单分压器”数据主题=“b”的角色=“标题”＆GT;名称＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / DIV＆GT;＆LT; / DIV＆GT;＆LT;！ - 第二页 - ＆GT;＆LT; DIV数据角色=“页面”ID =“详细信息页的”＆GT;
＆LT; DIV数据角色=“头”的数据主题=“B”＆GT;＆LT; A HREF =“＃”数据相对=“回”数据角色=“按钮”＆GT;返回＆LT; / A＆GT;
＆LT; H1＆GT;员工详细资料及LT; / H1＆GT;
＆LT; / DIV＆GT;
＆LT; DIV数据角色=“内容”＆GT;＆LT; / DIV＆GT;＆LT; / DIV＆GT; 第一页，＃信息页是显示在列表视图的数据。第二页，＃详细信息页是单击项目的信息。的这就是你所需要的。只有两页，不多说。的所以每次点击发生时，你做了通过JavaScript下面获得从所述阵列的数据的当前值。就像如果你点击列表中的第4个里，得到它具有所有的数据阵列的第4个对象。 它存储在第二页的数据的变量，以便它可以在以后检索。事情是这样的：
$（“＃详细信息页”）的数据（“信息”，信息[this.id]）;
然后，使用重定向到第二页 changePage ，就像这样：
$ mobile.changePage（“＃详细信息页”）。
在第二页打开后，使用 pagebeforeshow 事件来从页面的数据（你存储到这个页面时在$ p标签被点击$ pvious页。
使用一些HTML布局来填充数据。我用JQM的网格。
这是所有乡亲！全code 伊夫附与HTML使用JS的。其言自明。阅读在code内嵌批注，你就能够理解了。假设信息是图片中的数组。
// pageinit第一页事件//触发一次//编写所有载功能和事件处理属于第1页$（文件）。在（“pageinit”，“＃信息页”功能（）{
//设置字符串添加＆LT;李/＆GT;
VAR李=“”;
//添加为$李容器
$。每个（资讯，功能（我的名字）{
//添加的＆立GT;以“礼”变量
//注意使用+ =在变
//意思是我添加到现有的数据。不是取代它。
在阵列的ID //存储索引值的＆ A＆GT;标签
李+ ='＆LT;立GT;＆LT; A HREF =“＃”ID =“”+ I +'“级=”信息去“＆GT;' + name.name +'＆LT; / A＆GT;＆LT; /李＆GT;';
//追加名单UL
$（“＃教授清单”）。追加（LI）.promise（）。完成（功能（）{
//等待附加完成 - 为什么你使用的承诺，多数民众赞成（）
//（）完成将追加运行完成后
//添加单击事件的重定向发生＃详细信息页
$（本）。在（“点击”，“.INFO停停”功能（E）{
亦即preventDefault（）;
//存储在翻页的数据的信息
$（“＃详细信息页”）的数据（“信息”，信息[this.id]）。
//更改页面＃到第二页。
//现在的URL地址栏中将读取的index.html＃详细信息页
//其中＃细节页是第二页的“身份证”
//我们要重定向到现在用changePage（）方法
$ .mobile.changePage（“＃详细信息页”）;
//刷新列表以增强它的造型。
$（本）.listview（“刷新”）;
}）;}）;//使用pagebeforeshow//请勿使用PAGEINIT！//原因是您希望这每一次发生// pageinit会发生一次$（文件）。在（“pagebeforeshow”，“＃详细信息页”功能（）{
从数据//获取 - 你把这个在这里的时候，“一个”WA在previous页面点击
VAR资讯= $（本）。数据（“信息”）;
//字符串放在HTML中
变种info_view =“”;
//使用的for..in通过对象迭代
对（在信息VAR键）{
// im使用网格布局在这里。
//使用你想要的任何种类的布局。
//键是属性的对象中的关键
//如果obj = {名称：'K'}
//键=名称，值= K
info_view + ='＆LT; DIV CLASS =“UI并网一个”＆GT;＆LT; DIV CLASS =“UI-块一个”＆GT;＆LT; DIV CLASS =“UI栏场”的风格=“FONT-重量：大胆;文本对齐：左;“＆GT;' +按键+'＆LT; / DIV＆GT;＆LT; / DIV＆GT;＆LT; DIV CLASS =“UI块-B”＆GT;＆LT; DIV CLASS =“UI栏值”的风格=“宽度：75％”＆GT;' +信息[键] +'＆LT; / DIV＆GT;＆LT; / DIV＆GT;＆LT; / DIV＆GT;';
//添加此为HTML
$（本）.find（“[数据角色=内容]”）HTML（info_view）;}）; 演示我也做了一个演示，你可以在jsfiddle.net阅读更多关于这一点。这里的链接：
本文地址： &
扫一扫关注IT屋
微信公众号搜索 “ IT屋 ” ，选择关注
与百万开发者在一起
(window.slotbydup = window.slotbydup || []).push({
id: '5828425',
container: s,
size: '300,250',
display: 'inlay-fix'关于jquerymobile页面跳转和页面刷新问题
<a data-traceid="question_detail_above_text_l&&
我用的jquerymobile1.0，每次到一个页面，必须刷新下才能用啊，怎么回事啊，比如a.html页面转到b.html，b页面的内部page跳转不管用，必须把b页面刷新下才可以，还有1.0版本的& &
$(document).bind('swiperight', function(){
var prePages = $.mobile.activePage.prevAll('div[data-role=page]');
if(prePages.length !== 0){
$.mobile.changePage(prePages.first().attr('id'), {transition: &slide&,
reverse: false,
changeHash:true
alert('这已经是最后一页了');
我怎么滑动之后转不过去啊，显示error page loading，这个参数怎么写啊，我是用prePages.first().attr('id')这个方法获得想要跳转的page的id的，但是1.0的不知道怎么写，大家帮帮忙吧
同问，我也出现跳转之后css排版的问题。。。
同问，JQM就这点不爽
谁知道怎么解决？？？
你在要跳转的a标签 加上data-ajax='false'
--- 共有 1 条评论 ---
3Q，解决了，感谢。
你在要跳转的a标签 加上data-ajax='false' 这是正解
$(document).bind(&mobileinit&, function(){ $.mobile.ajaxEnabled =});
这样写不管用吗？需要买个a标签都加data-ajax='false'吗？
对，我试过了，管用
& & & & &&li&&a href=&Detail.html& data-ajax='false' &Detail&/a&&/li&
话说 跳转的 loader 效果不就没有了?
鱼与熊掌的问题吗?jQuery Mobile中的页面加载与跳转机制 - pinocchioatbeijing - 博客园
第一次做用jQuery Mobile做东西，发现一些跟平时的思维习惯不太一样的。其中这个框架的页面加载机制便是其中一个。如果不明白其中的奥秘，往往会出现一些让人摸不着头脑的怪现象，比如页面进入后点击按钮后Javascript就是不执行，而用F5刷新页面后又可以正常执行等。
即使我们明白了HTML文件与jQuery Mobile中page概念的区别，也还是不能解决上述问题。当然，了解这个是一个大前提。原来，jQuery Mobile是用Ajax的方式加载所有HTML中的标记data-role="page"的DIV元素中，第一个HTML页面一般都是完全加载，包括 HEAD 和BODY 都会被加载到DOM中，完成后便是链接到的其他页面内容的加载。 第二个HTML页面只有 BODY 中的内容会被以Ajax的方式加载到头一个HTML的 DOM中。 并且第二HTML页面的 BODY 中的内容也并非全部加载，而仅仅是其中的第一个带data-role="page"属性的DIV会被加载进去，其余的东西则无缘进入页面渲染。
直接上代码，或许更容易让人明白些：
index.html
&!DOCTYPE html&
&html lang="en"&
&!-- META TAGS Declaration --&
&meta charset="UTF-8"&
&title&TEst&/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="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&
$(document).on('pagebeforeshow', '#foo', function(){
alert($('#body-test').html());
&body id="body-test"&
&div data-role="page" id="portfolio"
data-add-back-btn="true"&
&div data-role="content" data-theme='c' &
&a href="test.html" data-role="button"&Go to Bar&/a&
&/div&&!-- Page Project #1 --&
&meta charset="utf-8" /&
&meta name="viewport" content="width=device-width, initial-scale=1"&
&link rel="stylesheet" href="style/jquery.mobile-1.3.1.css" /&
&script src="jquery-js/jquery-1.10.1.js"&&/script&
&script src="jquery-js/jquery.mobile-1.3.1.js"&&/script&
&title&Foobar&/title&
&div data-role="page" id="foo"&
&div data-role="content"&
&a href="#bar" data-role="button"&Go to Bar&/a&
&div data-role="page" id="bar"&
&div data-role="content"&
&p&Bar&/p&
参考资料来源：扫一扫体验手机阅读
去掉jquerymobile自带样式
<span type="1" blog_id="1137645" userid='
12篇文章，1W+人气，0粉丝
<span type="1" blog_id="1137645" userid='jquery mobile中怎么将input和button放在同一行_百度知道
jquery mobile中怎么将input和button放在同一行
jquery mobile中怎么将input和button放在同一行？非常感谢
&label for=&mobile& class=&ui-hidden-accessible
ui-grid-b ui-block-a&& 验证码&/label&
&input type=&text& name=&mobile& id=&mobile& placeholder=&验证码& value=&&&
&a href=...
我有更好的答案
你给这两个标签加一些你自定义的样式来控制着两个标签的float不就可以了。或者仔细看看jquery mobile的文档，应该是支持的！
采纳率：71%
来自团队：
为您推荐：
其他类似问题
&#xe675;换一换
回答问题，赢新手礼包&#xe6b9;
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。