APICloud从0开始写脉脉（3）顶部导航栏

参考文章：http://community.apicloud.com/bbs/forum.php?mod=viewthread&tid=442
第三讲我们一起去探讨一下顶部的导航栏，这部分的js代码比较多，也比较难，因为大多数是使用了api那个函数库。废话不多说，马上进入第三讲。

<div id="header">
            <input type="radio" name="headers" id="iheader_home" checked="true"/>
            <div id="header_home">
                <a id="back_home" tapmode="" onclick="openSearch()" class="search"></a>
                <a tapmode="" onclick="slderbar('homeGroup',0)" id="checkSt" class="flex2" style="text-align:center">实名动态</a>
                <a tapmode="" onclick="slderbar('homeGroup',1)" class="flex2" style="text-align:center">匿名八卦</a>
                <a id="load_home" class="gossip" tapmode="" onclick="openScanner()"></a>
                <div class="slider_status" id="slider_statust">
                    <span id="home_bar"></span>
                </div>
            </div>
            <input type="radio" name="headers" id="iheader_jobs"/>
            <div id="header_jobs" style="-webkit-box-orient: vertical;height:75px">
                <ul class="flex1">
                    <li style="-webkit-box-flex:5;" onclick="<!--opacity(this)-->">
                        <input type="text" class="search-input" tapmode="search-inputActive" onclick="openSearch()" />
                        <span class="search-advertise" id="search-advertise1"></span>
                    </li>
                    <li style="width:60px" class="add-publish" tapmode="" onclick="openPicture()">
                    </li>
                </ul>
                <ul style="background-color:#f0f0f0;height:30px;line-height:30px">
                    <li tapmode="" onclick="slderbar('jobsGroup',0)" class="flex2" style="color:#000;text-align:center;border-right:1px solid #fff">
                        看职业
                    </li>
                    <li tapmode="" onclick="slderbar('jobsGroup',1)" class="flex2" style="color:#000;text-align:center">
                        招人才
                    </li>
                </ul>
            </div>
            <input type="radio" name="headers" id="iheader_contacts" />
            <div id="header_contacts">
                <ul>
                    <li style="-webkit-box-flex:5;" onclick="<!--opacity(this)-->">
                        <input type="text" class="search-input" tapmode="search-inputActive" onclick="openSearch()"/>
                        <span class="search-advertise" id="search-advertise2"></span>
                    </li>
                    <li style="width:60px" class="add-package" tapmode="" onclick="openContacts()">
                    </li>
                </ul>
            </div>
            <input type="radio" name="headers" id="iheader_myself" />
            <div id="header_myself" style="text-align:center">
                <a tapmode="" onclick="slderbar('myselfGroup',0)" id="myCheckSt" class="flex2" style="color:#ffffff">
                    消息中心
                </a>
                <a tapmode="" onclick="slderbar('myselfGroup',1)" class="flex2" style="color:#ffffff">
                    个人设置
                </a>
                <div class="slider_status" style="left:42px;" id="My_slider_status">
                    <span id="myself"></span>
                </div>
            </div>
        </div>

这里是以input+div的形式来做的，根据input是否被选定而使input紧接的div是否显示出来。
这里的部分与第二讲的差不多，这里就不详细说了。

