版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_25027593/article/details/83022926
<!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>