label和slideimage共存|用得到的就拿去

要求：Label标签置于slideimage之上并透明
限制：因为label文本标签和slideimage标签并不是父级和子级关系，所以不能内置到slideimage里
方法：在label标签上添加position和relative两个属性，并定义好slideimage的id属性
代码： 

<label style="background:white;alpha:0.6;corner-radius:20;" position="bottomcenter" relative="slideimage">店主亲自护送小主来到您的身边 保证小主健康活泼~</label>
<slideimage id="slideimage" style="background:black;height:197" indicatorPosition="right" fillwidth="true">
    <item src="http://pic36.nipic.com/20131125/8821914_094008340001_2.jpg"/>
</slideimage>

 
position属性包括topleft、topcenter、topright、middleleft、middleright、bottomleft、bottomcenter、bottomright、aboveleftof九个位置。relative的值对应目标控件的id属性。

如图1，点击title里的左侧图标出现图2所示的菜单栏也可以使用position和relative两个属性，同时在图标上添加onclick点击事件
Js代码：

var menu_status = 0;
function openmenu(){
	if (menu_status==0){
		$('button1').css('display:block');
		$('button2').css('display:block');
		$('button3').css('display:block');
        $('button4').css('display:block');
        $('button5').css('display:block');
        $('button6').css('display:block');
        menu_status = 1;
	}else {
        $('button1').css('display:none');
        $('button2').css('display:none');
        $('button3').css('display:none');
        $('button4').css('display:none');
        $('button5').css('display:none');
        $('button6').css('display:none');
        menu_status = 0;
    }
}

布局代码：

<label id="button1" style="display:none" position="topleft" relative="slideimage">用户信息</label>
<label id="button2" style="display:none" position="topcenter" relative="slideimage">用品保修</label>
<label id="button3" style="display:none" position="topright" relative="slideimage">自取地址</label>
<label id="button4" style="display:none" position="topleft" relative="slideimage">客服咨询</label>
<label id="button5" style="display:none" position="topcenter" relative="slideimage" onclick="$page.open('product.xml')">宠物寄养</label>
<label id="button6" style="display:none" position="topright" relative="slideimage">我要加盟</label>
<slideimage id="slideimage" style="background:black;height:197" indicatorPosition="right" fillwidth="true">
    <item src="http://pic36.nipic.com/20131125/8821914_094008340001_2.jpg"/>
</slideimage>

图1   
 
图2 


代码编辑点击-> 爱码哥移动应用开发平台