ul {
            width: 100%;
            list-style: none;
            display: -webkit-box;
            display: box;
        }
        .input-search{
            margin-top: 6%;
            height: 56%;
            background: url('../image/btn_search_bg.png') left center no-repeat no-repeat;
            background-size: 2em;
            margin-left: 1em;
            border: 1px solid #bebebe;
            background-color: rgb(195, 172, 207);
            border-radius: 51px;
        }
        .search-input {
            margin-left: 7px;
            width: 90%;
            height: 30px;
            border: 0;
            border-radius: 13px;
            background: #0070B9;
            /*去除系统默认的样式*/
            -webkit-appearance: none;
            outline: #ffffff;
        }
        .search-inputActive{
           background-color: #013B62;
        }
        .search-advertise {
            background-size: 26px;
            position: absolute;
            left: 8px;
            top: 11px;
            width: 30px;
            height: 30px;
            background-image: url("image/btn_search_bg.png");
            background-repeat: no-repeat no-repeat;
        }

        .add-package {
            background-image: url("image/btn_add_connection_normal.png");
            background-repeat: no-repeat no-repeat;
            background-position: center center;
        }

        .add-publish {
            background-image: url("image/job_publish_select.png");
            background-repeat: no-repeat no-repeat;
            background-position: center center;
            -webkit-background-size: 30px;
        }

        #header{
            text-align:center;
            background-color:#028BE6;
            color:#fff;
            width:100%;
            height:2.8125em;
            -webkit-background-size:auto 2.8125em;
        }
        #header > div{
            height:2.8125em;
            line-height:2.8125em;
        }
        #header_home{
            display:-webkit-box;
            position:relative;
        }
        #header > div > a.active{
            background-color:transparent;
            opacity:0.5;
        }
        #header .search{
            width:60px;
            background-image:url(image/btn_search_bg.png);
            -webkit-background-size:30px;
        }
        #header .gossip{
            width:60px;
            background-image:url(image/btn_gossip_bg.png);
            -webkit-background-size:30px;
        }
        #header input[type="radio"] + div{
            display:none;
        }
        #header input[type="radio"]:checked + div{
            display:-webkit-box;
        }
        #header > div > a{
            height:2.8125em;
            background-repeat:no-repeat;
            background-position:center;
            overflow:hidden;
        }

上面的代码是css，因为大多数都是重复的，所以就一起讲吧。

语法：
display：none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | run-in | box | inline-box | flexbox | inline-flexbox | flex | inline-flex

默认值：inline

适用于：所有元素

继承性：无

动画性：否

计算值：指定值，除浮动，绝对定位和根元素外

媒体：视觉
取值：
none： 隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间 
inline： 指定对象为内联元素。 
block： 指定对象为块元素。 
list-item： 指定对象为列表项目。 
inline-block： 指定对象为内联块元素。（CSS2） 
table： 指定对象作为块元素级的表格。类同于html标签<table>（CSS2） 
inline-table： 指定对象作为内联元素级的表格。类同于html标签<table>（CSS2） 
table-caption： 指定对象作为表格标题。类同于html标签<caption>（CSS2） 
table-cell： 指定对象作为表格单元格。类同于html标签<td>（CSS2） 
table-row： 指定对象作为表格行。类同于html标签<tr>（CSS2） 
table-row-group： 指定对象作为表格行组。类同于html标签<tbody>（CSS2） 
table-column： 指定对象作为表格列。类同于html标签<col>（CSS2） 
table-column-group： 指定对象作为表格列组显示。类同于html标签<colgroup>（CSS2） 
table-header-group： 指定对象作为表格标题组。类同于html标签<thead>（CSS2） 
table-footer-group： 指定对象作为表格脚注组。类同于html标签<tfoot>（CSS2） 
run-in： 根据上下文决定对象是内联对象还是块级对象。（CSS3） 
box： 将对象作为弹性伸缩盒显示。（伸缩盒最老版本）（CSS3） 
inline-box： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本）（CSS3） 
flexbox： 将对象作为弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3） 
inline-flexbox： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3） 
flex： 将对象作为弹性伸缩盒显示。（伸缩盒最新版本）（CSS3） 
inline-flex： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）（CSS3） * CSS3新增属性可能存在描述错误及变更，仅供参考，持续更新

语法：
background-size：<bg-size> [ , <bg-size> ]*

<bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain

默认值：auto

适用于：所有元素

继承性：无

动画性：是，除非使用值为关键字

