Framework7 and Material Design: Styling not rendered - javascript

I'm building my first Android app using Framework7. However, when I use the example provided in https://www.tutorialspoint.com/framework7/navbar_basic.htm, and use the CDNs corresponding to the latest version of Framework7 (3.6.0 instead of 1.4.2), my webpage just renders as HTML without any styling whatsoever.
My code:
<!DOCTYPE html>
<html class="with-statusbar-overlay">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Notifications</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/3.6.0/css/framework7.min.css">
</head>
<body>
<div class="views">
<div class="view view-main">
<div class="pages navbar-fixed">
<div data-page="home" class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="center">Notifications</div>
</div>
</div>
<div class="page-content">
<div class="content-block">
<p>Single-line notification</p>
<p>Multi-line notification</p>
<p>With custom button</p>
<p>With callback on close</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/framework7/3.6.0/js/framework7.min.js"></script>
<script>
</script>
</body>
</html>

This issue happen since you are not init app, also you dont set an App Wrapper, lets check this example
You can find here app init for F7:
var app = new Framework7({
// App root element
root: '#app',
// App Name
name: 'My App',
// App id
id: 'com.myapp.test',
// Enable swipe panel
panel: {
swipe: 'left',
},
// Add default routes
routes: [
{
path: '/about/',
url: 'about.html',
},
],
// ... other parameters
});
App Html Layout:
<div id="app">
<div class="views">
<div class="view view-main">
<div class="pages navbar-fixed">
<div data-page="home" class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="center">Notifications</div>
</div>
</div>
<div class="page-content">
<div class="content-block">
<p>Single-line notification</p>
<p>Multi-line notification</p>
<p>With custom button</p>
<p>With callback on close</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Note: I suggest you start from here nested of toutrialpoint website.
Ref:
Init F7 App
App Layout

Related

Show Is Not A Function At HTMLButtonElement Error

