WEB开发网
开发学院网页设计JavaScript 做自由落体运动的JSF组件,使用javascript打造富有... 阅读

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

 2010-09-14 13:44:06 来源:WEB开发网   
核心提示: 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;";// 约速右下角做自由落体运动的JSF组件,使用javascript打造富有个性的漂亮组件——QFaces
    _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;
}

上一页  1 2 3 4  下一页

Tags:自由落体 运动 JSF

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接