APIClound从0开始写脉脉（4）-结束篇

在第三讲的时候因为突然浏览器挂了，直接写的东西全部不见了，所以第三讲的都是复制黏贴的。废话不多，进入最后的一讲。
第四讲其实是最简单的，因为所有的框架都搭好了，只要写入内容就ok了。上代码：

    function openHomeFrameGroup(num) {
        if("home" === curPageName){
            return;
        }

        curPageName = "home";

        //api.execScript({"frameName": "contacts", "script":"closeSelf();"});
        api.closeFrame({
            name: 'contacts'
        });
        var width=parseInt(window.getComputedStyle($api.byId("checkSt"),null).width);
        $api.byId('slider_statust').style.left=50+(width*0.2)+"px";    
        $api.byId('slider_statust').style.top=($api.byId('header').offsetHeight-10)+"px";
        var s = window.getComputedStyle($api.byId('main'), null);
        var height = parseInt(s.height);
        api.setFrameGroupAttr({name: 'jobsGroup', hidden: true});
        api.setFrameGroupAttr({name: 'myselfGroup', hidden: true});
        api.setFrameAttr({name: 'contacts', hidden: true});

        api.openFrameGroup({
            name: 'homeGroup',
            background: '#FFF',
            rect: {x: 0, y: $api.byId('header').offsetHeight, w: s.width, h: height},
            index: num,
            frames: [
                {
                    name: 'dynamic',
                    url: 'html/main_dynamic.html',
                    bounces: true,
                    opaque: true,
                    bgColor: '#fff'
                },
                {
                    name: 'anon',
                    url: 'html/main_anon.html',
                    bounces: true,
                    opaque: true,
                    bgColor: '#FFF'
                }
            ]
        }, function (ret) {
            if (ret.index == 0) {
                api.execScript({
                    name: api.winName,
                    script: 'slderbarCallback("home_bar",0,"checkSt")'
                })
            } else if (ret.index == 1) {
                api.execScript({
                    name: api.winName,
                    script: 'slderbarCallback("home_bar",100,"checkSt")'
                })
            }
        });
        api.setFrameGroupAttr({name: 'homeGroup', hidden: false});
}

function openJobsFrameGroup(num) {
        if("jobs" === curPageName){
            return;
        }

        curPageName = "jobs";

        //api.execScript({"frameName": "contacts", "script":"closeSelf();"});
        api.closeFrame({
            name: 'contacts'
        });

        var s = window.getComputedStyle($api.byId('main'), null);
        var height = parseInt(s.height);
        api.setFrameGroupAttr({name: 'homeGroup', hidden: true});
        api.setFrameGroupAttr({name: 'myselfGroup', hidden: true});
        api.setFrameAttr({name: 'contacts', hidden: true});
        api.openFrameGroup({
            name: 'jobsGroup',
            background: '#FFF',
            rect: {x: 0, y: $api.byId('header').offsetHeight+60, w: s.width, h: height-60},
            index: num,
            frames: [
                {
                    name: 'position',
                    url: 'html/jobs_position.html',
                    bounces: true,
                    opaque: true,
                    bgColor: '#fff'
                },
                {
                    name: 'talent',
                    url: 'html/jobs_talent.html',
                    bounces: true,
                    opaque: true,
                    bgColor: '#FFF'
                }
            ]
        }, function (ret) {

        });
        api.setFrameGroupAttr({name: 'jobsGroup', hidden: false});
    }

