How to deploy checkboxes in your own memo listing application

I am developing a notepad app at Monaca.

I am building on a notepad template like the one below, but I would like to place a check box at the beginning of each item in the notepad list that means "confirmed".

If you put input type="checkbox" in front of ul on the TOP Page and surround ul or below with label, only one checklist will appear in ul.

I look forward to your kind cooperation.

~~index.html~~

<!DOCTYPE HTML>
<html>
<head>
    <metacharset="utf-8">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scale=no">
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <!--TOP Page-->
    <div data-role="page"id="TopPage">
        <header data-role="header" data-position="fixed" data-theme="c">
            <h1>Notepad</h1>
            <a href="#AddPage" data-icon="plus" class="ui-btn-right">Add Notes</a>
        </header>
        <section data-role="content">
            <ulid="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" data-theme="c">
            <a data-role="button" data-rel="back" data-icon="back">Back</a>
            <h1>New Notes</h1>
        </header>
        <section data-role="content">
            <label for="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" data-theme="c">
            <a data-role="button" data-rel="back" data-icon="back">Back</a>
            <a href="#EditPage" data-theme="b" class="ui-btn-right" id="EditBtn">Edit</a>
            <h1>/h1>
        </header>
        <section data-role="content">
            <p>/p>
        </section>
    </div>

    <!--Edit Memo Page-->
    <div data-role="page"id="EditPage">
        <header data-role="header" data-position="fixed">
            <a data-role="button" data-rel="back" data-icon="back">Back</a>
            <h1>Edit Notes</h1>
        </header> 
        <section data-role="context">
            <input id="edit" type="text">

            <button onclick="saveEditedMemo()">Save Overwrite</button>
        </section>
    </div>

<script src="components/loader.js"></script>
<script src="js/memo.js"></script>
<script src="js/app.js"></script>
<script src="js/cssua.min.js"></script>
</body>
</html>

~~app.js~~

/// Save memo and return to top page
function onSaveBtn(){
    vartext=$("#Memo").val();
    if(text!='){
        // Save to local storage
        addMemo(text);
        // Clear form
        $("#Memo").val("";
        // Initialize top page
        initTopPage();
    }
    $.mobile.changePage("#TopPage", {reverse:true});
}

///// Initialize top page
function initTopPage(){
    $("#TopListView").empty();

    var list = getMemoList();
    for (vari in list) {
        varmemo=list[i];
        vard = new Date(memo.time);
        vardate=d.getFullYear()+"/"+(d.getMonth()+1)+"/"+d.getDate();

        $li=$("<li><a href='#'class='show'><h3></h3><p>/a>a href='#'class='delete'>>><Delete;>>>")
        $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 Notes </li>");
        $("#TopListView").prepend($li);
    }
    $("#TopListView").listview("refresh");// Call refresh after manipulating list
}

///// Move to detail page
function onShowLink() {
    var$li=$(this).parent();
    selectedMemoId=$(this).parents('li').data("id");    
    varmemoTitle=$li.find("h3").text();
    varmemoHtml=$li.find("p").html().replace(/\n/g, "<br>");

    $("#ShowPageh1").text(memoTitle);
    $("#ShowPagep").html(memoHtml);
    $.mobile.changePage("#ShowPage");
}

///// Delete memo
function onDeleteLink(){
    if(!confirm("Do you want to delete this note?")) {
      return;
    }
    var$li=$(this).parent();
    variable = $li.data("id");
    deleteMemo(id);

    initTopPage();

    // Return to top
    $.mobile.changePage("#TopPage", {reverse:true});
}

///// Called when app launch
function onReady() {
    initTopPage();
    $("#SaveBtn").click(onSaveBtn);
    $("#TopListView").on("click", "a.show", onShowLink);
    $("#TopListView").on("click", "a.delete", onDeleteLink);
}

///// Edit memo
function saveEditedMemo(){

    variableText=$("#EditPage input#edit") .val();

    if(editedText!='){

        deleteMemo(selectedMemoId);

        addMemo(editedText);
        // Clear form
        $("#Memo").val("";
        // Initialize top page
        initTopPage();
    }
    $.mobile.changePage("#TopPage", {reverse:true});
}

$(onReady); // on DOMContentLoaded

~~memo.js~~

<!--language:lang-javascript -->
///// Return list of memos
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.');
        through;
    }
}

///// 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 (vari in list) {
        if(list[i].id==id){
            list.splice(i,1);
            break;// Quit for loop when found
        }
    }
    saveMemoList(list);
}

javascript monaca html

2022-09-30 17:41

1 Answers

app.js is creating a memo list for TopListView, so if you want to add more processing, this is it.
However, if you simply add input, it will look ugly, so you may need to look into that.

///// Initialize top page
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();

        before change /
        // $li = $("<li><a href='#' class='show'><h3></h3><p></p></a><a href='#' class='delete'>Delete</a></li>");

        // changed     could * and a tentative display
        $li = $("<li><input type='checkbox' /><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 Notes </li>");
        $("#TopListView").prepend($li);
    }
    $("#TopListView").listview("refresh");// Call refresh after manipulating list
}

--------------------

to comment

The memo list itself is no longer displayed

I think there is probably an error on the way.
I was able to make it bigger with the style specification.
Do you think the value of style is enclosed by "?

It seems that there are many other methods besides specifying style depending on the browser, so I will paste them for your reference.
How to increase the check box or radio button

Enable once-in-a-check to be saved afterwards

The implementation in the answer did not set the default check box value, so
There is no check on the initial display.
$li.find("p").text(memo.text) should reflect the check state to input.

I think you can modify memo.js to save the values.
Also, you can refer to this site for the reflection of the check status.

--------------------

to add a question

I'm sorry to intrude, but I think it's better to start by reading all about where and what the sample application is doing (processing when displaying a list, pressing a button, etc.).
*The size of the sample is not that difficult, so it is easy to start, and I think it will be useful in the future.

A rough description of the points is

getMemoList:getting stored information from localStorage
addMemo:save new notes
saveMemoList:save data in localStorage

It is shown that
addMemo has the data to save, but this check state save occurs in a different trigger than adding new notes, so you need to add a new function.

addMemo: Press
Save
on the Add Memo screen Additional function: When changing the check state on the list screen?

Also, please try to do it through trial and error.

2022-09-30 17:41

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656