标准:ECMAScript5 范围: (1)自定义控件中的JS的作用域在自定义控件内。 (2)每个控件的JS的为函数级。不同的自定义控件中使用var定义的相同变量名称不会被污染。 this对象: this对象是指当前自定义控件本身【即定义JS属性的控件】。同时this对象也是控件对象。 方法: (1)this.find("[controlName]") 查找子控件: 从当前控件的子控件中查找指定名称的子控件对象。并返回控件对象,若controlName对应的dom对象不存在,返回undefined。 (2) on([eventName],function) 控件事件绑定: a) eventName: 控件的事件名称,对应服务端控件事件类型。 b) function: 事件回调函数。函数参数对应UI事件列表中的 事件参数。 c) return:返回值用于控制是否向服务端提交事件。 true:触发服务端事件 false:不触发服务端事件(如果没有返回值,默认返回false) ui对象: ui.flush() 渲染界面。 在控件的布局和外观修改后,需要使用ui.flush方法来刷新界面显示。 UI事件列表: 组件类别 | | | | | | | value为输入的文本,on中的function使用function(value) | | | | press事件,on中的function使用function() | | | | press长按事件,on中的function使用function() | TouchPanel/TouchUserControl | | | press事件,on中的function使用function() | TouchPanel/TouchUserControl | | | press长按事件,on中的function使用function() | | | | value为选择状态,on中的function使用function(value) | | | | value为选择状态,on中的function使用function(value) | | | | value为选择索引,on中的function使用function(value) | | | | value为选择值,on中的function使用function(value) | | | | value为选择索引,on中的function使用function(value) | | | | value为选择索引,on中的function使用function(value) | | | | value为选择索引,on中的function使用function(value) | | | | value为选择的日期时间,on中的function使用function(value) | | | | value为选择的日期,on中的function使用function(value) | | | | press事件,on中的function使用function() |
| | | |
示例: 实现效果:在一个自定义控件中,分别添加1个Button,1个TextBox和1个Label,点击Button时,修改Button的文本的水平方向。焦点进入TextBox时,隐藏Button,离开TextBox时,显示Button,在TextBox的文本改变时,把改变的文本显示在Label上。 (1)新创建一个自定义控件(MobileUserControl),使用相对布局,添加一个是Button,Name为Button1,一个是TextBox,Name为TextBox1,一个Label,Name为Label1。 (2)在新创建的自定义控件(MobileUserControl)中的JS属性写入以下代码: - var btn = this.find("Button1");
- btn.on("Press", function () {
- if (btn.HorizontalAlignment == HorizontalAlignment.Left) {
- btn.HorizontalAlignment = HorizontalAlignment.Center;
- }
- else {
- btn.HorizontalAlignment = HorizontalAlignment.Left;
- }
- ui.flush();
- }
- );
- var txt = this.find("TextBox1");
- var lab = this.find("Label1");
- txt.on("TouchEnter", function () {
- btn.Visible = false;
- ui.flush();
- });
- txt.on("TouchLeave", function () {
- btn.Visible = true;
- ui.flush();
- });
- txt.on("TextChanged", function (value) {
- lab.Text = value;
- ui.flush();
- return true;
- })
复制代码
|