如何使用HTML/Twitter Bootstrap/Jquery Mobile等创建简单的iOS类型的表视图
How to create a simple iOS type Table View using HTML / Twitter Bootstrap / Jquery Mobile etc
我知道Objective-C，但我对HTML/jQuery/JS非常陌生。
我想用这些创建一个表视图。
有人能教我怎么做吗？尽管我能够使用下面的代码创建一个静态的表视图。
我现在不确定如何用数组填充它。
源代码：
<!DOCTYPE html>
<html>
<head>
<title>Twitter Bootstrap : Grids using Bootstrap </title>
<link rel="stylesheet"
href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet"
href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<style>
.demog {
background:#444;
color:#ffffff;
padding:10px;
height:80px;
margin-left: 0 ;
margin-bottom:1px;
text-align:left;
}
</style>
<body>
<div data-role="page" id="table">
<div data-role="header" data-add-back-btn="True" data-back-btn-text="Return">
<h1>Table</h1>
<a href="dashboard.html" class="ui-btn-left" data-icon="home" data-iconpos="notext"
data-direction="reverse">Home</a>
<div class="bootstrap-demo">
<div class="row ">
<div class="col-md-1"><p class="demog">value 1 <br><br>Thdepiof fu utoiurotiurotpu oiturou</p></div>
<div class="col-md-1"><p class="demog">Value 2</p></div>
<div class="col-md-1"><p class="demog">Value 3</p></div>
<div class="col-md-1"><p class="demog">Value 4</p></div>
<div class="col-md-1"><p class="demog">Value 5</p></div>
<div class="col-md-1"><p class="demog">Value 6</p></div>
<div class="col-md-1"><p class="demog">Value 7</p></div>
<div class="col-md-1"><p class="demog">Value 8</p></div>
<div class="col-md-1"><p class="demog">Value 9</p></div>
<div class="col-md-1"><p class="demog">Value 10</p></div>
<div class="col-md-1"><p class="demog">Value 11</p></div>
<div class="col-md-1"><p class="demog">Value 12</p></div>
</div>
</div>
</div>
</div>
</body>
</html>
对于JQuery来说，动态表视图实现非常简单。您可以将"row"div替换为以下内容：
<ul data-role="listview" id="itemslist" data-autodividers="true">
</ul>
如果不需要子标头，则最后一个属性是可选的。
然后，您可以用这样的javascript填充列表，其中"data"是"item"对象的JSON数组：
function updateList(data, listId, target) {
// called to populate list
$(listId).empty();
$.each(data, function(i, item) {
$(listId).append('<li><a href="' +target+ '" id="' + item.title + '"><h3>' + item.title + '</h3></a></li>');
});
$(listId).listview().listview('refresh');
}
该列表可以填充在任何页面事件上（例如pageinit、pageshow、pagebeforeshow），如下例所示。请注意，JQuery Mobile 1.5中不赞成使用某些页面事件，而赞成使用页面容器事件。
$(document).on('pageinit', '#main', function(){
updateList(allitems, '#itemslist', '#itemdetail');
$('#itemslist').on('click', 'a', function(e) {
// store selected item into global variable for use on detail page
curItem = this.id;
});
});
下面是一个完整的工作示例，包含数据：
<!DOCTYPE html>
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
<html lang=en>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- JQuery dependencies -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script>
var allitems = [
{"title":"first item",
"description":""
},
{"title":"second item",
"description":""
},
{"title":"third item",
"description":""
},
{"title":"fourth item",
"description":""
}
];
$(document).on('pageinit', '#home', function(){
updateList(allitems, '#itemslist', '#itemdetail');
$('#itemslist').on('click', 'a', function(e) {
// store selected item into global variable for use on detail page
curItem = this.id;
});
});
function updateList(data, listId, target) {
// called to populate list
$(listId).empty();
$.each(data, function(i, item) {
$(listId).append('<li><a href="' +target+ '" id="' + item.title + '"><h3>' + item.title + '</h3></a></li>');
});
$(listId).listview().listview('refresh');
}
</script>
<title>List demo</title>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" data-position="fixed">
<h1>List demo</h1>
</div>
<div data-role="main" class="ui-content">
<div>
<ul data-role="listview" id="itemslist">
</ul>
</div>
</div>
</div>
</body>
</html>
相关文章：
- 简单的javascript在Shopify中不起作用
- 挖空JS绑定不输出简单视图模型的值
- 简单高图表用作单独的.js文件，但不在视图中
- 在 sapui5 上显示“简单窗体”视图
- 主干中的简单视图不起作用
- 优化显示简单项目列表的模型/视图
- 在视图中简单呈现 AngularJS 范围数据
- 从视图源下载html的简单方法，同时保留文件夹结构
- 使用JavaScript创建简单的视图引擎
- todo的一个简单应用程序，不向视图添加输入值
- Backbone-简单集合视图-can't打印项目
- 如何使用HTML/Twitter Bootstrap/Jquery Mobile等创建简单的iOS类型的表视图
- 绑定带有单个记录的简单视图模型
- 主干代码不呈现简单视图
- 简单的视图
- 骨干和下划线模板一个简单的视图
- 模型视图控制器-用于非常简单的单页原型的Javascript框架
- 主干.js视图，是一个简单的选择列表
- 我应该从一个简单的django AJAX视图返回什么样的响应?
- 确保JSON在简单的视图模型对象上漂亮地打印，而不会触及javascript (ASP. js).Net MVC 4)
