每天一個jquery插件-做一個便簽
做一個便簽
嗯，隨便逛插件的時候試著做一下，復習了一下sessionStorage這類快取的使用，然后后面打算研究一下IndexDB的使用，這個算是入門吧
效果如下
代碼部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>做一個便簽</title>
<script src="js/jquery-3.4.1.min.js"></script>
<style>
*{
margin: 0px;
padding: 0px;
user-select: none;
}
#div{
position: fixed;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
border: 1px solid lightgray;
border-radius: 5px;
overflow: auto;
}
.item{
background-color: rgb(241,241,128);
margin: 10px;
border: 1px solid lightgray;
width: 200px;
height: 300px;
float:left;
position: relative;
border-radius: 5px;
overflow: hidden;
}
.head{
position: absolute;
width: 100%;
top: 0;
height: 30px;
display: flex;
justify-content: flex-start;
align-items: center;
text-indent: 20px;
font-size: 12px;
background-color: rgb(228,190,50);
}
.tarea{
position: absolute;
top: 30px;
width: 100%;
bottom: 30px;
overflow: hidden;
outline: none;
resize: none;
border: none;
text-indent: 12px;
font-size: 12px;
background-color: transparent;
}
.add{
position: absolute;
border:2px solid white;
bottom: 0px;
background-color: rgb(228,190,50);
height: 30px;
display: flex;
justify-content: center;
align-items: center;
width: 50%;
left: 0;
cursor: pointer;
}
.delete{
position: absolute;
border:2px solid white;
bottom: 0px;
background-color: rgb(228,190,50);
height: 30px;
display: flex;
justify-content: center;
align-items: center;
width: 50%;
left: 50%;
cursor: pointer;
}
.add:active,.delete:active{
opacity: 0.8;
}
</style>
</head>
<body>
<div id="div">
<div class="item" data-index="0">
<div class="head">
便簽
</div>
<textarea class="tarea">寫點什么……</textarea>
<div class="add">新增</div>
<div class="delete">洗掉</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
var str =sessionStorage["data"];
var arrs = JSON.parse(str);
if(arrs&&arrs.length>0){
$(".item").remove();
arrs.forEach(item=>{
var $dom = $('<div class="item" data-index="'+item.index+'"><div class="head">便簽</div><textarea class="tarea">'+item.txt+'</textarea><div class="add">新增</div><div class="delete">洗掉</div></div>');
$dom.appendTo($("#div"))
})
}
})
$(function(){
$(document).on('click','.add',function(){
var $par = $(this).parent().clone();
var index = new Date().getTime();
$par.attr("data-index",index);
$par.appendTo($("#div"));
})
$(document).on('click','.delete',function(){
$(this).parent().remove();
})
$(document).on('input porpertychange','.tarea',function(){
//這里監控所有資料，然后給快取成一個json檔案存入快取之中；
var arr = $(".item").arr();
var arrs = [];
arr.forEach(item=>{
var temp = {
index:item.attr("data-index"),
txt:item.find(".tarea").val()
}
arrs.push(temp);
})
var str = JSON.stringify(arrs);
sessionStorage["data"] = str;
})
})
$.prototype.arr = function(){
var that = this;
var arr = [];
for(var i = 0;i<that.length;i++){
var $dom = $(that[i]);
arr.push($dom);
}
return arr;
}
</script>
思路解釋
- 就是把資料處理成json資料然后存入快取中，要用的時候拿到手再重新變成物件就行了
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/276643.html
標籤：其他
上一篇：Javascript代碼優化大全