优美的界面都是经过程序们没不断的调试美化出来的,通过做视频系统也收获了不少界面操作的代码知识点,总结出来以作积累!
基础——界面动态拼接
我们需要的不是静态界面,而是通过查询操作得出的结果进行拼接,得到最终的界面。界面已有的内容很简单,比如说,以下jsp代码中已有的部分:
<span style="font-size:18px;"><pre name="code" class="html"><div id="queryresult">
<div class="recommended">
<div id="youlike"></div>
</div>
<div class="container" id="myVideo_list"></div>
<button type="button" id="findmore" style="display:none;" class="btn btn-info" style="margin-left:50px" οnclick="search1()" value="查询" >查询</button>
</div></span>
当单击查询按钮时我们要将所查询的内容拼接到id=“youlike”节点中,那需要做的只是一个查询操作,重点是怎样将查询的结果进行动态拼接。
说到动态拼接,听上去不是很难,先给大家展示拼接后的效果:
界面上所有的内容都是通过拼接得出来的,那可想拼接过程肯定是复杂的,不过,我有大神相助,以下是js中从查询到最后的拼接界面所有的内容。
<span style="font-size:18px;"><pre name="code" class="html">function search1(){
var querytxt=$("#querytxt").val();
$("#extendstudycenter").children().remove();
$.ajax({
type : "POST",
async : false,
data:{"page":str,"rows":str1,"querytxt":querytxt},
dataType:"JSON",
url:'queryCollegeVideoInfo',
success : function(result) {
$.each(videos, function(i, value) {
var htmlDiv="";
htmlDiv=htmlDiv+"<div class=" + "col-sm-3" + ">";
htmlDiv=htmlDiv+"<div class=" + "thumbnail" + " style='float:right;'>";
htmlDiv=htmlDiv+"<div><a href=" + "single.html" +">" +"<img id=" + "youLikeImg" + value.id + " src" + "" + "/></a>";
//htmlDiv=htmlDiv+"<div style='margin-top:-15px;color:#fff;text-align:right;'>"+ value.videoTime+"</div></div>";
htmlDiv=htmlDiv+"</div>";
htmlDiv=htmlDiv+"<div id=" +"videoDesc" + value.id + ">"+"<h5><a>"
+ value.videoName + "</a></h5>"+
"<div style='float:left;'><p><a style='color: #21deef;font-size:12px'>"
+ value.videoType + "</a></p></div>"
+"<div style='float:right;'><a float=right style='color:gray;font-size:12px'>"
+ value.comment +"views</a></p></div>";
htmlDiv=htmlDiv+"</div></div></div>";
$("#youlike").append(htmlDiv);
$("#youLikeImg"+value.id).attr("src","/dmsd-itoo-video-web/"+value.videoPath);
});
},
error : function(error) {
console.info("doSearch() method error")
}
});
return;
}</span>
JS代码解析
界面值获取
<span style="font-size:18px;">var querytxt=$("#querytxt").val();</span>
这个就不用多说啦,jquery方法获取界面值,另外还有js方法获取:
<span style="font-size:18px;">var querytxt=document.getElementById("querytxt").val();</span>
删除某个节点下的所有节点
<span style="font-family:SimSun;font-size:18px;">$("#extendstudycenter").children().remove();</span>
每进行一个查询,需要把之前界面已有的内容移除,然后拼接新的内容,以上代码即将id为extendstudycenter的节点下的所有子节点删除。
替换节点内容
查询之后如果不把界面内容先删除再拼接,还可以直接进行替换:
//替换内容标题title
document.getElementById("title").innerHTML=htmltitle;
将id为title的标签的内容替换为htmltitle所表示的内容。
循环拼接界面
js代码中$.each中的内容,即对所需界面的循环拼接,包括所有控件及其控件中的部分属性和样式。
htmlDiv中即为界面循环拼接的结果,在 $("#youlike").append(htmlDiv); 一句中,将拼接好的htmlDiv拼接到id为youlike的节点下。
动态给控件属性赋值
<span style="font-family:SimSun;font-size:18px;">$("#youLikeImg"+value.id).attr("src","/dmsd-itoo-video-web/"+value.videoPath);</span>
这是一个id为youlikeImg的img控件,本句的意思是对img控件的src属性附链接地址value.videoPath(查询结果value的videoPath字段值),所得结果即<img id="youLikeImg1" src="http://localhost:8080/dmsd-itoo-video-web/images/c.jpg"/>
当然,技巧多得是,书到用时方恨少啊,慢慢积累,不断完善~~~ing。。。