I am following this codepen which works perfectly. I took the code from it and put it in my local HTML file and added the JS. However when I run it locally it doesn't work. The console prints out the following message:
Uncaught TypeError: dialogLogin.show is not a function at HTMLButtonElement.<anonymous>
My HTML & JS code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Auth.X</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css">
</head>
<body>
<h1>How can I use several dialogs on the same website?</h1>
<h2>https://material.io/components/web/catalog/dialogs/</h2>
<!-- Trigger Dialogs -->
<button id="dialog-login">Open Login Dialog</button><br><br>
<button id="dialog-delivery">Open Delivery Dialog</button>
<!-- Dialogs: Login -->
<aside id="mdc-dialog-login"
class="mdc-dialog"
role="alertdialog"
aria-labelledby="mdc-dialog-login-label"
aria-describedby="mdc-dialog-login-description">
<div class="mdc-dialog__surface">
<header class="mdc-dialog__header">
<h2 id="mdc-dialog-login-label" class="mdc-dialog__header__title">
Login
</h2>
</header>
<section id="mdc-dialog-login-description" class="mdc-dialog__body">
[LOGIN FORM]
</section>
<footer class="mdc-dialog__footer">
<button type="button" class="mdc-button mdc-dialog__footer__button--cancel">Close</button>
<button type="button" class="mdc-button mdc-button--raised mdc-dialog__footer__button mdc-dialog__footer__button--accept">RegisteR</button>
</footer>
</div>
<div class="mdc-dialog__backdrop"></div>
</aside>
<!-- Dialogs: Delivery -->
<aside id="mdc-dialog-delivery-condition"
class="mdc-dialog js--mdc-delivery-condition"
role="alertdialog"
aria-labelledby="mdc-delivery-condition-label"
aria-describedby="mdc-delivery-condition-description">
<div class="mdc-dialog__surface">
<header class="mdc-dialog__header">
<h2 id="mdc-delivery-condition-label" class="mdc-dialog__header__title">
[Delivery]
</h2>
</header>
<section id="mdc-delivery-condition-description" class="mdc-dialog__body">
[TEXT]
</section>
<footer class="mdc-dialog__footer">
<button type="button" class="mdc-button mdc-dialog__footer__button--cancel">Close</button>
</footer>
</div>
<div class="mdc-dialog__backdrop"></div>
</aside>
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<script>
// Find all the dialogs on the page
const dialogLoginEle = document.getElementById('mdc-dialog-login');
const dialogLogin = new mdc.dialog.MDCDialog(dialogLoginEle);
dialogLogin.listen('MDCDialog:accept', function() {
console.log('accepted login');
});
dialogLogin.listen('MDCDialog:cancel', function() {
console.log('canceled login');
});
const dialogDeliveryEle = document.getElementById('mdc-dialog-delivery-condition');
const dialogDelivery = new mdc.dialog.MDCDialog(dialogDeliveryEle);
dialogDelivery.listen('MDCDialog:accept', function() {
console.log('accepted delivery');
});
dialogDelivery.listen('MDCDialog:cancel', function() {
console.log('canceled delivery');
});
document.querySelector('#dialog-login').addEventListener('click', function (evt) {
dialogLogin.show();
});
document.querySelector('#dialog-delivery').addEventListener('click', function (evt) {
dialogDelivery.show();
});
</script>
</body>
Why does this not work locally?
UPDATE
As per my comment, version 0.28 of the MDC Javascript works with this code. The dialog boxes appear. So the question now is, in the latest version of the MDC Javascript how is this supposed to work?
After talking to the guys on the MDC Discord channel, it appears that .show() was replaced with .open().
In the codepan you have used the version 0.28.
Here is the example with the latest version.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Auth.X</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css">
</head>
<body>
<h1>How can I use several dialogs on the same website?</h1>
<h2>https://material.io/components/web/catalog/dialogs/</h2>
<!-- Trigger Dialogs -->
<button id="dialog-login">Open Login Dialog</button><br><br>
<button id="dialog-delivery">Open Delivery Dialog</button>
<!-- Dialogs: Login -->
<aside id="mdc-dialog-login"
class="mdc-dialog"
role="alertdialog"
aria-labelledby="mdc-dialog-login-label"
aria-describedby="mdc-dialog-login-description">
<div class="mdc-dialog__surface">
<header class="mdc-dialog__header">
<h2 id="mdc-dialog-login-label" class="mdc-dialog__header__title">
Login
</h2>
</header>
<section id="mdc-dialog-login-description" class="mdc-dialog__body">
[LOGIN FORM]
</section>
<footer class="mdc-dialog__footer">
<button type="button" class="mdc-button mdc-dialog__footer__button--cancel">Close</button>
<button type="button" class="mdc-button mdc-button--raised mdc-dialog__footer__button mdc-dialog__footer__button--accept">RegisteR</button>
</footer>
</div>
<div class="mdc-dialog__backdrop"></div>
</aside>
<!-- Dialogs: Delivery -->
<aside id="mdc-dialog-delivery-condition"
class="mdc-dialog js--mdc-delivery-condition"
role="alertdialog"
aria-labelledby="mdc-delivery-condition-label"
aria-describedby="mdc-delivery-condition-description">
<div class="mdc-dialog__surface">
<header class="mdc-dialog__header">
<h2 id="mdc-delivery-condition-label" class="mdc-dialog__header__title">
[Delivery]
</h2>
</header>
<section id="mdc-delivery-condition-description" class="mdc-dialog__body">
[TEXT]
</section>
<footer class="mdc-dialog__footer">
<button type="button" class="mdc-button mdc-dialog__footer__button--cancel">Close</button>
</footer>
</div>
<div class="mdc-dialog__backdrop"></div>
</aside>
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<script>
// Find all the dialogs on the page
const dialogLoginEle = document.getElementById('mdc-dialog-login');
const dialogLogin = new mdc.dialog.MDCDialog(dialogLoginEle);
dialogLogin.listen('MDCDialog:accept', function() {
console.log('accepted login');
});
dialogLogin.listen('MDCDialog:cancel', function() {
console.log('canceled login');
});
const dialogDeliveryEle = document.getElementById('mdc-dialog-delivery-condition');
const dialogDelivery = new mdc.dialog.MDCDialog(dialogDeliveryEle);
dialogDelivery.listen('MDCDialog:accept', function() {
console.log('accepted delivery');
});
dialogDelivery.listen('MDCDialog:cancel', function() {
console.log('canceled delivery');
});
document.querySelector('#dialog-login').addEventListener('click', function (evt) {
dialogLogin.open();
});
document.querySelector('#dialog-delivery').addEventListener('click', function (evt) {
dialogDelivery.open();
});
</script>
</body>

angular js Bootstrap not working with multiple rows and columns

