做自由落体运动的JSF组件，使用javascript打造富有个性的漂亮组件——QFaces

核心提示： QFaces.facesMakeFrame = function(id)QFaces.facesMakeFrame=function(id){varsourceObj=((typeofid)=="string")?QFaces.getComponent(id):id;Q

QFaces.facesMakeFrame = function(id)

QFaces.facesMakeFrame　=　function(id)　{
　　　　var　sourceObj　=　((typeof　id)　==　"string")　?　QFaces.getComponent(id)　:　id;
　　　　QFaces.assertNull(sourceObj,　"facesMakeFrame　:　Object　not　found　"　+　id);
　　　　var　sourceTemp　=　QFaces.getComponent(sourceObj.id);　//　sourceTemp　==　null　表明组件仍未被加入到组件树中。
　　　　var　parentObj　=　sourceTemp　!=　null　?　sourceTemp.parentNode　:　(document.body　?　document.body　:　document.documentElement);
　　　　var　targetObj　=　QFaces.ele("div");
　　　　
　　　　var　src_0_0　=　QFaces.getComponent("name.huliqing.qfaces.images.frame_top_left").value;
　　　　var　src_0_1　=　QFaces.getComponent("name.huliqing.qfaces.images.frame_top_center").value;
　　　　var　src_0_2　=　QFaces.getComponent("name.huliqing.qfaces.images.frame_top_right").value;
　　　　var　src_1_0　=　QFaces.getComponent("name.huliqing.qfaces.images.frame_left").value;
　　　　var　src_1_2　=　QFaces.getComponent("name.huliqing.qfaces.images.frame_right").value;
　　　　var　src_2_0　=　QFaces.getComponent("name.huliqing.qfaces.images.frame_bottom_left").value;
　　　　var　src_2_1　=　QFaces.getComponent("name.huliqing.qfaces.images.frame_bottom_center").value;
　　　　var　src_2_2　=　QFaces.getComponent("name.huliqing.qfaces.images.frame_bottom_right").value;
　　　　var　img_0_0　=　QFaces.ele("img");
　　　　var　img_0_2　=　QFaces.ele("img");
　　　　var　img_2_0　=　QFaces.ele("img");
　　　　var　img_2_2　=　QFaces.ele("img");
　　　　
　　　　var　_table　=　QFaces.ele("table");
　　　　var　_arr　=　QFaces.eleTable(_table,　3,　3);　//　创建一个3,3表格
　　　　
　　　　img_0_0.setAttribute("src",　src_0_0);img_0_0.style.width　=　img_0_0.style.height　=　"100%";
　　　　img_0_2.setAttribute("src",　src_0_2);img_0_2.style.width　=　img_0_2.style.height　=　"100%";
　　　　img_2_0.setAttribute("src",　src_2_0);img_2_0.style.width　=　img_2_0.style.height　=　"100%";
　　　　img_2_2.setAttribute("src",　src_2_2);img_2_2.style.width　=　img_2_2.style.height　=　"100%";
　　　　
　　　　sourceObj.style.display　=　"block";　//　这里必须显示出来，否则在包装后可能看不到正确的大小
　　　　_arr[0][0].appendChild(img_0_0);
　　　　_arr[0][1].style.cssText　=　"background:url('"　+　src_0_1　+　"')　repeat-x";
　　　　_arr[0][2].appendChild(img_0_2);
　　　　_arr[1][0].style.cssText　=　"background:url('"　+　src_1_0　+　"')　repeat-y";
　　　　_arr[1][1].appendChild(sourceObj);　_arr[1][1].style.background　=　sourceObj.style.background;　//　让背景色互相匹配。
　　　　_arr[1][2].style.cssText　=　"background:url('"　+　src_1_2　+　"')　repeat-y";
　　　　_arr[2][0].appendChild(img_2_0);
　　　　_arr[2][1].style.cssText　=　"background:url('"　+　src_2_1　+　"')　repeat-x";
　　　　_arr[2][2].appendChild(img_2_2);
　　　　
　　　　_arr[0][0].style.cssText　=　"width:25px;height:22px";　//　约速左上角列的宽高度
　　　　_arr[2][2].style.cssText　=　"width:25px;height:25px;";//　约速右下角
　　　　_table.style.border　=　_table.style.padding　=　_table.style.margin　=　_table.cellSpacing　=　_table.cellPadding　=　"0";
　　　　_table.style.height　=　"100%";　　　　　　　　　//　当targetObj有伸缩效果时，让table也跟着自动改变
　　　　
　　　　_table.setAttribute("id",　sourceObj.id　+　":frame:table");
　　　　targetObj.setAttribute("id",　sourceObj.id　+　":frame");
　　　　
　　　　targetObj.appendChild(_table);
　　　　parentObj.appendChild(targetObj);//　必要的，把新组件加到原始父组件下，或是document.body下
　　　　return　targetObj;
}