如何从客户端处理程序中移动弹出窗口？

问题描述

我有一个模拟弹出窗口的代码（），这是由客户端处理程序触发的。
我想让这个弹出窗口出现在触发它的按钮附近，但是用我看到的脚本我看不到移动窗口的方法。
代码如下，应用程序，if有人对我应该如何重新组织或更改脚本有所了解，以便弹出窗口显示在触发流程的按钮附近？

  var choice = [' - '，'Choice 1'，'Choice 2'，'Choice 3'，'Choice 4']; // var定义
 
函数doGet（）{
 var app = UiApp.createApplication（）。setStyleAttribute（background，beige）; 
 
 app.add（createMaskPanel _（））; //这是用来使弹出面板模态
 
 var mainPanel = app.createVerticalPanel（）。setStyleAttributes（{'padding' ：'15'}）; 
 app.add（mainPanel）; 
 // idx保存按下按钮的索引值
 var idx = app.createTextBox（）。setId（'idx'）。setName（'idx'）。setVisible（false）; 
 mainPanel.add（idx）; 
 //为弹出窗口创建一个面板并添加您的弹出元素
 var popup = app.createVerticalPanel（）。setId（'popup'）。setVisible（false）
 .setStyleAttributes（
 {'position'：'fixed'，
'border'：'1px solid brown'，
'padding'：'15'，
'background'：'beige'，
'top'：'150PX'，
'left'：'300PX'，
'width'：'200'，
'height'：'120'，
 'zIndex'：'2'}）; 
 popup.add（app.createLabel（'Select your''）。setId（'label'））; 
 var list = app.createListBox（）。setId（'ppValue'）.setName（'ppValue'）.setWidth（'200'）
 .addItem（choice [0]，'0'）。 addItem（choice [1]，'1'）。addItem（choice [2]，'2'）。addItem（choice [3]，'3'）。addItem（choice [4]，'4'）; 
 popup.add（list）; 
 var valHandler = app.createServerHandler（'showVal'）。addCallbackElement（mainPanel）.addCallbackElement（popup）;; 
 popup.add（app.createButton（'Close / confirm'）。addClickHandler（valHandler））; 
 app.add（popup）; 
 var mask = app.getElementById（'mask'）
 var ppHandler = app.createClientHandler（）。forTargets（[popup，mask]）。setVisible（true）
 
 var flex = app.createFlexTable（）
 for（nn = 1; nn  flex.setText（nn，0，'Item nr'+ nn）
 var setHeight（'26'）。setWidth（'150'）.setId（'val'+ nn）.setName（'val'+ nn）
 flex.setWidget（nn，1）text = app.createTextBox ，文本）; 
 var handler = app.createClientHandler（）。forTargets（idx）.setText（nn）.forTargets（text）.setText（'suggestion =？'）; 
 flex.setWidget（nn，2，app.createButton（'✐'）。setHeight（'26'）.setId（'btn'+ nn）.addClickHandler（handler）.addClickHandler（ppHandler））
} 
 mainPanel.add（flex）; 
返回应用程序; 
} 
 
函数createMaskPanel _（）{//当UI加载时调用，最初它将被忽略。它需要变得可见
 var app = UiApp.getActiveApplication（）; 
 var mask = app.createVerticalPanel（）。setId（'mask'）.setSize（'100％'，'100％'）// maskPanel来掩饰ui 
 .setStyleAttributes（{
'backgroundColor'：'＃F0F0F0'，
'position'：'fixed'，
'top'：'0'，
'left'：'0'，
 'zIndex'：'1'，
'opacity'：'0.4'}）。setVisible（false）; 
 mask.add（app.createLabel（'POPUP'）
 .setStyleAttribute（'color'，'＃F0F0F0'）
 .setStyleAttribute（'opacity'，'0.6'））; 
返回掩码; 
} 
 
 function showVal（e）{
 var app = UiApp.getActiveApplication（）; 
 var source = e.parameter.idx 
 var value = app.getElementById（'val'+ source）
 value.setText（'choice value ='+ choice [e.parameter.ppValue ]）
 var popup = app.getElementById（'popup'）
 var mask = app.getElementById（'mask'）
 popup.setVisible（false）
 mask.setVisible（假）
退货应用程序
} 
  

