参考文章: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及更高版本