bbs 网站开发中常见前端问题及解决

最近开发了一个 bbs 多人在线论坛

开发过程中遇到了很多有意思的问题，最终一点点查找资料找到了解决方法，现将问题以及解决。

1. 返回顶部功能

实现起来还是比较简单的，在页面上加一个 button 即可

html 代码如下

<div class="sidebar-view">
    <div class="widget">
        <a href="{{ url_for('main.edit_new') }}" class="button button--green">新增主题</a>
    </div>
    <div class="widget">
        <a href="#" class="button button--green">返回顶部</a>
    </div>
</div>

相关类的样式表如下：

.sidebar-view { float: right; width: 300px }

.widget { color: #999; margin-bottom: 20px }

.widget .widget-content,
.widget h2,
.widget h3,
.widget h4 { margin: 0 }

.widget .widget-title { margin: 0; font-size: 14px; color: #666; line-height: 1.6; text-transform: uppercase; border-bottom: 1px solid #eee }

.button { position: fixed; display: inline-block; background-color: #42b983; text-decoration: none; padding: 0 24px; color: #fff; font: normal 500 13px/32px Lucida Grande, Helvetica Neue, Arial, sans-serif; border-radius: 32px; border: none }

.button--green { background-color: #42b983 }

效果如下：

2. 删除时弹确认框

这个也很使用，用户如果不小心点了删除按钮，还有挽回的余地。

使用一个 javascript 函数即可

<script language="javascript">
function del() {
    var msg = "您真的确定要删除吗？\n\n请确认！";
    if (confirm(msg) == true) {
        return true;
    } else {
        return false;
    }
}
</script>

在修改文章所在 html 代码上调用 javascropt 函数（下面代码使用了 jinja2 模板引擎）：

<a href="{{ url_for('.delete', id=post.id) }}" onclick="javascript:return del();">
    <span class="label label-primary">删除文章</span>
</a>

效果如下所示：

3. 导航栏固定在顶部

这个实现起来就更简单了，由于我使用的 bootstrap 框架，所以只需在 navbar 类中加入 navbar-fixed-top 即可。

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
</div>