运用JQuery和bootstrap写一个简易的朋友圈案例。

这篇文章距离上次修改已过439天，其中的内容可能已经有所变动。

以下是一个使用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的入门级教程。

运用JQuery和bootstrap写一个简易的朋友圈案例。

评论已关闭

推荐阅读