I am making a basic blackjack game with angularjs and using bootstrap for the layout however I cannot seem to make it work.
What I want is a heading across the top, the content of the game in the middle and left and a list of current players on the right but isn't everything is running down the page.
My code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blackjack</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="./angular.js"></script>
<script src="./angular-animate.js"></script>
<script src="./angular-touch.js"></script>
<script src="./ui-bootstrap.js"></script>
<script src="./app.js"></script>
</head>
<body ng-app="myApp">
<div class="container-fluid" ng-controller="main">
<div class = "row">
<div class="col-sm-12">
<h1>Black Jack</h1>
</div>
</div>
<div class="row">
<div class = "col-sm-10">
<div ng-include="'play.html'" my-replace>
</div>
<div ng-include="'next.html'" my-replace>
</div>
<div ng-include="'start.html'" my-replace> </div>
</div>
<div class="col-sm-2">
<ul class = "row">
<li class="col-sm-12">
<h2>Players</h2>
</li>
<li class = "col-sm-12" ng-repeat="player in players">
<span>{{player.name}}: <button ng-if="!started" ng-click='removePlayer(player)'>Remove</button></span>
</li>
</ul>
</div>
</div>
</div>
<!--
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"> </script>
<script>
div = $("div");
(function add(div){
div.each(function(i, val){
this.innerHTML=this.nodeName+" open "+this.className+" "+this.innerHTML+" "+this . nodeName+" close"
add($(this).children());
})})(div);
</script>
-->
</body>
</html>
The my-replace directive strips away the wrapping div of the ng-includes once their content loads.
The js code at the bottom is a quick debugger so I can see how the html was being interpreted as firebug light doesn't work with angularjs.
I've tried with multiple versions of bootstrap too
Why isn't the bootstrap working?

Fitting images all on the same row in grid

I'm using angularjs to output the bicycles in same row using ng-repeat.
I can't seem to get left arrow stay on the same row no matter how I mess with the col-3-md/col-4-md or whatever I set it too. It currently looks like the image attached.
How can It get it all on one line. I'm trying to build a carousel to cycle through the images.
index.html
<!DOCTYPE html>
<html ng-app='formApp'>
<head>
<title>Bicycle App</title>
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link href="app.css" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="container">
<div class='row'>
<div class='col-md-12'>
<i class="fa fa-bicycle" aria-hidden="true"><span> {{"Bike Shop"}}</span></i>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<!-- end class not needed -->
<div class="chooseTitle">
Choose Your Bicycle
</div>
</div>
</div>
<!-- you missed md from offset, end class not needed -->
<div class="products" ng-controller="BikeController">
<div class="row">
<div class="leftArrow"><img ng-src="images/leftarrow.png"></div>
<div class="col-md-3" ng-repeat="product in products | limitTo:-4">
{{product.manufacturer}}
<img id="bikePic" ng-src="{{product.image}}">
</div>
</div>
</div><!--End controller-->
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="app.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bikeimageslider.js"></script>
</body>
</html>
app.js
var app = angular.module('formApp', []);
app.controller('BikeController',['$scope', function($scope){
$scope.products = [
{
manufacturer: "Trek",
image: 'images/bike1.jpg'
},
{
manufacturer: "Mongoose",
image: 'images/bike2.jpg'
},
{
manufacturer: "Portlandia",
image: 'images/bike3.jpg'
},
{
manufacturer: "Giant",
image: 'images/bike4.jpg'
},
{
manufacturer: "Framed",
image: 'images/bike5.jpg'
}
];
this.form = {};
this.addForm = function(product){
};
}]);

Basic Javascript doesn't display well (stack Mean)

