Demo学习： ClientEvents

ClientEvents

在控件的ClientEvents属性里嵌入JS代码，增加了开发的灵活性。

分别在TUniPanel和TUniTimer的 ClientEvents事件里添加了JS代码：

1. 通过JS代码来设置控件的属性：

function Onmousemove(sender, x, y)
{
    var W=MainForm.UniButton1.getWidth();
    var Y=sender.getHeight()-24; 
    MainForm.UniButton1.setPosition(x-W/2, Y);
}

function Onmousemove(sender, x, y)
{
      MainForm.UniLabel1.setPosition(x, y);
}

function OnClick(sender, e)
{
    MainForm.UniLabel1.setText('Click!');
}

function form.Onmousemove(sender, x, y)
{
    MainForm.UniEdit1.setValue(x+' : '+y);
}
function OnMouseout(sender, e)
{
    sender.setText('Out');
}

2. 使用Ajax进行一些数据操作：

//开始执行操作
procedure TMainForm.UniButton1Click(Sender: TObject);
begin
  Sleep(3000); 
end;
//正在执行操作
function OnAjaxRequest(sender, url, data)
{
  sender.setText('Ajax request in progress...'); 
  sender.setDisabled(true);
}
//操作完成，在需要处理数据同步时，可以在这里处理。
function OnAjaxCallback(sender, response)
{
  sender.setDisabled(false); 
  sender.setText('UniButton123');
}

3. 相应键盘事件：

function form.Onkeydown(sender, key, shift)
{
   var xy=MainForm.UniPanel1.getPosition(true);
   var x=xy[0];
   var y=xy[1];
   
   var inc=5;
   if (shift & 1) inc=10;    // shift
   if (shift & 4) inc=1;   // ctrl
   if (shift & 2) inc=20;   // alt
   
   switch(key) {
      case 40 : y+=inc; break;          
      case 38 : y-=inc; break;          
      case 37 : x-=inc; break;          
      case 39 : x+=inc; break;          
   }       
   
   if (y<0) y=0;
   if (x<0) x=0;
   
   if (y>MainForm.form.getHeight())          y=MainForm.form.getHeight();
   if (x>MainForm.form.getWidth()) x=MainForm.form.getWidth();
   
   MainForm.UniPanel1.setPosition(x, y);
}

ClientEvents有很多JS属性，自己多多研究。