ITPub博客

首页 > 应用开发 > Javascript > ThingJS加入js的基本表单功能

ThingJS加入js的基本表单功能

Javascript 作者:朴所罗门 时间:2020-10-13 09:23:12 0 删除 编辑

js之表单事件中包括change事件,change事件当<input>、<select>、<textarea>的值发生变化时触发。ThingJS,不断加入js的基本功能,让3D开发更轻松!

如何结合2D图形面板和js语法来做3D开发?ThingJS做个好示范,教你着手开发不同物体的温度、雾效和iframe页面。官方新推出change事件的功能,对应各种3D效果元素的值的变化,方便在GUI(图形界面)手动操作,直接生成js代码。

Change事件指代一系列用于改变场景元素的界面组件,都有哪些组件呢?比如string组件、复选框组件、布尔开关组件、单选框组件、iframe组件,都可以一一加入开发序列。

下面就来一一解析一下。首先要绑定界面组件数据,再创建面板和添加相关组件,注意在创建过程中会通过一些颜色或者动画效果来动态呈现变化,包括变色、切换等。

创建面板

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 用于界面组件数据绑定
var  dataObj = {
     temperature:  '30' ,
     checkbox: {
         'car01' true ,
         'car02' false ,
         'car03' false ,
     },
     switch1:  false ,
     radio:  '首页' ,
     iframe:  'https://www.thingjs.com'
};
// 创建面板
var  panel = THING.widget.Panel({
     titleText:  '面板' ,
     hasTitle:  true ,
     width:  '300px'
});



添加string组件

官方示例对应温度的变化,通过文本修改来触发change事件。代码中绑定了beforechange,通过return语句终止当前函数并返回当前温度的值,change事件显示当前温度的返回值,面板中需要输入数字,并勾选所作用的物体对象。

1
2
3
4
5
6
7
8
9
10
// 添加 String 组件
var  temperature = panel.addString(dataObj,  'temperature' ).isChangeValue( true );
// 绑定 beforeChange 事件
temperature.on( 'beforeChange' function  (ev) {
     return  confirm( '改变温度设置' );
})
// 绑定 change 事件
temperature.on( 'change' function  (ev) {
     console.log( '当前温度为:'  + ev);
});



添加复选框组件

通过复选框来选择对象,加入颜色变化,直观呈现一个升温或者降温的效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 添加 复选框 组件
var  checkbox = panel.add(dataObj,  'checkbox' );
for  (let i = 0; i < 3; i++) {
     checkbox[i].on( 'beforeChange' function  (ev) {
         var  car = app.query(/car/)[i];
         if  (ev) {
             return  confirm( '取消 '  + car.name +  ' 红色' );
         }
         else  {
             return  confirm(car.name +  ' 变红' );
         }
     });
     checkbox[i].on( 'change' function  (ev) {
         var  car = app.query(/car/)[i];
         car.style.color = ev ?  '#ff0000'  null ;
     });
}



添加布尔开关组件

布尔值是“真” True 或“假” False 中的一个,在3D面板中是打开与关闭雾效,设置雾效还要考虑到颜色、距离等因素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 添加 布尔开关 组件
var  switch1 = panel.addBoolean(dataObj,  'switch1' ).caption( '雾效' );
switch1.on( 'beforeChange' function  (ev) {
     if  (ev) {
         return  confirm( '确定关闭雾效吗?' );
     }
     else  {
         return  confirm( '确定打开雾效吗?' );
     }
})
switch1.on( 'change' function  (ev) {
     if  (ev) {
         // 设置雾效果
         app.fog = { color:  '#c4c4c4' , near: 0, far: 150 };
     }
     else  {
         app.fog =  null ;
     }
})


添加单选框组件

用单选框实现切换,通过添加iframe组件,呈现切换后的页面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 添加 单选框 组件
var  radio = panel.addRadio(dataObj,  'radio' , [ '首页' '教程' ]);
radio.on( 'beforeChange' function  (ev) {
     if  (ev ==  '教程' ) {
         return  confirm( 'iframe 页面将切换到首页' );
     }
     else  {
         return  confirm( 'iframe 页面将切换到教程' );
     }
})
radio.on( 'change' function  (ev) {
     if  (ev ===  '首页' ) {
         dataObj.iframe =  "https://www.thingjs.com"
     }
     else  {
         dataObj.iframe =  "https://www.thingjs.com/guide/cn/tutorial_Introduce/index.html"
     }
})



添加iframe组件

1
2
// 添加 Iframe 组件
var  iframe = panel.addIframe(dataObj,  'iframe' ).setHeight( "400px" );



ThingJS,你的3D开发神器!


来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/69978212/viewspace-2726463/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2020-07-01

  • 博文量
    49
  • 访问量
    23301