---

编辑：由于服务器处理程序似乎是我尝试使用的唯一方式，因此该应用程序是可查看的和（最终？）代码在info下面。

  var choice = [' - '，'Choice 1'，'Choice 2'，'Choice 3'，'Choice 4'，'Choice 5'，'Choice 6 '，'Last choice！']; // var定义
 
函数doGet（）{
 var app = UiApp.createApplication（）。setStyleAtt ribute（背景，米色）; 
 app.add（createMaskPanel _（））; //这是用来使弹出面板模态
 var top ='100PX'
 var left ='265PX'
 var mainPanel = app.createVerticalPanel（）。setStyleAttributes（{'padding'：'15'}）; 
 app.add（mainPanel）; 
 //项目定义
 var idx = app.createTextBox（）。setId（'idx'）。setName（'idx'）。setVisible（false）; 
 mainPanel.add（idx）; 
 //为弹出窗口创建一个面板并添加您的弹出元素
 var popup = app.createVerticalPanel（）。setId（'popup'）。setVisible（false）
 .setStyleAttributes（
 {'position'：'fixed'，
'border'：'1px solid brown'，
'padding'：'10'，
'background'：'beige'，
'top'：top，
'left'：left，
'width'：'200'，
'height'：'110'，
'zIndex'： '2'}）; 
 popup.add（app.createLabel（'Select your''）。setId（'label'））; 
 var list = app.createListBox（）.setId（'ppValue'）.setName（'ppValue'）.setWidth（'160'）
 for（c in choice）{list.addItem（choice [ c]，c）} 
 popup.add（list）; 
 var valHandler = app.createServerHandler（'showVal'）。addCallbackElement（mainPanel）.addCallbackElement（popup）;; 
 popup.add（app.createButton（'Close / confirm'）。addClickHandler（valHandler））; 
 app.add（popup）; 
 $ b $ var idxHandler = app.createServerHandler（'setidx'）。addCallbackElement（mainPanel）
 
 
 var flex = app.createFlexTable（）
 for nn = 1; nn  flex.setText（nn，0，'Item nr'+ nn）
 flex.setWidget（nn，1，app.createTextBox（）。 setPixelSize（180,26）.setId（ 'VAL' + NN）.setName（ 'VAL' + NN））; 
 flex.setWidget（nn，2，app.createButton（'✐'）。setHeight（'26'）.setId（'btn'+ nn）.addClickHandler（idxHandler））
} 
 mainPanel.add（flex）; 
返回应用程序; 
} 
 
函数setidx（e）{
 var app = UiApp.getActiveApplication（）; 
 var idx = app.getElementById（'idx'）
 var idxval = Number（e.parameter.source.replace（/ [az] / g，''））
 idx.setValue （idxval）; 
 var top = -30 + 38 * idxval +'PX'
 var left ='265PX'
 var popup = app.getElementById（'popup'）
 var mask = app。 getTelementById（'mask'）
 var label = app.getElementById（'label'）。setText（'Select your choice（item'+ idxval +'）'）
 var value = app.getElementById（'val '+ idxval）
 value.setText（'suggestion =？'）
 popup.setVisible（true）
 mask.setVisible（true）
 popup.setStyleAttributes（
 {'top'：top，
'left'：left}）; 
返回应用程序
} 
 
函数createMaskPanel _（）{// UI加载时调用，最初它将被忽略。它需要变得可见
 var app = UiApp.getActiveApplication（）; 
 var mask = app.createVerticalPanel（）。setId（'mask'）.setSize（'100％'，'100％'）// maskPanel来掩饰ui 
 .setStyleAttributes（{
'backgroundColor'：'＃F0F0F0'，
'position'：'fixed'，
'top'：'0'，
'left'：'0'，
 'zIndex'：'1'，
'opacity'：'0.6'}）。setVisible（false）; 
 mask.add（app.createLabel（'POPUP'）
 .setStyleAttribute（'color'，'＃F0F0F0'）
 .setStyleAttribute（'opacity'，'0.6'））; 
返回掩码; 
} 
 
 function showVal（e）{
 var app = UiApp.getActiveApplication（）; 
 var source = e.parameter.idx 
 var value = app.getElementById（'val'+ source）
 value.setText（'choice value ='+ e.parameter.ppValue +'（ '+ choice [Number（e.parameter.ppValue）] +'）'）
 var popup = app.getElementById（'popup'）
 var mask = app.getElementById（'mask'）
 popup.setVisible（false）
 mask.setVisible（false）
返回应用程序
} 
  

