index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/patientList.js"></script>
<script src="js/visitData.js"></script>
<script src="js/app.js"></script>
<script>
ons.bootstrap()
</script>
<style>
.item, .detail-item {
padding: 10px;
line-height: 1;
}
.item-thum {
background-color: #ccc;
width: 50px;
height: 50px;
border-radius: 4px;
}
.item-id, .detail-item-id {
font-size: 15px;
font-weight: 500;
}
.item-name, .item-birthdate, .item-address, .detail-item-dept, .detail-item-diseaseName {
font-size: 14px;
color: #666;
line-height: 1.3;
margin: 4px 0 0 0;
padding: 0 30px 0 0;
}
.item-gender {
font-size: 12px;
color: #999;
float: right;
}
</style>
</head>
<body>
<ons-navigator page="list.html" var="app.navi"></ons-navigator>
</body>
</html>
list.html
<ons-page id="list-page">
<ons-toolbar>
<div class="center">Master Details</div>
</ons-toolbar>
<ons-list id="item-list">
</ons-list>
</ons-page>
detail.html
<ons-page id="detail-page">
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">Details</div>
</ons-toolbar>
<ons-list modifier="inset" style="margin-top: 10px">
<ons-list-item class="item">
<ons-row>
<ons-col width="60px">
<div class="item-thum">
<img src="" class="item-thum-photo" width="50px"></img>
</div>
</ons-col>
<ons-col>
<header>
<span class="item-id">id</span>
<span class="item-gender">gender</span>
</header>
<p class="item-name">name</p>
<p class="item-birthdate">birthdate</p>
<p class="item-address">address</p>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item modifier="chevron" id="add-note-action" class="add-note-action-item">
<ons-icon icon="ion-chatboxes" fixed-width="true" style="color: #ccc"></ons-icon>
Add a note
</ons-list-item>
</ons-list>
<ons-list id="detail-item-list" style="margin-top: 10px">
</ons-list>
</ons-page>
app.js
(function(){
'use strict';
var currentItem = {};
$(document).on('pageinit', '#detail-page', function() {
var html = '';
$.each(visitData[currentItem.id], function(i, item) {
html += '<ons-list-item class="detail-item">';
html += '<header>';
html += '<span class="detail-item-date">' + item.date + '</span>';
html += '</header>';
html += '<p class="detail-item-dept">' + item.dept + '</p>';
html += '<p class="detail-item-diseaseName">' + item.diseaseName + '</p>';
html += '</ons-list-item>';
}
);
$("#detail-item-list").html(html);
var content = $("#detail-item-list").get(0);
ons.compile(content);
$('.item-id', this).text(currentItem.id);
$('.item-gender', this).text(currentItem.gender);
$('.item-name', this).text(currentItem.name);
$('.item-birthdate', this).text(currentItem.birthdate);
$('.item-address', this).text(currentItem.address);
$('.add-note-action-item', this).click(function () {
alert('dummy message');
});
});
$(document).on('pageinit', '#list-page', function() {
var html = '';
$.each(patientList, function(i, item) {
html += '<ons-list-item modifier="chevron" class="item">';
html += '<ons-row>';
html += '<ons-col width="60px"> ';
html += '<div class="item-thum">';
html += '</div>';
html += '</ons-col>';
html += '<ons-col>';
html += '<header>';
html += '<span class="item-id">' + item.id + '</span>';
html += '<span class="item-gender">' + item.gender + '</span>';
html += '</header>';
html += '<p class="item-name">' + item.name + '</p>';
html += '<p class="item-birthdate">' + item.birthdate + '</p>';
html += '<p class="item-address">' + item.address + '</p>';
html += '</ons-col>';
html += '</ons-row> ';
html += '</ons-list-item>';
}
);
$("#item-list").html(html);
var content = $("#item-list").get(0);
ons.compile(content);
$('.item', this).on('click', function() {
currentItem = {
id : $('.item-id', this).text(),
gender : $('.item-gender', this).text(),
name : $('.item-name', this).text(),
birthdate : $('.item-birthdate', this).text(),
address : $('.item-address', this).text()
};
app.navi.pushPage('detail.html');
});
});
})();
patientList.js
var patientList = [
{
"id": "A0001",
"name": "在本 璃奈",
"gender": "female",
"birthdate": "1996/4/1",
"address": "岡山県倉敷市山田町１丁目－２－３"
},
{
"id": "A0002",
"name": "清水 伸平",
"gender": "male",
"birthdate": "1995/5/10",
"address": "岡山県岡山市苦米地３丁目－５－６"
},
{
"id": "A0003",
"name": "田中 昌昭",
"gender": "male",
"birthdate": "1958/7/6",
"address": "岡山県瀬戸内市大岡５丁目－９－８"
}
];
visitData.js
var visitData = {
"A0001": [
{
"date": "2016/5/20",
"dept": "内科",
"diseaseName": "気管支炎"
},
{
"date": "2014/1/29",
"dept": "外科",
"diseaseName": "大腿骨骨折"
},
{
"date": "2015/8/6",
"dept": "耳鼻科",
"diseaseName": "中耳炎"
}
],
"A0002": [
{
"date": "2016/3/19",
"dept": "内科",
"diseaseName": "インフルエンザ"
},
{
"date": "2015/2/10",
"dept": "外科",
"diseaseName": "虫垂炎"
}
],
"A0003": [
{
"date": "2016/4/8",
"dept": "眼科",
"diseaseName": "白内障"
},
{
"date": "2013/2/5",
"dept": "内科",
"diseaseName": "心筋梗塞"
},
{
"date": "2011/11/4",
"dept": "皮膚科",
"diseaseName": "アトピー性皮膚炎"
},
{
"date": "2014/12/15",
"dept": "精神科",
"diseaseName": "気分障害"
}
]
};
0 件のコメント:
コメントを投稿