计算值：指定值
取值：
<length>： 用长度值指定背景图像大小。不允许负值。 
<percentage>： 用百分比指定背景图像大小。不允许负值。 
auto： 背景图像的真实大小。 
cover： 将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。 
contain： 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。 说明：
检索或设置对象的背景图像的尺寸大小。 
该属性提供2个参数值(特性值cover和contain除外)。 
如果提供两个，第一个用于定义背景图像的宽度，第二个用于定义背景图像的高度。 
如果只提供一个，该值将用于定义背景图像的宽度，第2个值默认为auto，即高度为auto，此时背景图以提供的宽度作为参照来进行等比缩放。 
对应的脚本特性为backgroundSize。 

语法：
margin：[ <length> | <percentage> | auto ]{1,4}

默认值：看每个独立属性

适用于：所有元素，除非 table | inline-table | table-caption 的表格类元素之外

继承性：无

动画性：是

计算值：看每个独立属性

相关属性：[ margin-top ] || [ margin-right ] || [ margin-bottom ] || [ margin-left ]
取值：
auto： 水平（默认）书写模式下，margin-top/margin-bottom计算值为0，margin-left/margin-right取决于可用空间。详见：margin系列之keyword auto 
<length>： 用长度值来定义外补白。可以为负值 
<percentage>： 用百分比来定义外补白。水平（默认）书写模式下，参照其包含块 width 进行计算，其它情况参照 height ，可以为负值 说明：
检索或设置对象四边的外延边距。 
如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。 
如果只提供一个，将用于全部的四边。 
如果提供两个，第一个用于上、下，第二个用于左、右。 
如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。 
非替代(non-Replaced)行内元素可以使用该属性设置左、右两边的外补丁；若要设置上、下两边的外补丁，必须先使该对象表现为块级或内联块级。 
外延边距始终透明。 

