まず、日本語にするにはlist.htmlを修正します。class="item-title"のspanタグに差出人氏名を、class="item-label"のspanタグに経過時間を、そしてclass="item-desc"のpタグにメール本文を書きます。さらに、サムネイルを表示するには顔写真のファイルを用意し、それをimagesフォルダを作ってその中に入れ、class="item-thum"のdivタグ内にimgタグを挿入して写真を出します。このとき、写真の横サイズは50pxに設定しておきます。これだけです。HTMLファイルは次のようになります。
<ons-page id="list-page">
<ons-toolbar>
<div class="center">Master Details</div>
</ons-toolbar>
<ons-list>
<ons-list-item modifier="chevron" class="item">
<ons-row>
<ons-col width="60px">
<div class="item-thum">
<img src="images/arimoto.jpg" class="item-thum-photo" width="50px"></img>
</div>
</ons-col>
<ons-col>
<header>
<span class="item-title">在本 璃奈</span>
<span class="item-label">3day ago</span>
</header>
<p class="item-desc">
お仕事お疲れ様です。本社営業部の在本です。
先日(4月30日)の出張の際には、さまざまなお心遣いをいただき、
誠にありがとうございました。
深くお礼申し上げます。
</p>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item modifier="chevron" class="item">
<ons-row>
<ons-col width="60px">
<div class="item-thum">
<img src="images/inukai.jpg" class="item-thum-photo" width="50px"></img>
</div>
</ons-col>
<ons-col>
<header>
<span class="item-title">犬飼 佑汰</span>
<span class="item-label">4h</span>
</header>
<p class="item-desc">
ご多忙中にもかかわらず、
工場・店舗視察にご同行くださったことを、
心より感謝しております。
おかげさまで右往左往することなく、
仕事に邁進することができました。
今回いただいたアドバイスを生かし、
しっかりと精進していきたいと存じます。
今後ともよろしくご指導のほどお願い申し上げます。
</p>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item modifier="chevron" class="item">
<ons-row>
<ons-col width="60px">
<div class="item-thum">
<img src="images/usui.jpg" class="item-thum-photo" width="50px"></img>
</div>
</ons-col>
<ons-col>
<header>
<span class="item-title">臼井 彰生</span>
<span class="item-label">6h</span>
</header>
<p class="item-desc">
お疲れ様です。臼井彰生です。
先日お借りしました資料、5月31日にお返しに伺います。
お陰様で、大変参考になるデータが多くあり、仕事の上で有意義に生かすことが
できました。ご好意に感謝しております。
まずは御礼かたがたご連絡まで。
</p>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item modifier="chevron" class="item">
<ons-row>
<ons-col width="60px">
<div class="item-thum">
<img src="images/nakamura.jpg" class="item-thum-photo" width="50px"></img>
</div>
</ons-col>
<ons-col>
<header>
<span class="item-title">中村 綾斗</span>
<span class="item-label">2m</span>
</header>
<p class="item-desc">
お疲れ様です。営業部の中村です。
昨日は、ご馳走になりましてありがとうございました。
また、課長からたくさんの話を伺うことができ、とても勉強になりました。
正直なところ、今抱えている仕事が行き詰まっていまして、
課長にご相談したいと思ってはいましたが、なかなか言い出せずにおりました。
</p>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item modifier="chevron" class="item">
<ons-row>
<ons-col width="60px">
<div class="item-thum">
<img src="images/shimizu.jpg" class="item-thum-photo" width="50px"></img>
</div>
</ons-col>
<ons-col>
<header>
<span class="item-title">清水 伸平</span>
<span class="item-label">5day ago</span>
</header>
<p class="item-desc">
いつもお世話になっております。
清水伸平です。
昨日、ご紹介いただいた弁護士の竹田先生にお会いし、お話を伺ってきました。
先ほど、東京に戻ってきたところです。
</p>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item modifier="chevron" class="item">
<ons-row>
<ons-col width="60px">
<div class="item-thum">
<img src="images/tanaka.jpg" class="item-thum-photo" width="50px"></img>
</div>
</ons-col>
<ons-col>
<header>
<span class="item-title">田中 昌昭</span>
<span class="item-label">1week ago</span>
</header>
<p class="item-desc">
いつもお世話になっております。
株式会社川崎システムズ ヘルプデスクです。
平素は弊社のサービスをご利用いただきまして、誠にありがとうございます。
6月1日より、レセコンORCAにスマホでアクセスできる
アプリmyORCAの販売を開始いたしますのでご案内いたします。
</p>
</ons-col>
</ons-row>
</ons-list-item>
</ons-list>
</ons-page>
とても長いですね。もっと簡略化したいところです。また、このHTMLではメールの数は6件と固定ですが、実用的なものにしようとすればメールの数がいくらあっても表示できるようにしたいところです。そこで、javascriptを使って任意の件数のメールを表示できるようにしてみましょう。そのために、まずメールデータを独立させます。メールデータを次のようにjavascriptオブジェクト形式で表現します。
var listData = [
{
"title": "在本 璃奈",
"label": "3day ago",
"desc": "お仕事お疲れ様です。本社営業部の在本です。先日(4月30日)の出張の際には、さまざまなお心遣いをいただき、誠にありがとうございました。深くお礼申し上げます。",
"photo": "images/arimoto.jpg"
},
{
"title": "犬飼 佑汰",
"label": "4h",
"desc": "ご多忙中にもかかわらず、工場・店舗視察にご同行くださったことを、心より感謝しております。おかげさまで右往左往することなく、仕事に邁進することができました。今回いただいたアドバイスを生かし、しっかりと精進していきたいと存じます。今後ともよろしくご指導のほどお願い申し上げます。",
"photo": "images/inukai.jpg"
},
{
"title": "臼井 彰生",
"label": "6h",
"desc": "お疲れ様です。臼井彰生です。 先日お借りしました資料、5月31日にお返しに伺います。 お陰様で、大変参考になるデータが多くあり、仕事の上で有意義に生かすことが できました。ご好意に感謝しております。 まずは御礼かたがたご連絡まで。",
"photo": "images/usui.jpg"
},
{
"title": "中村 綾斗",
"label": "2m",
"desc": "お疲れ様です。営業部の中村です。昨日は、ご馳走になりましてありがとうございました。また、課長からたくさんの話を伺うことができ、とても勉強になりました。正直なところ、今抱えている仕事が行き詰まっていまして、課長にご相談したいと思ってはいましたが、なかなか言い出せずにおりました。",
"photo": "images/nakamura.jpg"
},
{
"title": "清水 伸平",
"label": "5day ago",
"desc": "いつもお世話になっております。清水伸平です。昨日、ご紹介いただいた弁護士の竹田先生にお会いし、お話を伺ってきました。先ほど、東京に戻ってきたところです。",
"photo": "images/shimizu.jpg"
},
{
"title": "田中 昌昭",
"label": "1week ago",
"desc": "いつもお世話になっております。株式会社川崎システムズ ヘルプデスクです。平素は弊社のサービスをご利用いただきまして、誠にありがとうございます。6月1日より、レセコンORCAにスマホでアクセスできるアプリmyORCAの販売を開始いたしますのでご案内いたします。",
"photo": "images/tanaka.jpg"
}
];
javascriptオブジェクト形式と言うのは、(属性:属性値)のペアを必要なだけ{と}で囲んだものです。上の例では、title, label, desc, photoという4つの属性があり、それが6人分配列として定義されています（配列は[と]でカンマ区切りの要素を羅列します）。このようにすると、例えばdataList[0].titleの値は"在本 璃奈"となります。これを使ってlist.html内のons-listタグの中身を作成する処理が次のようになります。この処理はapp.jsのlist-pageが表示されるタイミングで実行されるようにしてあります。
(function(){
'use strict';
var currentItem = {};
$(document).on('pageinit', '#detail-page', function() {
$('.item-title', this).text(currentItem.title);
$('.item-desc', this).text(currentItem.desc);
$('.item-label', this).text(currentItem.label);
$('.item-thum-photo', this).attr('src', currentItem.photo);
$('.add-note-action-item', this).click(function () {
alert('dummy message');
});
});
$(document).on('pageinit', '#list-page', function() {
var html = '';
$.each(listData, function(i, item) {
html += '';
html += '';
html += ' ';
html += '';
html += '
';
html += '';
html += ' ';
html += '';
html += '';
html += '' + item.title + '';
html += '' + item.label + '';
html += ' ';
html += '' + item.desc + '
';
html += ' ';
html += ' ';
html += ' ';
}
);
$("#item-list").html(html);
var content = $("#item-list").get(0);
ons.compile(content);
$('.item', this).on('click', function() {
currentItem = {
title : $('.item-title', this).text(),
desc : $('.item-desc', this).text(),
label : $('.item-label', this).text(),
photo : $('.item-thum-photo', this).attr('src')
};
app.navi.pushPage('detail.html');
});
});
})();
0 件のコメント:
コメントを投稿