【追加】发布器 评论框 前端

<div class="publisherbox">
        <div class="publisher">
            <div class="ad_bar">
                
            </div>
            <div class="p_title">
                <h3>输入标题</h3>
                <select value="">
                    <option value="">需求</option>
                    <option value="">招募</option>
                    <option value="">...</option>
                </select>
                <label for="title">标题</label>
                <input class="title" name="title" type="text" value=""/>
            </div>


            <div class="commentbox">

                <div class="inputBox">
                    <textarea class="inputText"></textarea>
                </div>
                <!--测试用 实际则使用循环输出-->
                <div class="faceDiv">
                    <img alt="01" src="./pics/emojy.png" title="开心"/>
                    <img alt="01" src="./pics/emojy.png" title="哭"/>
                    <img alt="01" src="./pics/emojy.png" title="test"/>
                    <img alt="01" src="./pics/emojy.png" title="test"/>
                    <img alt="01" src="./pics/emojy.png" title="test"/>
                    <img alt="01" src="./pics/emojy.png" title="test"/>
                    <img alt="01" src="./pics/emojy.png" title="test"/>
                    <img alt="01" src="./pics/emojy.png" title="test"/>
                    <img alt="01" src="./pics/emojy.png" title="test"/>
                    <img alt="01" src="./pics/emojy.png" title="test"/>
                    <img alt="01" src="./pics/emojy.png" title="test"/>
                    <img alt="01" src="./pics/emojy.png" title="test"/>
                    <img alt="01" src="./pics/emojy.png" title="test"/>
                    <img alt="01" src="./pics/emojy.png" title="test"/>
                </div>
                <div class="inputFoot">
                    <a class="imgbtn" title="表情"></a>
                    <a class="topicbtn" title="话题">#</a>
                    <a class="postBtn">确定</a>
                </div>
            </div>
                     <!--commenbox end-->
         <div class="imgaddbox">
             <h3>添加图片</h3>
             
             <!--用jQuery追加-->
             <div class="imgsyl">
                 <img src="./pics/5.jpg"/>
             </div>
             <a class="addbtn" ></a>
         </div>

         <a class="clsbtn">
             
         </a>
    </div>    
</div>

---

/**评论框js**/

    $(function(){
            $(".imgbtn").click(function(event){
                if($(".faceDiv").is(":visible")){
                    $(".faceDiv").hide();
                }else{
                    $(".faceDiv").show();
                }
                event.stopPropagation();
            })
            $(".faceDiv").siblings().click(function(){
                if($(".faceDiv").is(":visible")){
                    $(".faceDiv").hide();
                }
            });
                
            $(".faceDiv img").click(function(){
                $(".faceDiv").hide();
                $(".inputBox textarea").val($(".inputBox textarea").val()+"\\[表情"+$(".faceDiv img").index($(this))+"]");
            });

            $("a.clsbtn").click(function(){
                $(this).parents(".publisher").parent().hide();
            })
        })