语法：
border-radius：[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

默认值：看每个独立属性

适用于：所有元素

继承性：无

动画性：看每个独立属性

计算值：看每个独立属性
取值：
<length>： 用长度值设置对象的圆角半径长度。不允许负值 
<percentage>： 用百分比设置对象的圆角半径长度。不允许负值 说明：
设置或检索对象使用圆角边框。提供2个参数，2个参数以“/”分隔，每个参数允许设置1~4个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数 
水平半径：如果提供全部四个参数值，将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。 
如果只提供一个，将用于全部的于四个角。 
如果提供两个，第一个用于上左(top-left)、下右(bottom-right)，第二个用于上右(top-right)、下左(bottom-left)。 
如果提供三个，第一个用于上左(top-left)，第二个用于上右(top-right)、下左(bottom-left)，第三个用于下右(bottom-right)。 
垂直半径也遵循以上4点。 
对应的脚本特性为borderRadius。 

语法：
outline：<' outline-width '> || <' outline-style '> || <' outline-color '>

默认值：看每个独立属性

适用于：所有元素

继承性：无

动画性：看每个独立属性

计算值：看每个独立属性

相关属性: <' outline-offset '>
取值：
<' outline-width '>： 指定轮廓边框的宽度。 
<' outline-style '>： 指定轮廓边框的样式。 
<' outline-color '>： 指定轮廓边框的颜色。 说明：
复合属性。设置或检索对象外的线条轮廓。outline画在 <' border '> 外面 
outlines相关属性不占据布局空间，不会影响元素的尺寸； 
outlines可能是非矩形； 
不允许类似 <' border '> 属性那样能将自身拆分为 <' border-top '> , <' border-right '> , <' border-bottom '> , <' border-left '> 
对应的脚本特性为outline。 

语法：
appearance：none | button | button-bevel ...

默认值：none

适用于：所有元素

继承性：无

动画性：否

计算值：指定值
取值：
none： 去除系统默认appearance的样式 
button： 以按钮的风格渲染 
button-arrow-down： button-arrow-next： button-arrow-previous： button-arrow-up： button-bevel： button-focus： caps-lock-indicator： caret： checkbox： 以复选框的风格渲染 
checkbox-container： checkbox-label： checkmenuitem： default-button： dualbutton： groupbox： listbox： 以列表框的风格渲染 
listitem： 以列表项的风格渲染 
media-fullscreen-button： media-mute-button： media-play-button： media-seek-back-button： media-seek-forward-button： media-slider： media-sliderthumb： menuarrow： menubar： menucheckbox： menuimage： menuitem： menuitemtext： menulist： menulist-button： menulist-text： menulist-textfield： menupopup： menuradio： menuseparator： meterbar： meterchunk： progressbar： 以进度条的风格渲染 
progressbar-vertical： 以垂直进度条的风格渲染 
progresschunk： 以进度块的风格渲染 
progresschunk-vertical： 以垂直进度块的风格渲染 
push-button： radio： 以单选框的风格渲染 
radio-container： radio-label： radiomenuitem： resizer： resizerpanel： scale-horizontal： scalethumbend： scalethumb-horizontal： scalethumbstart： scalethumbtick： scalethumb-vertical： scale-vertical： scrollbarbutton-up： 以滚动条按钮-上的风格渲染 
scrollbarbutton-right： 以滚动条按钮-右的风格渲染 
scrollbarbutton-down： 以滚动条按钮-下的风格渲染 
scrollbarbutton-left： 以滚动条按钮-左的风格渲染 
scrollbargripper-horizontal： scrollbargripper-vertical： scrollbarthumb-horizontal： 以水平滚动条滑块的风格渲染 
scrollbarthumb-vertical： 以垂直滚动条滑块的风格渲染 
scrollbartrack-horizontal： 以水平滚动条拖动区域的风格渲染 
scrollbartrack-vertical： 以垂直滚动条拖动区域的风格渲染 
searchfield： 以搜索框的风格渲染 
searchfield-cancel-button： 以搜索框取消按钮的风格渲染 
searchfield-decoration： searchfield-results-button： searchfield-results-decoration： separator： sheet： slider-horizontal： sliderthumb-horizontal： sliderthumb-vertical： slider-vertical： spinner： spinner-downbutton： spinner-textfield： spinner-upbutton： splitter： square-button： statusbar： statusbarpanel： tab： 以照选项卡标签的风格渲染 
tabpanel： 以照选项卡区域的风格渲染 
tabpanels： tab-scroll-arrow-back： tab-scroll-arrow-forward： textarea： 以多行文本框的风格渲染 
textfield： 以单行行文本框的风格渲染 
textfield-multiline： toolbar： toolbarbutton： toolbarbutton-dropdown： toolbargripper： toolbox： tooltip： 以气泡提示的风格渲染 
treeheader： treeheadercell： treeheadersortarrow： treeitem： treeline： treetwisty： treetwistyopen： treeview： 说明：
设置或检索外观按照本地默认样式 
如果你想去除元素本身的外观并进行自定义，可以设置为none 
对应的脚本特性为appearance。 

语法：
position：static | relative | absolute | fixed | center | page | sticky

默认值：static

适用于：除display属性定义为table-column-group | table-column之外的所有元素

继承性：无

动画性：否

计算值：指定值

媒体：视觉
取值：
static： 对象遵循常规流。此时4个定位偏移属性不会被应用。 
relative： 对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。 
absolute： 对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。 
fixed： 与absolute一致，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。 
center： 与absolute一致，但偏移定位是以定位祖先元素的中心点为参考。盒子在其包含容器垂直水平居中。（CSS3） 
page： 与absolute一致。元素在分页媒体或者区域块内，元素的包含块始终是初始包含块，否则取决于每个absolute模式。（CSS3） 
sticky： 对象在常态时遵循常规流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。（CSS3） * CSS3新增属性可能存在描述错误及变更，仅供参考，持续更新

接下来是js的代码：
获取图片代码：

function openPicture(){
        api.getPicture({
            sourceType: 'library',
            encodingType:   'png',
            mediaValue: 'pic',
            destinationType:    'url',
            allowEdit:  true,
            quality:    50,
            targetWidth:100,
            targetHeight:100,
            saveToPhotoAlbum:   false
        },  function(ret,   err){
            if  (ret)   {
                api.alert({msg:(ret.data+'时长'+ret.duration+'s')});
            }   else{
                api.alert({msg:err.msg});
            };
        });
    }

这个其实就是官方的原生代码。

getPicture
通过系统相册或拍照获取图片和视频

getPicture({params}, callback(ret, err))

params

sourceType：

类型：字符串
默认值：library
描述：（可选项）图片源类型，从相册、图片库或相机获取图片（详见图片源类型常量）
encodingType：

类型：字符串
默认值：png
描述：（可选项）返回图片类型，jpg或png（详见图片编码类型常量）
mediaValue：

类型：字符串
默认值：pic
描述：（可选项）媒体类型，图片或视频（详见媒体类型常量）
destinationType：

类型：字符串
默认值：url
描述：（可选项）返回数据类型，指定返回图片地址或图片经过base64编码后的字符串（详见图片数据格式常量）
direction：

类型：字符串
默认值：rear
描述：（可选项）选择前置或后置摄像头，取值范围（front、rear），只支持iOS
allowEdit：

类型：布尔
默认值：false
描述：（可选项）是否可以选择图片后进行编辑，支持iOS及部分安卓手机
quality：

类型：数字
默认值：50
描述：（可选项）图片质量，只针对jpg格式图片（0-100整数）
videoQuality：

类型：字符串
默认值：medium
描述：（可选项）视频质量，取值范围(low、medium、high)，只支持iOS
targetWidth：

类型：数字
默认值：原图宽度
描述：（可选项）压缩后的图片宽度，图片会按比例适配此宽度
targetHeight：

类型：数字
默认值：原图高度
描述：（可选项）压缩后的图片高度，图片会按比例适配此高度
saveToPhotoAlbum：

类型：布尔
默认值：false
描述：（可选项）拍照或录制视频后是否保存到相册
callback(ret, err)

ret：

类型：JSON 对象
内部字段：
{
    data:"",                //图片路径
    base64Data:"",          //base64数据，destinationType为base64时返回
    duration:0              //视频时长（数字类型）
}
err：

类型：JSON 对象
内部字段：
{
    msg:""    //错误描述
}
示例代码

api.getPicture({
    sourceType: 'camera',
    encodingType: 'jpg',
    mediaValue: 'pic',
    destinationType: 'url',
    allowEdit: true,
    quality: 50,
    targetWidth: 100,
    targetHeight: 100,
    saveToPhotoAlbum: false
}, function(ret, err) {
    if (ret) {
        alert(JSON.stringify(ret));
    } else {
        alert(JSON.stringify(err));
    }
});
补充说明

获取图片

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

获取二维码代码：

function openScanner(){
        var obj = api.require('scanner');
        obj.open(function(ret,err) {
            api.alert({
                title: '扫描结果',
                msg: ret.msg
            });
        });
    }

这里直接引用APP中添加上的scanner模块给obj。

function openContacts(){
        api.openContacts(
            function(ret,err){
                if(ret.status){
                    var msg =   '姓名:'+ret.name+'--电话:'+ret.phone;
                    api.alert({msg:msg});
                }else{
                    api.alert({msg:err.msg});
                };
            }
        );
    }

openContacts
在应用内打开系统通讯录界面选择联系人

openContacts(callback(ret, err))

callback(ret, err)

ret：

类型：JSON 对象
内部字段：

{
    status:true,             //操作成功状态值
    name:"",                 //姓名
    phone:""                 //电话号码
}
err：

类型：JSON 对象
内部字段：
{
    msg:""    //错误描述
}
示例代码

api.openContacts(function(ret, err) {
    if (ret && ret.status) {
        var name = ret.name;
        var phone = ret.phone;
    } else {

    }
});
补充说明

打开通讯录界面

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本