Мне нужна функция, которая позволяет пользователям делать заметки, используя некоторые заметки.Скрипт, который я использовал в своем файле .cshtml:
<script>
var initStickies = function initStickies() {
$("<div />", {
text: "+",
"class": "add-sticky",
click: function () { createSticky(); }
}).prependTo(document.body);
$(window).unload(function () {
$("div.sticky").each(function (i, el) {
$(el).focusout();
});
});
initStickies = null;
},
openStickies = function openStickies() {
initStickies && initStickies();
for (var i = 0; i < localStorage.length; i++) {
createSticky(JSON.parse(localStorage.getItem(localStorage.key(i))));
}
},
createSticky = function createSticky(data) {
data = data || { id: +new Date(), top: "40px", left: "40px", text: "Note Here" }
return $("<div />", {
"class": "sticky",
'id': data.id
})
.prepend($("<div />", { "class": "sticky-header" })
.append($("<span />", {
"class": "status-sticky",
click: saveSticky
}))
.append($("<span />", {
"class": "close-sticky",
text: "trash",
click: function () { deleteSticky($(this).parents(".sticky").attr("id")); }
}))
)
.append($("<div />", {
html: data.text,
contentEditable: true,
"class": "sticky-content",
keypress: markUnsaved
}))
.draggable({
handle: "div.sticky-header",
stack: ".sticky",
start: markUnsaved,
stop: saveSticky
})
.css({
position: "absolute",
"top": data.top,
"left": data.left
})
.focusout(saveSticky)
.appendTo(document.body);
},
deleteSticky = function deleteSticky(id) {
localStorage.removeItem("sticky-" + id);
$("#" + id).fadeOut(200, function () { $(this).remove(); });
},
saveSticky = function saveSticky(id) {
var that = $(this), sticky = (that.hasClass("sticky-status") || that.hasClass("sticky-content")) ? that.parents('div.sticky') : that,
obj = {
id: sticky.attr("id"),
top: sticky.css("top"),
left: sticky.css("left"),
text: sticky.children(".sticky-content").html()
}
localStorage.setItem("sticky-" + obj.id, JSON.stringify(obj));
sticky.find(".sticky-status").text("saved");
},
markUnsaved = function markUnsaved() {
var that = $(this), sticky = that.hasClass("sticky-content") ? that.parents("div.sticky") : that;
sticky.find(".sticky-status").text("unsaved");
};
var STICKIES = (function () {
var initStickies = function () { },
openStickies = function () { },
createSticky = function (data) { },
deleteSticky = function (id) { },
saveSticky = function () { },
markUnsaved = function () { };
return {
open: openStickies,
init: initStickies
};
}());
STICKIES.open();
</script>
и div, где я запускаю заметки в моем файле .cshtml:
<div class="sticky ui-draggable" id="1281194825332" style="position: absolute; top: 40px; left: 40px;">
<div class="sticky-header">
<span class="sticky-status"></span>
<span class="close-sticky">trash</span>
</div>
<div contenteditable="true" class="sticky-content">
Note Here
</div>
Это кодовая ручка с HTML, CSS и скриптами, которые я использую.https://codepen.io/matei-coman/pen/RdMedX
Любая помощь будет принята с благодарностью.
Учебник по заметкам: https://code.tutsplus.com/tutorials/building-persistent-sticky-notes-with-local-storage--net-13727