setPosition(id, x, y, width, height) 设置控件位置

功能分类: 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 指定控件高度,单位为:像素

返回值

没有返回值。只在显示结果页面体现代码执行前后变化。

提示说明

  • 使用这个方法,控件最左上角会被放置在设置的 (x,y) 坐标位置。也就是说通过这个方法设定的是控件最左上角这个点的坐标位置。注意:不是中心点。
  • 屏幕显示区域尺寸为 400 像素宽,560 像素高,但你可以将控件位置设置到屏幕显示区域之外,从而让控件不显示。

查看更多少儿编程教程、JavaScript 介绍

返回文档首页