$ b $根据我在这些回复中看到的，我发现的这种方法是相应地定位我的小部件，但不是实际的形式本身。当然，除非我错过了一些完全可能的东西。感谢迄今为止的答复。

I have a code that simulates a popup window (thanks to Waqar Ahmad) that is triggered by a client handler.I would like to get this popup appear near the button that triggered it but with the script I have I see no way to move the window.The code is below and the app is viewable here, if ever someone has an idea about how I should re-organise or change the script so that the popup window shows up near the button that fired the process ?

var choice = ['-','Choice 1','Choice 2','Choice 3','Choice 4']; // var definition

function doGet(){
      var app = UiApp.createApplication().setStyleAttribute("background", "beige");

      app.add(createMaskPanel_());//this is used to make popup panel modal

      var mainPanel = app.createVerticalPanel().setStyleAttributes({'padding' : '15'});
      app.add(mainPanel);
 // idx holds the index value of the button that is pressed
      var idx = app.createTextBox().setId('idx').setName('idx').setVisible(false);
      mainPanel.add(idx);
      //Make a panel for popup and add your popup elements
      var popup = app.createVerticalPanel().setId('popup').setVisible(false)
      .setStyleAttributes(
        {'position': 'fixed',
         'border' : '1px solid brown',
         'padding' : '15',
         'background' : 'beige',
         'top' : '150PX',
         'left' : '300PX',
         'width' : '200',
         'height':'120',
         'zIndex' : '2'});
      popup.add(app.createLabel('Select your choice').setId('label'));
      var list = app.createListBox().setId('ppValue').setName('ppValue').setWidth('200')
        .addItem(choice[0], '0').addItem(choice[1], '1').addItem(choice[2], '2').addItem(choice[3], '3').addItem(choice[4], '4');
      popup.add(list);
      var valHandler = app.createServerHandler('showVal').addCallbackElement(mainPanel).addCallbackElement(popup);;
      popup.add(app.createButton('✖ Close / confirm').addClickHandler(valHandler));
      app.add(popup);
      var mask = app.getElementById('mask')
      var ppHandler = app.createClientHandler().forTargets([popup,mask]).setVisible(true)

      var flex = app.createFlexTable()
  for(nn=1;nn<11;++nn){
      flex.setText(nn,0,'Item nr '+nn)
      var text = app.createTextBox().setHeight('26').setWidth('150').setId('val'+nn).setName('val'+nn)
      flex.setWidget(nn,1,text);
      var handler = app.createClientHandler().forTargets(idx).setText(nn).forTargets(text).setText('suggestion = ?');
      flex.setWidget(nn,2,app.createButton('✐').setHeight('26').setId('btn'+nn).addClickHandler(handler).addClickHandler(ppHandler))
      }
      mainPanel.add(flex);
      return app;
    }

function createMaskPanel_(){ //Called when UI loads, initially it will be invisble. it needs to be made visible
      var app = UiApp.getActiveApplication();
      var mask = app.createVerticalPanel().setId('mask').setSize('100%', '100%') //maskPanel to mask the ui
      .setStyleAttributes({
        'backgroundColor' : '#F0F0F0',
        'position' : 'fixed',
        'top' : '0',
        'left' : '0',
        'zIndex' : '1',
        'opacity' : '0.4'}).setVisible(false);
      mask.add(app.createLabel('POPUP')
               .setStyleAttribute('color', '#F0F0F0')
               .setStyleAttribute('opacity', '0.6'));
      return mask;
    }

function showVal(e){
      var app = UiApp.getActiveApplication();
      var source = e.parameter.idx
      var value = app.getElementById('val'+source)
      value.setText('choice value = '+choice[e.parameter.ppValue])
      var popup = app.getElementById('popup')
      var mask = app.getElementById('mask')
      popup.setVisible(false)
      mask.setVisible(false)
      return app
    }

