02: 实现发布帖子功能

最新推荐文章于 2023-02-06 19:28:57 发布

weixin_30613433

最新推荐文章于 2023-02-06 19:28:57 发布

阅读量2.8k

点赞数 4

文章标签： javascript python json ViewUI

原文链接：http://www.cnblogs.com/xiaonq/p/8214503.html

版权

本文介绍了抽屉项目中使用JavaScript实现发布帖子功能的五个关键点，包括展示和隐藏发布框、用for循环模板展示并绑定点击事件、上传图片预览、提交帖子内容和上传图片至服务器。

摘要由CSDN通过智能技术生成

目录：抽屉项目之js最佳实践

1.1 发布帖子中的5个功能点返回顶部

1.2 各功能点代码返回顶部

　　1、功能1和功能2：展示和隐藏发布框

<body>
    <div class="pg-content">
        <div class="w">
            <div>
                <a href="javascript:void(0);" class="publish_btn" onclick="show_publish_frm(true)">发 布 +</a>
            </div>
        </div>
    </div>

    <div class="shelter hide">
        <div class="publish_frm hide">
            <div class="close_publish_frm" onclick="show_publish_frm(false)">×</div>
        </div>
    </div>
</body>

index.html

/* 展示发布框 */
function show_publish_frm(flag) {
    if(!is_login()){
        show_login_reg_frm();
        return false;
    }
    if(flag){
        $("div.shelter").removeClass("hide");
        $("div.publish_frm").removeClass("hide");
    }else{
        $("div.shelter").addClass("hide");
        $("div.publish_frm").addClass("hide");
    }
}

base.js

　　2、功能3：for循环模板，展示到页面，并绑定点击事件

<body>
    <div class="shelter hide">
        <div class="publish_frm hide">
            <div class="publish_catalog">
                {% for c in enable_catalog %}
                    <a href="javascript:void(0);" cid="{
     { c.id }}" onclick="publish_radio_btn(this)">{
    { c.name }}</a>
                {% endfor %}
                <script>
                    function publish_radio_btn(ele) {
                        $(ele).siblings().removeClass("current"