JavaScriptのメモ帳アプリ編集について
Monacaでメモ帳を作りました
このコードだと追加ボタンを押してテキストエリアが現れテキストを書き込み保存してTopPageにリスト化できるようになっています。またそのリストを押すとメモが閲覧できます
ですが理想としては閲覧ページのヘッダー部分に「編集」というボタンをつけて押すとメモが編集できるようにしたいです
どうすればできるのでしょうか？
いろいろ調べたのですが応用できなくて......。
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="plugins/plugin-loader.js"></script>
<link rel="stylesheet" href="plugins/plugin-loader.css">
<script src="js/memo.js"></script>
<script src="js/app.js"></script>
<script>
monaca.viewport({width: 320});
</script>
</head>
<body>
<!-- TOP Page -->
<div data-role="page" id="TopPage">
<header data-role="header" data-position="fixed">
<h1>TextMemo</h1>
<a href="#AddPage" data-icon="plus" class="ui-btn-right">追加</a>
</header>
<section data-role="content">
<ul id="TopListView" data-role="listview"
data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" data-split-icon="delete">
</ul>
</section>
</div>
<!-- Add Memo Page -->
<div data-role="page" id="AddPage">
<header data-role="header" data-position="fixed">
<a data-role="button" data-rel="back" data-icon="back">Back</a>
<h1>Add Memo</h1>
</header>
<section data-role="content">
<label for="Memo">Memo:</label>
<textarea id="Memo"></textarea>
<a data-role="button" data-icon="check" id="SaveBtn">Save</a>
</section>
</div>
<!-- Detail Page -->
<div data-role="page" id="ShowPage">
<header data-role="header" data-position="fixed">
<a data-role="button" data-rel="back" data-icon="back">Back</a>
<h1></h1>
</header>
<section data-role="content">
<p></p>
</section>
</div>
</body>
</html>
app.js
function onSaveBtn() {
var text = $("#Memo").val();
if (text != '') {
// Save to local storage
addMemo(text);
// Clear form
$("#Memo").val("");
// Initialize top page
initTopPage();
}
$.mobile.changePage("#TopPage", { reverse: true });
}
function initTopPage() {
$("#TopListView").empty();
var list = getMemoList();
for (var i in list) {
var memo = list[i];
var d = new Date(memo.time);
var date = d.getFullYear() + "/" + (d.getMonth() + 1) + "/" + d.getDate();
$li = $("<li><a href='#' class='show'><h3></h3><p></p></a><a href='#' class='delete'>Delete</a></li>");
$li.data("id", memo.id);
$li.find("h3").text(date);
$li.find("p").text(memo.text);
$("#TopListView").prepend($li);
}
if (list.length == 0) {
$li = $("<li>NO MEMO</li>");
$("#TopListView").prepend($li);
}
$("#TopListView").listview("refresh"); // Call refresh after manipulating list
}
function onShowLink() {
var $li = $(this).parent();
var memoTitle = $li.find("h3").text();
var memoHtml = $li.find("p").html().replace(/\n/g, "<br>");
$("#ShowPage h1").text(memoTitle);
$("#ShowPage p").html(memoHtml);
$.mobile.changePage("#ShowPage");
}
function onDeleteLink() {
if (!confirm("本当に削除しますか?")) {
return;
}
var $li = $(this).parent();
var id = $li.data("id");
deleteMemo(id);
initTopPage();
$.mobile.changePage("#TopPage", { reverse: true });
}
function onReady() {
initTopPage();
$("#SaveBtn").click(onSaveBtn);
$("#TopListView a.show").live("click", onShowLink);
$("#TopListView a.delete").live("click", onDeleteLink);
monaca.splashScreen.hide();
}
$(onReady); // on DOMContentLoaded
memo.js
///// Return list of memo
function getMemoList() {
var list = localStorage.getItem("memo_list");
if (list == null) {
return new Array();
} else {
return JSON.parse(list);
}
}
///// Save memo
function saveMemoList(list) {
try {
localStorage.setItem("memo_list", JSON.stringify(list));
} catch (e) {
alert('Error saving to storage.');
throw e;
}
}
///// Add memo
function addMemo(text) {
var list = getMemoList();
var time = new Date().getTime();
list.push({ id: time, time: time, text: text });
saveMemoList(list);
}
///// Delete specified memo
function deleteMemo(id) {
var list = getMemoList();
for (var i in list) {
if (list[i].id == id) {
list.splice(i, 1);
break; // Quit for loop when found
}
}
saveMemoList(list);
}
補足
回答ありがとうございます。 書き物といっても、作詞です。プリントアウトした「資料や作品」または「音源」をＦＡＸか郵送するのが基本という世界でしたが、「テキスト」と言われたのは初めてなので、とまどっています。しばらくぶりなので。 新規にコンタクトを取った会社で、相手は自分のことを知っていましたが、ほぼプレゼンに近いので、名刺交換して面識を持つまでは、現時点ではとりあえずダイレクトなやりとりを避けるという筋もわかります。また、そのぐらいのスタンスでとらえられている存在というのも。 単純に考えて、作成したファイルをＣＤＲにドライブして郵送物にする、と解釈していますが、間違った解釈でしょうか、何かございましたらまたアドバイスいただけると幸いです。