---

EDIT : Since the server handler seems to be the only way I gave it a try, the app is viewable here and the (final ?) code is below for info.

var choice = ['-','Choice 1','Choice 2','Choice 3','Choice 4','Choice 5','Choice 6','Last choice !'];//var definition

function doGet(){
  var app = UiApp.createApplication().setStyleAttribute("background", "beige");
  app.add(createMaskPanel_());//this is used to make popup panel modal
  var top = '100PX'
  var left = '265PX'
  var mainPanel = app.createVerticalPanel().setStyleAttributes({'padding' : '15'});
  app.add(mainPanel);
// item definitions
  var idx = app.createTextBox().setId('idx').setName('idx').setVisible(false);
  mainPanel.add(idx);
  //Make a panel for popup and add your popup elements
  var popup = app.createVerticalPanel().setId('popup').setVisible(false)
  .setStyleAttributes(
    {'position': 'fixed',
     'border' : '1px solid brown',
     'padding' : '10',
     'background' : 'beige',
     'top' : top,
     'left' : left,
     'width' : '200',
     'height':'110',
     'zIndex' : '2'});
  popup.add(app.createLabel('Select your choice').setId('label'));
  var list = app.createListBox().setId('ppValue').setName('ppValue').setWidth('160')
   for(c in choice){list.addItem(choice[c], c)}
  popup.add(list);
  var valHandler = app.createServerHandler('showVal').addCallbackElement(mainPanel).addCallbackElement(popup);;
  popup.add(app.createButton('✖ Close / confirm').addClickHandler(valHandler));
  app.add(popup);

  var idxHandler = app.createServerHandler('setidx').addCallbackElement(mainPanel)


var flex = app.createFlexTable()
for(nn=1;nn<11;++nn){
  flex.setText(nn,0,'Item nr '+nn)
  flex.setWidget(nn,1,app.createTextBox().setPixelSize(180,26).setId('val'+nn).setName('val'+nn));
  flex.setWidget(nn,2,app.createButton('✐').setHeight('26').setId('btn'+nn).addClickHandler(idxHandler))
  }
  mainPanel.add(flex);
  return app;
}

function setidx(e){
  var app = UiApp.getActiveApplication();
  var idx = app.getElementById('idx')
  var idxval = Number(e.parameter.source.replace(/[a-z]/g,''))
  idx.setValue(idxval);
  var top = -30+38*idxval+'PX'
  var left = '265PX'
  var popup = app.getElementById('popup')
  var mask = app.getElementById('mask')
  var label = app.getElementById('label').setText('Select your choice (item '+idxval+')')
  var value = app.getElementById('val'+idxval)
  value.setText('suggestion = ?')
  popup.setVisible(true)
  mask.setVisible(true)
  popup.setStyleAttributes(
    {'top' : top,
     'left' : left});
  return app
}

function createMaskPanel_(){ //Called when UI loads, initially it will be invisble. it needs to be made visible
  var app = UiApp.getActiveApplication();
  var mask = app.createVerticalPanel().setId('mask').setSize('100%', '100%') //maskPanel to mask the ui
  .setStyleAttributes({
    'backgroundColor' : '#F0F0F0',
    'position' : 'fixed',
    'top' : '0',
    'left' : '0',
    'zIndex' : '1',
    'opacity' : '0.6'}).setVisible(false);
  mask.add(app.createLabel('POPUP')
           .setStyleAttribute('color', '#F0F0F0')
           .setStyleAttribute('opacity', '0.6'));
  return mask;
}

function showVal(e){
  var app = UiApp.getActiveApplication();
  var source = e.parameter.idx
  var value = app.getElementById('val'+source)
  value.setText('choice value = '+e.parameter.ppValue+' ('+choice[Number(e.parameter.ppValue)]+')')
  var popup = app.getElementById('popup')
  var mask = app.getElementById('mask')
  popup.setVisible(false)
  mask.setVisible(false)
  return app
}

解决方案

From what I've discovered so far using what I see in these replies, this methodology is positioning my widgets accordingly, but not the actual form itself. Unless, of course, I'm missing something, which is entirely possible. Thanks for the replies so far.

这篇关于如何从客户端处理程序中移动弹出窗口？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！