こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

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);
}

投稿日時 - 2014-05-15 19:39:57

QNo.8596665

すぐに回答ほしいです

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.3

No.2 の回答に追記です

> 閲覧から編集を押すとWindowsのメモ帳みたいに書き込んだ内容も表示され...

関数 onShowLink は、閲覧ページに内容を表示する処理ですが、
編集ページにも表示させる様に処理を追加しましょう
これで閲覧から編集にページが移っても内容はそのまま表示されます

$("#UpdateId").val(id);
$("#UpdateText").val(text);

id/text の中身ですが、推測するにこのような感じでしょうか

var id = $li.data("id");
var text = $li.find("p").text();

投稿日時 - 2014-05-19 11:59:14

ANo.2

改造点を簡単に

閲覧ページにリンク追加
<a href="#UpdatePage">編集</a>

編集ページを新設
<div data-role="page" id="UpdatePage">
<input type=hidden id="UpdateId">
<textarea id="UpdateText"></textarea>
<a id="UpdateBtn">Update</a>
</div>

関数 onShowLink に処理追加
$("#UpdateId").val(id);
$("#UpdateText").val(text);

関数 onUpdateBtn を新設
function onUpdateBtn() {
var id = $("#UpdateId").val();
var text = $("#UpdateText").val();
deleteMemo(id);
addMemo(text); // TODO updateMemo(id,text) に置き換える
initTopPage();
$.mobile.changePage("#TopPage", { reverse: true });
}

関数 onReady に処理追加
$("#UpdateBtn").click(onUpdateBtn);

投稿日時 - 2014-05-16 12:03:14

補足

詳しくありがとうございます!!
組み入れたのですが動きませんでした、、、。

どこに組み入れればよいのでしょうか?

投稿日時 - 2014-05-16 12:52:29

お礼

indexとappに入れたら動きました!!
ですが理想としては新しいテキストエリアではなく書いた内容も表示してそこから編集できるようにしたいです
例えるなら
閲覧から編集を押すとWindowsのメモ帳みたいに書き込んだ内容も表示され誤字脱字を訂正できるような感じです

投稿日時 - 2014-05-16 15:54:10

ANo.1

おはようございます。
まったく参考にならないでしょうけれど、こんぱくとにじぶんなりにかいてみました。
さくじょする機能がないことに、いまきづきました。が投稿します

<!DOCTYPE html>
<meta charset="utf-8">
<title></title>
<style>
body > section {
 display : none;
}

#ViewPage > div {
 border: 2px green dotted;
 margin-top : 1em;
 padding : 1ex;
}

#LIST li {
 text-overflow: ellipsis;
}
</style>

<body>

<section id="TopPage">
 <header>
  <h1>TextMemo</h1>
 </header>
 <ol id="List">
 </ol>
</section>


<section id="EditPage">
 <header>
  <h1>Edit Memo</h1>
  <a href="#TopPage">Top</a>
  <a href="#Save">Save</a>
  <a href="#ViewPage">View</a>
 </header>

 <p>
  Memo:
 <p>
  <textarea cols="60" rows="10" id="Text"></textarea>
</section>


<section id="ViewPage">
 <header>
  <h1>View Memo</h1>
  <a href="#TopPage">Top</a>
  <a href="#Save">Save</a>
  <a href="#EditPage">Edit</a>
 </header>
 <div id="Content"></div>
</section>

<script>
function disp (s) { s.style.display = this == s ? 'block': 'none' }
function remove (e) { while (e.hasChildNodes ()) e.removeChild (e.firstChild) }

function createLI (t, h) {
 var d = document;
 var a = d.createElement ('a');
 var li = d.createElement ('li');
 
 a.href = h;
 return li.appendChild (a).appendChild (d.createTextNode (t)), li;
}


function hashCheck (h) {
 var p, n;
 
 if (p = /^(#ViewPage)-(\d+)$/.exec (h))
  h = p[1], NO = Number (p[2]);
 
 switch (h) {
 case '' :
 case '#TopPage' :
  remove (LIST);
  for (var i = 0, I = DATA.length; i < I; i++)
   LIST.appendChild (createLI (DATA[i].substring (0, 20), '#ViewPage-' + i));
  LIST.appendChild (createLI ('[New]', '#NewPage'));
  SECTION.forEach (disp, TOP);
  break;
 
 case '#NewPage' :
  NO = DATA.length;
 case '#EditPage' :
  TEXT.value = DATA[NO] || '';
  SECTION.forEach (disp, EDIT);
  break;

 case '#ViewPage' :
  CONTENT.innerHTML = DATA[NO];
  SECTION.forEach (disp, VIEW);
  break;

 case '#Save' :
  DATA[NO] = TEXT.value;
  localStorage.setItem ('TextData',JSON.stringify (DATA));
  alert ('Save OK!');
  break;
  
 default :
  return false;
 }
 
 return true;
}


function listener (event) {
 var e = event.target;
 if ('href' in e)
  if (hashCheck (e.getAttribute ('href')))
   event.preventDefault();
}


var DATA = JSON.parse (localStorage.getItem ('TextData')) || [];
var LIST = document.querySelector ('#List');
var TEXT = document.querySelector ('#Text');
var CONTENT = document.querySelector ('#Content');
var TOP = document.querySelector ('#TopPage');
var EDIT = document.querySelector ('#EditPage');
var VIEW = document.querySelector ('#ViewPage');
var SECTION = [ TOP, EDIT, VIEW ];
var NO;


hashCheck (location.hash);
document.addEventListener ('click', listener, false);
</script>

</body>
</html>

投稿日時 - 2014-05-16 04:32:21

補足

ご回答ありがとうございます!
現在Monacaでこのアプリを作っていましてやはりスマホで手軽に閲覧、編集ができるということは必須だと思います
私のコードの場合だとどこにどういった命令を入れると編集できますか?
使っていただくとお分かりになると思いますが編集するときはメモを追加するときにテキストを書く画面にしたいです

投稿日時 - 2014-05-16 07:13:00

あなたにオススメの質問