第61篇一对多之老师端私有白板点击上共享白板及老师端学生私有白板加载多次及点头像出私有白板列表周四

关键词：老师端私有白板点击上共享白板,老师端学生私有白板加载多次,点头像出私有白板列表

一、私有白板向老师端传图片数据

1.1 服务器运行平台

老师端：https://localhost:9101/demos/index.html?roomid=888&t=600

学生一：

https://localhost:9101/demos/student.html?studentId=1001&userAvatar=http://123.57.206.36:8003/uploadfiles/2016/11/1479740395ZMJkiF.jpg&t=600#888

学生二：                   

https://localhost:9101/demos/student.html?studentId=1002&userAvatar=http://123.57.206.36:8003/uploadfiles/2016/11/1480494624FDjMGetutor.png&t=600#888

学生三：

https://localhost:9101/demos/student.html?studentId=1003&userAvatar=http://123.57.206.36:8003/uploadfiles/2016/11/1480475198N2F0kntutor.png&t=600#888

1.2老师端私有白板，点击上共享白板

实现了，代码如下：----------index.html

   function onImgClickPrivate() {

             designer.undo();

             designer.addImgByUrl(this.src, true);

             $("[name =thumbnailStuPri]").parent().removeClass("tea_base64_selectStuPri");

            $(this).parent().addClass("tea_base64_selectStuPri");

}

注：就改了一个函数的两个地方，一是单击老师端私有白板时，不再清空私有白板（designer.undoPrivateTea();），改为清空共享白板（designer.undo();）；二是图片加载函数designer.addImgByUrlPrivateTea(加载到私有白板)改为designer.addImgByUrl，加载到共享白板。

1.3修改老师端私有白板呈现样式

样式修改先这样，改的不太满意，这不是我的主要工作，目前老师端私有白板如下显示：

相关代码如下：代码在t.css里面

.picWrapStuPri{

    background:#BBFF66;

    width:100%;

    height:400px;

    float:left;

    text-align:center;

    overflow: hidden;

    overflow-y: auto;

}

.picWrapStuPri .picContentStuPri{

    padding:1rem 0;

    }

.tea_base64StuPri{

             width:100%;

             height:100%;

             position:relative;

                       background:#FFF;

                     

}

1.4 加载两次

1）描述----------------index.html

   老师端获取的学生私有白板，如果学生再写的话，重新获取，现在追加到后面，实际上应该先清空再重新追加。

2）实现了，代码如下：

    if (event.data.studentPri){

        //把收到的私有白板数组展示出来，供老师查看

         stuPriUrlIdArray =event.data.stuPriDataURLArr;

       if(isArray(stuPriUrlIdArray) && stuPriUrlIdArray.length){

            $('#picContentStuPri').html("");

            for (var i = 0; i <stuPriUrlIdArray.length; i++) {

                if(isArray(stuPriUrlIdArray)){

                                   dataURL_Pri =stuPriUrlIdArray[i];

                                       varj = i+1;

                                       varpageIndexPri = i + 1;

                                       varimgContentPri = ' <span class="img_divStuPritea_base64_selectStuPri"><img id= "arr_base64_imgStuPri' + j + '"src = "'+dataURL_Pri+'" name="thumbnailStuPri"class="tea_base64StuPri "><spanclass="page_index_divStuPri">' + pageIndexPri + '</span></span>';

                                       $(imgContentPri).appendTo($("#picWrapStuPriPic.picContentStuPri"));

                                       $(".tea_base64StuPri").off("click");

                                       $(".tea_base64StuPri").on("click",onImgClickPrivate);

                }

           }

        }

        return;

    }

1.5 把按钮加到头像上去

1）描述：

  整合按钮和头像，把按钮加到头像上去，实现点谁的头像出来谁的私有白板列表。

2）代码实现如下：

  a.)单击图片时，添加个函数，并传一个学生id过去，便于区分不同学生

    if(typeof event.extra =='object' && event.extra.studentId != undefined){

        //动态加载学生头像

       studentId=event.extra.studentId;

       //console.log('studentId',studentId);

       userAvatar=event.extra.userAvatar;

 

       if($.inArray(studentId, studentIdArray)<=-1){

             //动态追加学生头像

           $("#studentIdSet").append("<div οnclick='sendMessageGetPhotoArr("+ studentId + ")'><img src="+userAvatar+" width='60px';height='60px'></div>");

            //把学生id追加到数组中，供下次判断

           studentIdArray.push(studentId);

        }

    }

b.）相应的单击函数如下：       

    functionsendMessageGetPhotoArr(askStudentId) {

        connection.send({

                      askStudentId:askStudentId

             });

    }

1.6 头像加载小优化

   现在对头像加载做了一个小优化，就是之前，动态加载div，现在是动态加载图片，这样一来，图片就能在一排显示，并不会每个头像都换行。

之前的代码为：

$("#studentIdSet").append("<divοnclick='sendMessageGetPhotoArr(" + studentId + ")'><imgsrc="+userAvatar+" width='60px';height='60px'></div>");

 现在的代码为：

$("#studentIdSet").append("<imgοnclick='sendMessageGetPhotoArr(" + studentId +")'src="+userAvatar+" width='60px';height='60px'>");

效果如下：

         

1.7 学生端修改私有白板并保存

2017年3月2日星期四

802字 铜牌