功能分类: UI Controls Applab JavaScript 少儿编程
设置指定 id
控件在页面上显示的位置到 x,y
坐标,并设定其显示尺寸为 width
宽以及 height
高。
在 APP 应用里,有时需要移动页面上的某个控件,甚至修改其显示尺寸。所有的页面控件包括:button()、textInput()、textLabel()、dropDown()、checkbox()、radioButton()、image(),都可以使用 setPosition()
方法来移动它们并修改它们的尺寸。当然,如果只是需要设定它们的初始位置及初始尺寸,在 Applab 里的 设计
模式下可以更容易更直观地做到这一点。并且 设计
模式下,你还可以为控件进行字体、颜色、背景等设置。
// 小游戏:让你点不到
// 光标移到到图片上时,变化图片到随机位置
image("id", "gingerbread-man-running.jpg");
onEvent("id", "mouseover", function(event){
setPosition("id", randomNumber(0,400), randomNumber(0,560));
});
示例代码:小游戏 - 继续让你点不到 这次不仅变化位置到随机位置,还修改尺寸为随机尺寸。
// 小游戏:让你点不到
// 这次不仅变化位置到随机位置,还修改尺寸为随机尺寸
image("id", "gingerbread-man-running.jpg");
onEvent("id", "mouseover", function(event){
var newSize=randomNumber(50,100);
setPosition("id", randomNumber(0,400), randomNumber(0,560), newSize, newSize);
});
示例代码:继续找姜饼人 点击图片,找一下姜饼人
// 点击图片,找一下姜饼人
image("id", "gingerbread-man-running.jpg");
var randomXPosition=randomNumber(0,2)*100;
setPosition("id", randomXPosition+10, 170);
image("id1", "codeorg.jpg");
setPosition("id1", 10, 175);
image("id2", "codeorg.jpg");
setPosition("id2", 110, 175);
image("id3", "codeorg.jpg");
setPosition("id3", 210, 175);
onEvent("id1", "click", function(event){
hideElement("id1");
});
onEvent("id2", "click", function(event){
hideElement("id2");
});
onEvent("id3", "click", function(event){
hideElement("id3");
});
setPosition(id, x, y, width, height)
名称 | 类型 | 必需 | 参数描述 |
---|---|---|---|
id | string | Yes | 指定事件处理相关控件的 id 唯一标识。必须以字母开头,不能包含空格,可以包含字母、数字、减号 - 以及下划线 _ 。 |
x | number | Yes | 指定控件新位置的横轴坐标 |
y | number | Yes | 指定控件新位置的纵轴坐标 |
width | number | No | 指定控件宽度,单位为:像素 |
height | number | No | 指定控件高度,单位为:像素 |
没有返回值。只在显示结果页面体现代码执行前后变化。