uil v1.0

uil.js is a lightweight ui for javascript with some svg. example

1 - init engine

var ui = new UIL.Gui( { css:'top:145px; left:50%;', size:300, center:true } );

2 - add value

ui.add('title', { name:'Title'});
ui.add('bool', { name:'Bool', callback:callback});
ui.add('color', { name:'Color', callback:callback, type:'html', value:0xff0000});
ui.add('color', { name:'Color', callback:callback, type:'rgba', value:[0,1,1,1]});
ui.add('slide', { name:'Slide', callback:callback, value:50});
ui.add('string', { name:'String', callback:callback, value:'welcome to uil'});
ui.add('list', { name:'List', callback:callback, list:['item1', 'item2', ...]});
ui.add('number', { name:'Number', callback:callback, value:20, min:0, max:10, precision:2, step:0.01 });
ui.add('number', { name:'Vector2', callback:callback, value:[0,0] });
ui.add('number', { name:'Vector3', callback:callback, value:[0,0,0] });
ui.add('number', { name:'Vector4', callback:callback, value:[0,0,0,0] });

3 - callback is simple function easy to define

var callback = function(value){ debug.innerHTML = value; }
// you can also set like that 
ui.add('number', { name:'Vector4', value:[0,0,0,0] }).onChange( function(v){ debug.innerHTML = v; } );

4 - you can reset all value

ui.clear();

5 - other examples

uil listen

uil stresstest

uil advanced



uil v1.0

uil.js是一个用于某些svg的javascript的轻量级ui。 示例

1 - 初始化引擎

var ui = new UIL.Gui( { css:'top:145px; left:50%;', size:300, center:true } );

2 - 添加值

ui.add('title', { name:'Title'});
ui.add('bool', { name:'Bool', callback:callback});
ui.add('color', { name:'Color', callback:callback, type:'html', value:0xff0000});
ui.add('color', { name:'Color', callback:callback, type:'rgba', value:[0,1,1,1]});
ui.add('slide', { name:'Slide', callback:callback, value:50});
ui.add('string', { name:'String', callback:callback, value:'welcome to uil'});
ui.add('list', { name:'List', callback:callback, list:['item1', 'item2', …]});
ui.add('number', { name:'Number', callback:callback, value:20, min:0, max:10, precision:2, step:0.01 });
ui.add('number', { name:'Vector2', callback:callback, value:[0,0] });
ui.add('number', { name:'Vector3', callback:callback, value:[0,0,0] });
ui.add('number', { name:'Vector4', callback:callback, value:[0,0,0,0] });

3 - 回调是简单的功能易于定义

var callback = function(value){ debug.innerHTML = value; }
// you can also set like that
ui.add('number', { name:'Vector4', value:[0,0,0,0] }).onChange( function(v){ debug.innerHTML = v; } );

4 - 您可以重置所有值

ui.clear();

5 - 其他示例

uil listen

uil stresstest

uil高级




相关问题推荐