起步软件技术论坛
搜索
 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 30421|回复: 21

界面控制

  [复制链接]

88

主题

9507

帖子

5135

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5135
QQ
发表于 2012-1-5 11:16:23 | 显示全部楼层 |阅读模式
通常我们需要对界面上的组件(例如:输入框input,按钮trigger)进行是否只读、是否显示、是否必填以及输入内容的控制。
推荐的方式是使用data组件的编辑规则。编辑规则是通过设置data中的概念或关系的只读,来控制显示组件是否只读,其它属性也是如此。
使用编辑规则的优点是:
1、和显示组件无关。例如将输入框input改为文本框textarea,不需要修改代码,编辑规则依然是有效的
2、设置概念的编辑规则,对整条记录生效。不用在界面中对每个组件进行单独控制。
3、编辑规则中的属性值不是只有true和false,是可以通过计算得到的。计算方法即可以通过设置表达式,也可以调用javascript函数,获得相应返回值。
关于编辑规则的具体用法参见X5快速开发指南。

当然,显示组件还有其它的一些属性是编辑规则不控制的,下面介绍几个使用javascript控制显示组件的方法。

102

主题

286

帖子

623

积分

高级会员

Rank: 4

积分
623
QQ
发表于 2019-3-25 17:19:05 | 显示全部楼层
zhaixin 发表于 2012-1-5 11:26
在model的XBLLoaded事件中添加一行代码即可

感觉没用,我用的是搜狗输入法,输入数字和英文时可以限制不能输入,但是可以输入中文

28

主题

113

帖子

180

积分

初级会员

Rank: 2

积分
180
发表于 2012-11-8 14:33:21 | 显示全部楼层
jishuang 发表于 2012-11-8 13:47
可以通过call调用,如call('setFilterByReadOnly'),其中setFilterByReadOnly是函数名

这个调用的js方法可以带参数吗?如果可以怎么传?

88

主题

9507

帖子

5135

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5135
QQ
 楼主| 发表于 2012-1-5 11:26:05 | 显示全部楼层

日期只能选择,不能输入

在model的XBLLoaded事件中添加一行代码即可
  1. mainActivity.mdDefaultXBLLoaded = function(event){
  2.     $(justep.xbl(日期框的id).input).bind('keydown',function(evt){evt.preventDefault();});
  3. };
复制代码

88

主题

9507

帖子

5135

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5135
QQ
 楼主| 发表于 2012-1-5 11:23:01 | 显示全部楼层

动态修改trigger的label

代码如下

2000版本及后续版本
justep.xbl("trigger1").setLabel("新标题");

1900以前版本
justep.xbl("trigger1").button.innerText = "新标题";

88

主题

9507

帖子

5135

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5135
QQ
 楼主| 发表于 2012-1-5 11:24:18 | 显示全部楼层

控制view是否显示

隐藏——$('#view1').css('display','none');
显示——$('#view1').css('display','block');
注意:view加载后才能使用

88

主题

9507

帖子

5135

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5135
QQ
 楼主| 发表于 2012-1-5 11:27:51 | 显示全部楼层

禁止键盘输入

  1. $(justep.xbl('input1').input).bind('keydown', function(evt){evt.preventDefault();});
复制代码

88

主题

9507

帖子

5135

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5135
QQ
 楼主| 发表于 2012-1-5 11:28:32 | 显示全部楼层

禁止鼠标右键菜单

  1. $(justep.xbl("input1").input).bind("contextmenu", function(e){return false;});
复制代码

88

主题

9507

帖子

5135

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5135
QQ
 楼主| 发表于 2012-1-5 11:29:53 | 显示全部楼层

控制input输入长度

  1. $(justep.xbl("input1").input).attr("maxlength",1);
复制代码
这样设置只能输入1个字符

88

主题

9507

帖子

5135

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5135
QQ
 楼主| 发表于 2012-1-5 11:34:48 | 显示全部楼层

显示空格

在w文件中<xhtml:a>aa</xhtml:a>&nbsp; <xhtml:a>bb</xhtml:a>

QQ截图20130106095720.png

88

主题

9507

帖子

5135

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5135
QQ
 楼主| 发表于 2012-1-5 11:37:27 | 显示全部楼层

设置焦点

X5的input组件
justep.xbl('input2').input.focus();

X5的smartFilter组件
justep.xbl('smartFilter1').getInnerInput().input.focus();

88

主题

9507

帖子

5135

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5135
QQ
 楼主| 发表于 2012-1-5 11:58:46 | 显示全部楼层

失去焦点

有时候,我们在输入框中输入内容后,点查询按钮执行查询,发现系统没有取到在输入框中刚刚输入的内容。这是因为输入框中内容只会在失去焦点时写入data组件,而点击按钮不会导致焦点离开输入框。因此,我们需要在按钮的单击事件中,先加入下面的代码,再写按钮的实现逻辑。

2000 sp1.9以前版本使用
xforms.blur();

2000 sp1.9以后版本使用
justep.XData.refreshControls();

这句代码会使界面上的组件失去焦点。
高级模式
B Color Image Link Quote Code Smilies

本版积分规则

小黑屋|手机版|X3技术论坛|Justep Inc.    

GMT+8, 2024-11-21 17:10 , Processed in 0.061651 second(s), 27 queries .

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表