【09】MUI 仿拼多多 聊天
阿新 • • 發佈:2018-12-14
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>聊天</title> <link href="../css/mui.min.css" rel="stylesheet" /> <style type="text/css"> .mui-content>.mui-table-view:first-child { margin-top: 0px; } .mui-table-view:before { height: 0px; } .mui-table-view:after { height: 0px; } .mui-table-view-cell { padding: 13px 15px; } #chat li img { border-radius: 50%; } #chat li div { font-weight: bold; } #chat li p { margin-top: 3px; font-weight: 300; } ul li .mui-media-body { font-size: 15px; } ul li .mui-ellipsis { font-size: 12px; } ul li .mui-pull-right { font-size: 12px; } </style> </head> <body> <header class="mui-bar mui-bar-nav"> <h1 class="mui-title">聊天</h1> </header> <div class="mui-content"> <ul class="mui-table-view" id="chat"> <li class="mui-table-view-cell mui-media"> <div class="mui-slider-right mui-disabled"> <a class="mui-btn mui-btn-red">刪除</a> </div> <a href="javascript:;" class='mui-slider-handle'> <p class="mui-pull-right">剛剛</p> <img class="mui-media-object mui-pull-left" src="../img/index_4.png"> <div class="mui-media-body"> 有故事的汪星人 <p class="mui-ellipsis">[常見問題列表]</p> </div> </a> </li> <li class="mui-table-view-cell mui-media"> <div class="mui-slider-right mui-disabled"> <a class="mui-btn mui-btn-red">刪除</a> </div> <a href="javascript:;" class='mui-slider-handle'> <p class="mui-pull-right">15:43</p> <img class="mui-media-object mui-pull-left" src="../img/index_02.png"> <div class="mui-media-body"> 金豪酒類專營店 <p class="mui-ellipsis">[常見問題列表]</p> </div> </a> </li> </ul> </div> <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="../js/mui.min.js"></script> <script> mui.init(); //聊天列表單擊 mui("#chat").on("tap", "li", function() { mui.alert("點選了聊天"); }) //刪除 此處偽刪 var btnArray = ['確認', '取消']; $('#chat').on('tap', '.mui-btn', function(event) { var elem = this; var AppointmentID = $(this).attr("id") var li = elem.parentNode.parentNode; mui.confirm('確認刪除該條記錄?', '提示', btnArray, function(e) { if(e.index == 0) { li.parentNode.removeChild(li); } }); }); </script> </body> </html>