BUI BUIlive使用手册

BUI基础-方法和事件

2019-11-20  本文已影响0人  学术报告板

控件的方法

由于BUI的控件是基于原型链的,所以BUI中控件的方法都是在prototype上的,可以调用自己的或者父控件定义的方法。

控件的事件

控件的事件是由Observable类定义的,所有的控件都是此类的子类,所以Observable的属性和方法,所有控件都支持。

Observable类的方法的API在最下面,主要有以下几个:

  1. on : 注册事件
  2. off: 移除事件
  3. fire:触发事件

<pre class="prettyprint linenums" style="padding: 8px; background-color: rgb(247, 247, 249); border: 1px solid rgb(225, 225, 232); margin-top: 8px; box-shadow: rgb(251, 251, 252) 40px 0px 0px inset, rgb(236, 236, 240) 41px 0px 0px inset; color: rgb(51, 51, 51); font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">

  1. <script>

  2. var list = new List({

  3. //...

  4. });

  5. list.render();

  6. function callback(){}

  7. //注册事件

  8. list.on('itemclick',callback);

  9. //触发事件

  10. list.fire('itemclick');

  11. //移除事件

  12. list.off('itemclick',callback);

  13. </script>

</pre>

属性与方法和事件

在上一章节里我们详细的讲述了属性,属性的设置和获取有几个相关的方法:

  1. get : 获取属性
  2. set : 设置属性,触发属性更改事件
  3. setInternal : 设置属性,不触发属性更改事件

在设置属性值时,会触发2个事件,beforeXxxChagne 和 afterXxxChange事件

<pre class="prettyprint linenums" style="padding: 8px; background-color: rgb(247, 247, 249); border: 1px solid rgb(225, 225, 232); margin-top: 8px; box-shadow: rgb(251, 251, 252) 40px 0px 0px inset, rgb(236, 236, 240) 41px 0px 0px inset; color: rgb(51, 51, 51); font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">

  1. <script>

  2. //构造类A

  3. var A = function(config){

  4. A.superclass.constructor.call(this,config); //将自己的配置项传递到BUI.Base的构造函数中

  5. };

  6. //定义属性

  7. A.ATTRS = {

  8. a : {

  9. },

  10. b : {

  11. }

  12. };

  13. BUI.extend(A,BUI.Base); //使A继承BUI.Base,支持属性

  14. var a = new A({ //创建对象

  15. a : 'a',

  16. b : 'b',

  17. c : 'c'

  18. });

  19. a.on('beforeAChange',function(ev){

  20. alert(ev.newVal + ev.prevVal);

  21. });

  22. a.on('beforeCChange',function(ev){

  23. alert(ev.newVal + ev.prevVal);

  24. });

  25. a.get('a'); //'a'

  26. a.set('a','new a'); //触发beforeAChange,触发afterAchange

  27. a.get('a'); //new a

  28. a.setInternal('a','new a1'); //不触发任何事件

  29. a.get('a'); //new a1

  30. a.get('c'); // c

  31. a.set('c','new c');

  32. </script>

</pre>

事件的API

下面只是简单的列表,详细信息请查看API文档

下一步学习

BUI的方法和事件学习完成后,你可以去看一下如何组织模块CMD组织模块,然后进入到BUI控件编写的学习中。

上一篇下一篇

猜你喜欢

热点阅读