[TOC] # jquery 清單應用 3.0 需要實現的功能 1. 點擊查看詳情 2. 設置定時任務 3. 美化彈框 4. 美化 checkbox 5. 從垃圾筐物理刪除 # 首先還是布局... 不過我實在不想布局了 css 讓我`超受傷`... 騷年, 你還在重復造輪子嗎? 什么是重復造輪子? 比如你要造一臺汽車, 難道輪子也要自己造一個嗎? 有專門的人來造輪子, 我們直接拿來用就好了, 如果自己造輪子, 浪費時間不說, 如果你造出來的輪子, 還不圓呢? 比如這樣...   還好吧, 又不是不能跑...  關鍵是, 既浪費時間, 效果又不好, 最重要的是, **程序員都比較懶**... 今天來給大家帶來一個神奇 UI 框架 `layui`  首先我們先下載... 讓后導入到項目 在`index.html`同級目錄, 拷入`layui`文件夾  讓后在`index.html` 中引入  注意順序, `jquery.js`最先引入, 其次是`layui.js`, 因為 layui 是基于 jquery 開發的 我們自己寫的 js 放在最后, 因為我們的代碼既用到了`jquery`,又用到了`layui` 注意文檔中對`layui.js`和`layui.all.js`的說明... > 模塊化, 需要哪個, 引入哪個, 非模塊化, 全部引用, 需要直接用, 會比較占帶寬資源 然后咱們在`index.js`寫個彈框試試效果 一言不合就彈框...   看看效果...  可以彈框, 但是沒有字... hello world 不見了... 不是不見了, 是因為...  因為是白色, 所以看不見, 我們把它注釋了...   可以看到字了, 但是標題好像變黑了, 其他還好, 那么我們單獨為`h1`加一個字體顏色吧 ```css h1.myTitle { text-align: center; margin: 20px; color: #fff; } ```  這回就完美了... 接下來, 我們就可以直接寫 js 了...  # 書寫 js 不過我們需要先把原來的代碼, 加到`layui.use()`中  第一個需求是, 點擊`task-item`, 展示詳情 展示內容, 我們可以使用 layer 的`tips`....  不過首先有一個問題, 之前我們對于過長的內容, 都進行了的壓縮... 所以, 關于內容, 我們其實需要兩個屬性, `content`,`fullContent`, 所以我們還需要增加一個`fullContent`來保存所有`內容` 先修改保存的對象(記得先把之前的 layer 的彈框測試給刪掉...)   然后我們需要監聽`task-item`的點擊事件 先輸出一下 index 屬性值 > `return false;` 效果相當于打斷點...   沒有問題, 可以獲取 index, 那么下一步, 我們獲取`content`和`fullContent`...   也沒有問題... 可以監聽 onclick, 數據也有了, 接下來就可以愉快的展示了...  ```javascript //小tips layer.tips( "我是另外一個tips，只不過我長得跟之前那位稍有些不一樣。", "吸附元素選擇器", { tips: [1, "#3595CC"], // 位置和背景顏色 time: 4000 // 4s自動消失 } ); ``` 我們的代碼是這樣的... ```javascript // 監聽task-item的點擊事件 $(".task-item").on("click", function() { layui.layer.tips( aTaskList[$(this).attr("index")]["fullContent"], ".task-item[index=" + $(this).attr("index") + "]", { tips: [1, "#3595CC"], time: 4000 } ); }); ``` 看看效果...  多敲點字試試...  還行, 不過字有點小, 并且寬度有點窄  `area` 屬性, 是個數字,設置寬高, 注意加`px`, `auto`表示高度自動, 我們再試試...  這就好很多, 除了字有點小... 而且 4s 的話, 字數少的時候, 嫌時間長, 字數多的時候, 嫌時間短, 最好能自己控制... 我們把事件調長一點, 然后用`開發者工具`(F12)試著調試一下  接下來, 我么你設置 css ```css .layui-layer-tips .layui-layer-content { line-height: 28px; font-size: 18px; } ``` 看看效果...  還是沒變...  **_注意 css 的順序問題..._**  我們調一下順序, 再試一下...   夭壽啊~~~  什么情況? 說好的`就近原則`呢? 通過開發者工具, 發現我們的樣式被覆蓋了....  不是已經調整了優先級嗎? 注意覆蓋我們樣式的 css 為`layer.css`  位置是在`layui\lay\modules\layer.js` 也就是說, css 是在 layui.js 文件里, 動態加載的, 因為我們的 css 在 js 之上, 所以根據就近原則, 瓦特了... 所以還得往下調...  這兒可以嗎?  還是不行...  因為你忘了 `document.ready`.... 所以還要往下挪... 那我直接一擼到底吧....  我 TM 挪到這總行了吧...  還真行了...  實際上在這個位置... 當然這只是方案之一, 我們也可以祭出強大的`!important` 請看方案二... ```css .layui-layer-tips .layui-layer-content { line-height: 28px !important; font-size: 18px !important; } ```  依然完美... 但是, bug 不是這么輕易就甩得掉的... `bug如風, 常伴吾身...`  是一個 div...  所以, 我們需要在 css 里, 改成 inline-block ```css .layui-layer-tips .layui-layer-content { line-height: 28px !important; font-size: 18px !important; display: inline-block; } ```  沒有問題, 但是還沒完....  文字太長了... 我們需要加上折行... ```css .layui-layer-tips .layui-layer-content { line-height: 28px !important; font-size: 18px !important; display: inline-block; word-break: break-all; } ```  可以, 不過把 input 遮住了... 改成 3...   再加上圓角吧, 這樣就不突兀了... ```css .layui-layer-tips .layui-layer-content { line-height: 28px !important; font-size: 18px !important; word-break: break-all; display: inline-block; border-radius: 10px !important; } ```  挺好, 樣式調完了, 就這改功能吧... # 新的需求... 我們之前的問題是這樣的... 之前代碼里寫的是`4000` > 4s 的話, 字數少的時候, 嫌時間長, 字數多的時候, 嫌時間短, 最好能自己控制... 如何自己控制呢? 我們嘗試在藍色 tips 外點擊的話, 讓它關掉... 需要`layer.close()` ```javascript $(".task-item").on("click", function() { var index = layui.layer.tips( aTaskList[$(this).attr("index")]["fullContent"], ".task-item[index=" + $(this).attr("index") + "]", { tips: [3, "#3595CC"], time: 4000, area: ["500px", "auto"] } ); layui.layer.close(index); }); ``` 理論上會一閃而過, 而他真的一閃而過了... 說明 close 生效了... 記得把折行測試注釋掉...  現在我們嘗試, 在其他位置點擊, 使其關掉, 當然需要先設置一個很長的時間, 讓 tips 不會自動消失... 其實設置 0, 為常亮  然后, 需要把 index 聲明成全局變量, 并且監聽 body 的點擊事件... ```javascript // layer的tips彈框索引值 var layerTipIndex = 0; ```  接下來, 監聽 body... ```javascript // 監聽body的點擊事件 $("body").on("click", function() { if (layerTipIndex) { layui.layer.close(layerTipIndex); layerTipIndex = 0; } }); ``` 結果又是一閃而過... 可以代碼我們已經注釋了啊...  騷年, 還記得事件冒泡嗎? ```javascript $(".task-item").on("click", function(ev) { layerTipIndex = layui.layer.tips( aTaskList[$(this).attr("index")]["fullContent"], ".task-item[index=" + $(this).attr("index") + "]", { tips: [3, "#3595CC"], time: 0, area: ["500px", "auto"] } ); ev.stopPropagation(); // 阻止事件冒泡 }); ``` 接下來, 我想按下任意其他按鍵, 也能關閉彈框... 一切都很完美, 除了空格... 因為空格有默認動作, 我們需要清除它... ```javascript $("body").on("keypress", function(ev) { ev.preventDefault(); // 清除按鍵的默認事件 if (layerTipIndex && ev.keyCode) { layui.layer.close(layerTipIndex); layerTipIndex = 0; } }); ``` 不過少年, 告訴你一個小秘密... `return false` == `ev.stopPropagation()`+`ev.preventDefault()` ```javascript $("body").on("keypress", function(ev) { if (layerTipIndex && ev.keyCode) { layui.layer.close(layerTipIndex); layerTipIndex = 0; } return false; // 效果一樣 }); ``` ```javascript $(".task-item").on("click", function(ev) { layerTipIndex = layui.layer.tips( aTaskList[$(this).attr("index")]["fullContent"], ".task-item[index=" + $(this).attr("index") + "]", { tips: [3, "#3595CC"], time: 0, area: ["500px", "auto"] } ); return false; }); ``` 好, 再講最后一個 bug....  你們有沒有發現, 按鍵無效了... 因為阻止了默認事件... 其實我只是想阻止空格的默認事件, 那么空格的默認事件是多少呢? 不猜了, 直接上代碼... ```javascript $("body").on("keypress", function(ev) { console.log(ev.keyCode); if (layerTipIndex && ev.keyCode) { layui.layer.close(layerTipIndex); layerTipIndex = 0; if (ev.keyCode === 32) { return false; } } }); ``` 這次真的圓滿了... 老規矩, 附上所有代碼... ```javascript layui.use(["layer", "form"], function() { // 變量初始化, 判斷, 如果緩存里有數據, 取出到aTaskList, 注意緩存需要解析, 否則直接取是一個字符串 // 不管有沒有數據, aTaskList都是數組, 我們下面操作的就是數組 if (localStorage.getItem("task-list")) { // 解析用的是JSON.parse var aTaskList = JSON.parse(localStorage.getItem("task-list")); } else { // 如果緩存中沒有數據, 則直接空數組 var aTaskList = []; } var layerTipIndex = 0; // 監聽layer的tip的開啟 // 展示html代碼包裹以后的數據, 刷新內容區 // 進入頁面的時候會調一次, 更新數組和緩存后, 也會調用 showTask(); $("body").on("click", function() { // 監聽, 如果有值, 關掉tip if (layerTipIndex) { layui.layer.close(layerTipIndex); layerTipIndex = 0; } }); // $("body").on("keypress", function(ev) { // // 監聽空格, 關掉tip // if (ev.keyCode === 32 && layerTipIndex) { // layui.layer.close(layerTipIndex); // layerTipIndex = 0; // } // }); // 任意鍵都可關閉tip $("body").on("keypress", function(ev) { // 監聽所有按鍵, 關掉tip if (ev.keyCode && layerTipIndex) { if (ev.keyCode === 32) { ev.preventDefault(); } layui.layer.close(layerTipIndex); layerTipIndex = 0; } }); // 監聽輸入框的回車事件, 獲取輸入框的內容, 更新數組, 更新緩存, 刷新內容區 $(".add-task input[name=content]").on("keypress", function(ev) { // 先判斷, 回車, 并且輸入框里有內容, 則進行邏輯操作(往下走) // 回車的keyCode的是13, 使用===來比較 if (ev.keyCode === 13 && $(this).val()) { // 聲明一個對象, 用來存儲輸入框里的內容(content) // 還有其他的屬性 // isDel, 用來標記是否邏輯刪除, 1 for yes, 0 for no // isDone, 用來標記是否已完成, 1 for yes, 0 for no var oTaskItem = { content: compressContent($(this).val()), // 存儲input框里的內容, compressContent函數, 壓縮內容, 超過長度加··· fullContent: $(this).val(), // 存儲原始值(全文) isDel: 0, // 標記已刪除 isDone: 0 // 標記已完成 }; updateData(oTaskItem); // 更新數組, 更新緩存, 刷新內容區 // 清空input輸入區的內容 $(this).val(""); } }); $(".add-task button").on("click", function() { if ($(".add-task input[name=content]").val()) { // 聲明一個對象, 用來存儲輸入框里的內容(content) // 還有其他的屬性 // isDel, 用來標記是否邏輯刪除, 1 for yes, 0 for no // isDone, 用來標記是否已完成, 1 for yes, 0 for no var oTaskItem = { content: compressContent( $(".add-task input[name=content]").val() ), // 存儲input框里的內容, compressContent函數, 壓縮內容, 超過長度加··· fullContent: $(".add-task input[name=content]").val(), // 存儲原始值(全文) isDel: 0, // 標記已刪除 isDone: 0 // 標記已完成 }; updateData(oTaskItem); // 更新數組, 更新緩存, 刷新內容區 // 清空input輸入區的內容 $(".add-task input[name=content]").val(""); } }); // 更新內容區 // 數組和緩存變化后, 會調用, 刷新頁面也會調用 function showTask() { // 為什么置空(初始值為空字符串), 因為后面是追加, 所以追加之前, 內容最好為空, 其他特殊需求另說 // 保持數據類型一致, 是個好習慣, 通過給初始值, 來確定變量的數據類型 // 這里如果不給初始值, 會出現undefined字符串 var doneHTML = ""; // 已完成內容區的html代碼 var taskHTML = ""; // 未完成內容區的html代碼 var delHTML = ""; // 已刪除內容區的html代碼 console.log(aTaskList); // forEach遍歷數組, 參數是一個函數, 函數有兩個參數, 一個是value, 一個是key, 注意一下順序問題, value在前, key在后 aTaskList.forEach(function(value, key) { // 動態拼接html, 然后寫入 if (!value.isDone && !value.isDel) { // 未完成時, 進入 taskHTML += '<div index="' + key + '" class="task-item">'; taskHTML += '<span><input index="' + key + '" type="checkbox" /></span>' + "\n"; // 為什么有個\n, 為了保證和原來的html一致, 這個并不是必須的 taskHTML += '<span class="task-content">' + value.content + "</span>"; taskHTML += '<span class="task-content hidden">' + value.fullContent + "</span>"; taskHTML += '<span><i index="' + key + '" class="iconfont icon-del"></i></span>'; taskHTML += '<span><i index="' + key + '" class="iconfont icon-edit"></i></span>'; taskHTML += "</div>"; } if (value.isDone && !value.isDel) { // 已完成, 進入 doneHTML += '<div index="' + key + '" class="task-item">'; // key的目的: key是對象在數組中的下標, 用來標記對象在數組中的位置 doneHTML += '<span><input checked index="' + key + '" type="checkbox" /></span>' + "\n"; doneHTML += '<span class="task-content">' + value.content + "</span>"; doneHTML += '<span><i index="' + key + '" class="iconfont icon-del"></i></span>'; doneHTML += '<span><i index="' + key + '" class="iconfont icon-edit"></i></span>'; doneHTML += "</div>"; } if (value.isDel) { // 已刪除, 進入 delHTML += '<div index="' + key + '" class="task-item">'; delHTML += '<span><input index="' + key + '" type="checkbox" /></span>'; // 加刪除線, 方式二, 直接判斷, 修改html if (value.isDone) { delHTML += '<span class="task-content is-deleted">' + value.content + "</span>"; } else { delHTML += '<span class="task-content">' + value.content + "</span>"; } delHTML += '<span><i index="' + key + '" class="iconfont icon-remove"></i></span>'; delHTML += '<span><i index="' + key + '" class="iconfont icon-undo"></i></span>'; delHTML += "</div>"; } }); $(".task-done").html(doneHTML); // 寫入"已完成區"的html代碼, 原來的都覆蓋了 $(".task-list").html(taskHTML); // 寫入"未完成區"的html代碼, 原來的都覆蓋了 $(".task-deleted").html(delHTML); // 寫入"已刪除區"的html代碼, 原來的都覆蓋了 // 監聽復選框 $("input[type=checkbox]").click(function() { if (!$(this).attr("checked")) { // 未選中狀態 ==> 已選中, 修改對象屬性, isDone ==> 1 aTaskList[$(this).attr("index")]["isDone"] = 1; // 實際上更新了的數組 } else { // 已選中狀態 ==> 未選中, 修改對象屬性, isDone ==> 0 aTaskList[$(this).attr("index")]["isDone"] = 0; // 實際上更新了的數組 } updateData(); // 牽涉到方法重載, 參數個數不同, 干不同的事 }); // 監聽未完成區的刪除按鈕(小垃圾桶) $(".task-item .icon-del").on("click", function() { // 修改當前對象的isDel屬性為1 aTaskList[$(this).attr("index")]["isDel"] = 1; // 改為1之后, html代碼也要相應的改變 updateData(); }); // 監聽已刪除區的還原按鈕 $(".task-deleted .icon-undo").on("click", function() { // 修改當前對象的isDel屬性為1 aTaskList[$(this).attr("index")]["isDel"] = 0; // 改為1之后, html代碼也要相應的改變 updateData(); }); // 監聽已完成區的刪除按鈕 $(".task-done .icon-del").on("click", function() { // 修改當前對象的isDel屬性為1 aTaskList[$(this).attr("index")]["isDel"] = 1; // 改為1之后, html代碼也要相應的改變 updateData(); }); // 監聽task-item的點擊事件, 監聽div $(".task-item").on("click", function(ev) { //小tips // 獲取內容第一種方式, 直接取對象屬性 // layui.layer.tips(aTaskList[$(this).attr('index')]['fullContent'], ".task-item[index="+$(this).attr('index')+"]", { // tips: [2, "#3595CC"], // time: 4000 // }); // 第二種: 先存到span里, 然后隱藏, 但是內容在需要的時候, 可以取出來 layerTipIndex = layui.layer.tips( $( ".task-item[index=" + $(this).attr("index") + "] .hidden" ).html(), ".task-item[index=" + $(this).attr("index") + "]", { tips: [3, "#3595CC"], time: 0, area: ["500px", "auto"] } ); // ev.stopPropagation(); }); // 監聽移出事件 $(".task-item").on("mouseleave", function() { layui.layer.close(layerTipIndex); }); } // 內容壓縮, 如果超過30個, 就截取30, 加上省略號, 如果不超過30, 原路返回 function compressContent(str) { if (str.length >= 30) { return str.slice(0, 30) + "···"; } else { return str; } } // 組合操作, 更新數組, 更新緩存, 更新html內容 function updateData(obj) { if (arguments.length) { // 把對象添加到數組, unshift, 保證最后添加的, 在第一個 aTaskList.unshift(obj); } // 更新完數組, 更新緩存, 保持數組中的數據和緩存中一致 localStorage.setItem("task-list", JSON.stringify(aTaskList)); // 刷新內容區 showTask(); // // 動態添加刪除線(方式一) // aTaskList.forEach(function(value, key) { // if (value.isDone) { // $(".task-item[index=" + key + "] .task-content").addClass("is-deleted"); // } // }); } }); ``` ```css * { margin: 0; padding: 0; outline: none; -webkit-transition: background 200ms; -moz-transition: background 200ms; -ms-transition: background 200ms; -o-transition: background 200ms; transition: background 200ms; } body { background: #00334b; } h1.myTitle { text-align: center; margin: 20px; color: #fff; } .container { margin: 0 auto; /* background: red; */ max-width: 600px; } .task-item { background: #fff; color: #333; margin-bottom: 3px; cursor: pointer; padding: 10px; border-radius: 3px; } .task-item:hover { background: #ddd; } .iconfont { float: right; margin-right: 10px; line-height: 21px; } input[type="text"] { background: #ddd; float: left; width: 84%; margin-right: 1%; padding: 10px; -moz-box-sizing: border-box; /*Firefox3.5+*/ -webkit-box-sizing: border-box; /*Safari3.2+*/ -o-box-sizing: border-box; /*Opera9.6*/ -ms-box-sizing: border-box; /*IE8*/ box-sizing: border-box; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); } input[type="text"]:focus, input[type="text"]:hover { background: #eee; } .add-task button { width: 15%; background: rgb(3, 174, 255); } .add-task button:hover { background: rgb(77, 195, 251); } input[type="text"], .add-task button { border: 0; height: 100%; } .add-task { height: 37px; } .task-done .task-item { background: #ccc; } .task-deleted .task-item:hover { background: #ddd; } .task-done .task-item:hover { background: #fff; } .task-deleted .task-item { background: #a9a7a7; } .task-done, .task-deleted, .task-list { margin: 10px 0; } .task-done .task-content, .is-deleted { text-decoration: line-through; } .task-deleted input[type="checkbox"] { visibility: hidden; } input, button { border-radius: 3px; } .task-content { margin-left: 5px; } .iconfont:hover { filter: drop-shadow(0 0 0 black); } .hidden { display: none; } .layui-layer-tips .layui-layer-content { font-size: 18px !important; display: inline-block; word-break: break-all; line-height: 26px !important; border-radius: 10px !important; } ``` ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link rel="stylesheet" type="text/css" href="css/iconfont.css" /> <link rel="stylesheet" type="text/css" href="css/iconfont_2.css" /> <link rel="stylesheet" href="layui/css/layui.css" /> <link rel="stylesheet" href="css/style.css" /> <script src="js/jquery.js"></script> <script src="layui/layui.js"></script> <script src="js/index.js"></script> <title>備忘清單</title> </head> <body> <!-- 總容器開始 --> <div class="container"> <h1 class="myTitle">我的備忘清單</h1> <!-- 輸入框和按鈕開始 --> <div class="add-task"> <input type="text" placeholder="寫下你的備忘吧..." name="content" /> <button>添加備忘</button> </div> <!-- 輸入框和按鈕結束 --> <!-- 清單列表開始 --> <div class="task-list"> <div class="task-item"> <span><input type="checkbox" /></span> <span class="task-content">item content 1</span> <span><i class="iconfont icon-del"></i></span> <span><i class="iconfont icon-edit"></i></span> </div> <div class="task-item"> <span><input type="checkbox" /></span> <span class="task-content">item content 1</span> <span><i class="iconfont icon-del"></i></span> <span><i class="iconfont icon-edit"></i></span> </div> <div class="task-item"> <span><input type="checkbox" /></span> <span class="task-content">item content 1</span> <span><i class="iconfont icon-del"></i></span> <span><i class="iconfont icon-edit"></i></span> </div> <div class="task-item"> <span><input type="checkbox" /></span> <span class="task-content">item content 1</span> <span><i class="iconfont icon-del"></i></span> <span><i class="iconfont icon-edit"></i></span> </div> <div class="task-item"> <span><input type="checkbox" /></span> <span class="task-content">item content 1</span> <span><i class="iconfont icon-del"></i></span> <span><i class="iconfont icon-edit"></i></span> </div> </div> <div class="task-done"> <div class="task-item"> <span><input checked type="checkbox" /></span> <span class="task-content">item content 1</span> <span><i class="iconfont icon-del"></i></span> </div> <div class="task-item"> <span><input checked type="checkbox" /></span> <span class="task-content">item content 1</span> <span><i class="iconfont icon-del"></i></span> </div> <div class="task-item"> <span><input checked type="checkbox" /></span> <span class="task-content">item content 1</span> <span><i class="iconfont icon-del"></i></span> </div> <div class="task-item"> <span><input checked type="checkbox" /></span> <span class="task-content">item content 1</span> <span><i class="iconfont icon-del"></i></span> </div> <div class="task-item"> <span><input checked type="checkbox" /></span> <span class="task-content">item content 1</span> <span><i class="iconfont icon-del"></i></span> </div> </div> <div class="task-deleted"> <div class="task-item"> <span><input type="checkbox" /></span> <span class="is-deleted task-content">item content 1</span> <span><i class="iconfont icon-remove"></i></span> <span><i class="iconfont icon-undo"></i></span> </div> <div class="task-item"> <span><input type="checkbox" /></span> <span class="is-deleted task-content">item content 1</span> <span><i class="iconfont icon-remove"></i></span> <span><i class="iconfont icon-undo"></i></span> </div> <div class="task-item"> <span><input type="checkbox" /></span> <span class="is-deleted task-content">item content 1</span> <span><i class="iconfont icon-remove"></i></span> <span><i class="iconfont icon-undo"></i></span> </div> <div class="task-item"> <span><input type="checkbox" /></span> <span class="is-deleted task-content">item content 1</span> <span><i class="iconfont icon-remove"></i></span> <span><i class="iconfont icon-undo"></i></span> </div> <div class="task-item"> <span><input type="checkbox" /></span> <span class="is-deleted task-content">item content 1</span> <span><i class="iconfont icon-remove"></i></span> <span><i class="iconfont icon-undo"></i></span> </div> </div> <!-- 清單列表結束 --> </div> <!-- 總容器結束 --> </body> </html> ```