运用JQuery和bootstrap写一个简易的朋友圈案例。
以下是一个使用jQuery和Bootstrap创建的简易的朋友圈案例的代码示例。这个示例包括了发表说话、删除说话、加载更多说话等功能。
HTML 部分:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简易朋友圈</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container py-4">
<div class="row">
<div class="col-md-8">
<form id="status-form">
<div class="form-group">
<textarea class="form-control" id="status" rows="3" placeholder="说点什么..."></textarea>
</div>
<button type="submit" class="btn btn-primary">发表</button>
</form>
<hr>
<div id="status-list">
<!-- 动态加载说话,将以下结构复制多份 -->
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="script.js"></script>
</body>
</html>
CSS 部分 (styles.css):
.status-item {
margin-bottom: 10px;
padding: 10px;
border: 1px solid #eee;
border-radius: 5px;
}
.status-item .delete {
float: right;
cursor: pointer;
}
JavaScript 部分 (script.js):
$(document).ready(function() {
// 发表说话
$('#status-form').on('submit', function(e) {
e.preventDefault();
var status = $('#status').val().trim();
if (status) {
addStatus(status);
$('#status').val('');
}
});
// 删除说话
$(document).on('click', '.delete', function() {
$(this).parent().remove();
});
});
function addStatus(status) {
var statusItem = $('<div>').addClass('status-item').text(status);
var deleteBtn = $('<button>').addClass('delete btn btn-sm btn-danger').text('删除');
statusItem.append(deleteBtn);
$('#status-list').prepend(statusItem);
}
这个简易的朋友圈案例包括了发表说话、删除说话的基本功能。用户可以在文本区域输入内容,点击发表按钮发布说话,每条说话下面有一个删除按钮可以删除这条说话。这个案例可以作为学习jQuery和Bootstrap的入门级教程。
评论已关闭