It will be a very basic question about a problem I encountered. Nothing is specially hard in the work I intend to do, but I really don't see why it isn't working, as my code is almost the same as some examples in AngularJS documentation.
So here it is :
I'm trying to create a basic website to entertain myself on developping with Mean Stack).
I made a mere index.html page :
<!DOCTYPE hmtl>
<html class="ng-scope" ng-app="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>PreBoot</title>
<!-- Bootstrap import -->
<link href="./bootstrap.min.css" rel="stylesheet">
<!-- just a little CSS -->
<style>
body {
padding-top: 70px;
/* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
</style>
</head>
<body ng-app="preBoot">
<div id='main'>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data- toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">PreBoot</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h1> PreBoot </h1>
<p class="lead">zqesiediuhzsbadehzdebshobsezd</p>
<form ng-submit="post()" ng-controller="mainController">
<input required type="text" placeholder="Your name" ng-model="newPost.created_by"/>
<textarea required maxLength="200" rows="3" placeholder="Say something" ng-model="newPost.text"></textarea>
<input class="button" type="submit" value="Preboot that!"/>
</form>
<div id="post-stream">
<!-- INTERESTING PART !!!!!!!! -->
<h4> PreBoot Feed</h4>
<div class='post' ng-repeat="post in posts" ng-class-odd="'odd'" ng-class-even="'even'">
<p> {{post.text}} </p>
</div>
</div>
<!-- END OF IT !!!!! -->
<!-- <ul class="list-unstyled">
<li>Bootstrap v3.3.6</li>
<li>jQuery v1.11.1</li>
</ul> -->
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</div>
<!-- JScript imports -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script type="text/javascript" src="./preBoot.js"></script>
<!-- jQuery Version 1.11.1 -->
<script type="text/javascript" src="./jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script type="text/javascript" src="./bootstrap.min.js"></script>
And that's for the HTML page, the interesting part is notified. I use a serveur.js file which is following :
var app = angular.module('preBoot', []);
app.controller('mainController', function($scope){
$scope.posts = [];
$scope.newPost={created_by: '', text: '', created_at: ''};
$scope.post= function(){
$scope.newPost.created_at = Date.now();
$scope.posts.push($scope.newPost);
$scope.newPost = {created_by: '', text: '', created_at: ''};
};
});
Finally, I run everything using the serveur.js file I run with the node.js invite command.
var express = require('express');
var path = require('path');
var app = express();
app.use(express.static(__dirname));
app.get('/', function(req, res) {
res.sendFile('./index.html');
});
// Allow the error 404 selection
/* app.use(function(req, res, next){
res.setHeader('Content-Type', 'text/plain');
res.send(404, 'Page introuvable !');
}); */
app.listen(8081);
For simplicity purposes, I temporarly put every single file in the same folder, so everything (every ccs and js file is in the same folder of my html).
What I get when I run the program is :
My screenshoot
Which is pretty much what I want except when I type something, the text doesn't appear, which does not make any sense to me.
I correctly installed the npm express before in a node_module folder put in the same place than my index.html file.
Sorry to bother with that uninteresting problem, I spend hours trying to fix that problem and one more searching for any solution in the questions already asked, but everything I found didn't fix the issue.
NB : I work on Windows.
The main problem is you have defined
ng-app=""
and you have defined the controller on preBoot app
var app = angular.module('preBoot', []);
app.controller('mainController', function($scope){
Either define the controller like this
function mainController($scope){
OR define the ng-app="preBoot"
Others mistakes are
Your controller is bound to form only
<form ng-submit="post()" ng-controller="mainController">
<input required type="text" placeholder="Your name" ng-model="newPost.created_by"/>
<textarea required maxLength="200" rows="3" placeholder="Say something" ng-model="newPost.text"></textarea>
<input class="button" type="submit" value="Preboot that!"/>
</form>
This code is out of controller scope
<div class='post' ng-repeat="post in posts" ng-class-odd="'odd'" ng-class-even="'even'">
<p> {{post.text}} </p>
</div>
I did short your code and have made a jsfiddle. Working fine.
check it
https://jsfiddle.net/Lt7aP/2926/
In jsfiddle code update ng-app="preBoot" to ng-app="" you will get the error Argument 'mainController' is not a function, got undefined

How to create a simple iOS type Table View using HTML / Twitter Bootstrap / Jquery Mobile etc

I know Objective-C, but I am very new to HTML/jQuery/JS.
I want to create a Table view using these.
Can anyone assist me by showing me how to do this? Although I was able to create a static Table view using below code.
I am now stuck unsure of how to fill it with an Array.
Source code:
<!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>
For JQuery, a dynamic tableview implementation is pretty straightforward. You can replace your 'row' div with something like this:
<ul data-role="listview" id="itemslist" data-autodividers="true">
</ul>
where the last attribute is optional if you don't want sub-headers.
Then you can populate the list with javascript like this, where 'data' is a JSON array of 'item' objects:
function updateList(data, listId, target) {
// called to populate list
$(listId).empty();
$.each(data, function(i, item) {
$(listId).append('<li><h3>' + item.title + '</h3></li>');
});
$(listId).listview().listview('refresh');
}
The list can be populated on any of the page events (e.g. pageinit, pageshow, pagebeforeshow), as in the below example. Note that some page events are deprecated in JQuery Mobile 1.5, in favor of pagecontainer events.
$(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;
});
});
Here's a complete working example, with data:
<!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><h3>' + item.title + '</h3></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>

Categories