/**commentbox**/
    
        .commentbox{position: relative;height: 165px;width: 495px;}
        .inputBox{width:493px;height:165px;border: 1px solid #ccc; transition:border liner .2s , box-shadow liner .5s;
                    -moz-transition: border linear .2s, -moz-box-shadow linear .5s;     
                    -webkit-transition: border linear .2s, -webkit-box-shadow linear .5s;     
                      -moz-border-radius: 5px;     
                       -webkit-border-radius: 5px;
                       border-radius: 5px;
                       background-color: #fff;
                       overflow: hidden;
                       position: relative;
                       -moz-box-shadow:0 0 5px #ccc;
                       -webkit-box-shadow:0 0 5px #ccc;
                       box-shadow: 0 0 5px #ccc;
                 }
        .inputBox:hover{border: 1px solid #2744F4;-moz-box-shadow:0 0 5px #2744F4;
                       -webkit-box-shadow:0 0 5px #2744F4;
                       box-shadow: 0 0 5px #2744F4;}
        .inputBox textarea{width: 475px;height:111px;padding: 10px;outline: none;border: 0 solid #fff;resize:none; font:13px "微软雅黑",Arial,Helvetica,sans-serif;
            -moz-border-radius:5px;
            webkit-border-radius:5px;
            border-radius: 5px;
        }
        .inputFoot{width:493px;height:35px;border: 1px solid #ccc;background-color: #fff;-moz-border-radius:0 0 5px 5px;-webkit-border-radius:0 0 5px 5px;border-radius: 0 0 5px 5px;position:absolute;bottom: 0;}
        .inputFoot a{cursor: pointer;text-decoration: none;}
        .topicbtn{float: left;margin-top: 3px;margin-left: 10px;height:30px; width :30px;line-height: 30px;}
        .topicbtn:hover{color: #ccc;}
        .topicbtn:active{padding: 2px 0 0 2px;}
        .imgbtn{background:url(../pics/emojy.png) no-repeat; background-position: 0 0; float: left;margin-top: 3px;margin-left: 10px;height:30px; width :30px;}
        .imgbtn:active {margin-top: 4px;}
        .imgbtn:hover{background-position: -30px 0;}
        .postBtn{float: right; font:13px "微软雅黑", Arial, Helvetica, sans-serif; color:#808080;padding: 9px 20px 7px 20px;border-left: 1px solid #ccc; cursor: pointer; -moz-border-radius:0 0 5px 0; -webkit-border-radius:0 0 5px 0;border-radius:0 0 5px 0;}
        .postBtn:hover{color:#333;background-color: #efefef;}
        .postBtn:active{padding: 10px 20px 6px 20px; }
        .faceDiv{bottom:35px;display:none;width: 300px;height: 130px;border: 1px solid #ccc;position:absolute;background-color: #D8E7F0;}
        .faceDiv img{border: 1px solid #ccc;float:left;margin-left: -1px;margin-top: -1px;position:relative;width:24px;height:24px;padding: 3px 3px 3px 3px;cursor: pointer;}
        .faceDiv img:hover{background-color: #efefef;}
        .faceDiv img:active{padding: 4px 3px 2px 3px;}

        /**·¢²¼Æ÷**/
        h3{font-family:"微软雅黑"; font-size: 12pt;text-indent:10px;text-align:left; }
        .publisher{width: 520px;height: 600px;bottom: 0;left:200px;background-color: #fff;z-index:9000;border: 1px solid black;position:absolute;}
        .publisher>div{margin: 10px;overflow: hidden;}
        .ad_bar{height: 70px;background: url(../pics/schelper.png) no-repeat;}
        .p_title{}

        .p_title select{width:150px;height:30px;border: 1px solid #ccc;line-height: 30px;font-size:12pt; font-family:"微软雅黑";order-radius: 5px;
                    -moz-border-radius: 2px;
                    -webkit-border-radius: 2px;
                    -moz-box-shadow:0 0 2px #ccc;
                       -webkit-box-shadow:0 0 2px #ccc;
                       box-shadow: 0 0 2px #ccc;
                    }
        .title{width: 300px;height:30px;border: 1px solid #ccc;line-height: 30px;font-size:12pt; font-family:"微软雅黑"; border-radius: 5px;
                    -moz-border-radius: 2px;
                    -webkit-border-radius: 2px;
                    -moz-box-shadow:0 0 2px #ccc;
                       -webkit-box-shadow:0 0 2px #ccc;
                       box-shadow: 0 0 2px #ccc;
                    text-indent: 5px; }

        .addbtn{background: url(../pics/add.png) no-repeat;-webkit-background-size:100% 100%; background-size:100% 100%;float: left;  width: 60px;height: 60px;display: block;margin:20px;
            transition:border liner .2s , box-shadow liner .5s;
                    -moz-transition: border linear .2s, -moz-box-shadow linear .5s;     
                    -webkit-transition: border linear .2s, -webkit-box-shadow linear .5s; 

                    border-radius: 5px;
                    -moz-border-radius: 5px;
                    -webkit-border-radius: 5px;   }
        .addbtn:hover{-moz-box-shadow:0 0 5px #2744F4;
                       -webkit-box-shadow:0 0 5px #2744F4;
                       box-shadow: 0 0 5px #2744F4;
                       padding: 2px 0 0 2px;
                   }
        .addbtn:active{margin-left: 24px;margin-top:24px;}

        
        .imgsyl img{width: 100px;height:100px;float:left;margin: 5px;border: 2px dashed black;padding: 5px;}


        .clsbtn{margin:0;width:25px;height:25px; cursor: pointer;background:url(../pics/clsbtn.png) no-repeat;
     background-position:  0 0; position: absolute;top: 0;right: 0;}
         .clsbtn:hover{background-position: -25px 0;}
         .clsbtn:active{margin-top: 2px;}