function openMyselfFrameGroup(num) {
        if("self" === curPageName){
            return;
        }

        curPageName = "self";

        //api.execScript({"frameName": "contacts", "script":"closeSelf();"});
        api.closeFrame({
            name: 'contacts'
        });
        var width=parseInt(window.getComputedStyle($api.byId("myCheckSt"),null).width);
        $api.byId('My_slider_status').style.left=(width*0.3-5)+"px";   
        $api.byId('My_slider_status').style.top=($api.byId('header').offsetHeight-10)+"px";
        var s = window.getComputedStyle($api.byId('main'), null);
        var height = parseInt(s.height);
        api.setFrameGroupAttr({name: 'homeGroup', hidden: true});
        api.setFrameGroupAttr({name: 'jobsGroup', hidden: true});
        api.setFrameAttr({name: 'contacts', hidden: true});
        api.openFrameGroup({
            name: 'myselfGroup',
            background: '#FFF',
            rect: {x: 0, y: $api.byId('header').offsetHeight, w: s.width, h: height},
            index: num,
            frames: [
                {
                    name: 'message',
                    url: 'html/messageCenter.html',
                    bounces: true,
                    opaque: true,
                    bgColor: '#fff'
                },
                {
                    name: 'setting',
                    url: 'html/mySetting.html',
                    bounces: true,
                    opaque: true,
                    bgColor: '#FFF'
                }
            ]
        }, function (ret) {
            if (ret.index == 0) {
                api.execScript({
                    name: api.winName,
                    script: 'slderbarCallback("myself",0,"myCheckSt")'
                })
            } else if (ret.index == 1) {
                api.execScript({
                    name: api.winName,
                    script: 'slderbarCallback("myself",162,"myCheckSt")'
                })
            }
        });
        api.setFrameGroupAttr({name: 'myselfGroup', hidden: false});
    }

    function openContactsFrame() {
        if("contact" === curPageName){
            return;
        }

        curPageName = "contact";

        var s = window.getComputedStyle($api.byId('main'), null);
        api.setFrameGroupAttr({name: 'jobsGroup', hidden: true});
        api.setFrameGroupAttr({name: 'myselfGroup', hidden: true});
        api.setFrameGroupAttr({name: 'homeGroup', hidden: true});
        api.closeFrame({"name": "contacts"});
        api.openFrame({
            name: "contacts",
            bounces: true,
            url: 'html/main_contacts.html',
            bgColor: "#ffffff",
            rect: {
                x: 0,
                y: 70,
//              y: $api.byId('header').offsetHeight,
                w: parseInt(s.width),
                h: parseInt(s.height)
            }
        });
        api.setFrameAttr({name: 'contacts', hidden: false});
    }

仔细观察上面的代码你会发现其实四个函数都是非常像的，所以我们只讲一个。最后一个是用到openFrame的函数，这个函数我发现会将我的顶部导航栏吃掉，现在还没想出解决办法。而且用这种方法的frame要每次都

api.closeFrame({
            name: 'contacts'
        });

关闭了才能在底部按钮栏显示出来，不然一直都是这个frame占着内容部分，怎么点底部导航栏都是这个内容。

if("home" === curPageName){
            return;
        }

        curPageName = "home";

这个判断是用来防止再次点击时再进行一次绘制，毕竟绘制是要耗时的。

window.getComputedStyle

这个方法是用来获取某个标签的所有css属性。

api.setFrameGroupAttr

这个是用来设置一个frameGroup的属性的东西，根据它的组名来区分的。

api.setFrameAttr

这个是设置一个frame的属性的方法，也是根据帧的名字，再在后面添加要修改的css属性。
这里的设置是，将所选定的一个frame组进行显示，其余在底部导航栏未选定的都隐藏起来。

api.openFrameGroup({
            name: 'homeGroup',
            background: '#FFF',
            rect: {x: 0, y: $api.byId('header').offsetHeight, w: s.width, h: height},
            index: num,
            frames: [
                {
                    name: 'dynamic',
                    url: 'html/main_dynamic.html',
                    bounces: true,
                    opaque: true,
                    bgColor: '#fff'
                },
                {
                    name: 'anon',
                    url: 'html/main_anon.html',
                    bounces: true,
                    opaque: true,
                    bgColor: '#FFF'
                }
            ]
        }, function (ret) {
            if (ret.index == 0) {
                api.execScript({
                    name: api.winName,
                    script: 'slderbarCallback("home_bar",0,"checkSt")'
                })
            } else if (ret.index == 1) {
                api.execScript({
                    name: api.winName,
                    script: 'slderbarCallback("home_bar",100,"checkSt")'
                })
            }
        });

之后就是对帧组选帧的操作了，上面的index属性就是选frame数组中的第几个的意思。rect属性就是左上角x，左上角y，宽度，高度这几个数字。
再后面紧接的就是一个函数，这个函数是用来对上面操作的js代码控制。

api.execScript

这个方法就是在name=某个帧的名字中的js代码引用。

基本的东西都已经讲完了。总的效果图如下：





总的代码