0

チェックすると「productInfoButton」の色がライムグリーンになり、チェックを外すとグレーになる関数を作成する方法を見つけようとしています。誰か助けてくれませんか？

function doGet(e) {
  var app = UiApp.createApplication();

  var productInfoButton = app.createButton("Products").setId('productInfoButton');

  var handlerL = app.createServerClickHandler('prodCompleteHandlerL');
  var productCompleteCheckBox = app.createCheckBox().setId("productCompleteCheckBox")
  .setName("productCompleteCheckBox");
  productCompleteCheckBox.addClickHandler(handlerL);
  handlerL.addCallbackElement(productInfoButton);

  app.add(productInfoButton);
  app.add(productCompleteCheckBox);

  return app;
}

function prodCompleteHandlerL(e) {
  var app = UiApp.getActiveApplication();
  app.getElementById('productInfoButton').setStyleAttribute('background', 'lime')
  return app;
}
4

1 に答える 1

1

checkBox の状態は、ウィジェットの名前を使用して、イベント情報パラメーターで利用できます。あなたのコードでは次のようになります：

function prodCompleteHandlerL(e) {
  var app = UiApp.getActiveApplication();
if(e.parameter.productCompleteCheckBox == 'true'){
  app.getElementById('productInfoButton').setStyleAttribute('background', 'lime')
}else{
  app.getElementById('productInfoButton').setStyleAttribute('background', '#dddddd') // is light grey
}
  return app;
}

編集: 別の問題に気づきませんでした (申し訳ありません): には....CallbackElementを含める必要があるため、メイン関数でasを使用する必要があります (または、この wjidget を保持する親ウィジェットを使用する必要があります (存在する場合))。productCompleteCheckBoxproductCompleteCheckBoxcallBackElement

EDIT2：あなたのコメントに従ってください：ここで使用されているものであるため、 CSSドキュメント を探すことで色とスタイルに関するドキュメントを見つけることができます ...またはGUIビルダーで利用可能なオプションを見て、インスピレーションを得て何を確認することができますWYSWYG 環境で発生します。もちろん、GUI ビルダーで実行できることはすべて、スクリプトを使用して実行できます (実際、スクリプトはさらに強力ですが、アイデアがあると便利です)。

ウィジェットを透明にしたい場合は、単に使用します.setStyleAttribute('background','transparent')

編集 3:ボタンの「デフォルトの外観」を取得する:

ページからコードを調べると、キャッシュ内の .png ファイルが使用されていることに気付きました...使用方法が見つからなかったので、ファイルをコピーしてパブリック フォルダーに配置し、URL を取得して使用しましたスタイルで...かなりの驚きです：それは働いています。(ページで見つかった URL はスクリプトに固有のようです。別のスクリプトで使用できるかどうかはわかりません)

たぶん、私より賢い誰かが同じ目標を達成するためのより簡単な方法を見つけるでしょう。遠慮なくコメントや提案をしてください;-)

また : すべてのパラメーターをコピーしましたが、このユース ケースでは役に立たないものもあります ^^

  var btn = app.getElementById('btn').setStyleAttributes({ 
  'margin': '5px',
  'padding': '3px 5px',
  'text-decoration': 'none',
  'font-size': 'small',
  'cursor': 'pointer',
  'cursor': 'hand',
  'background': 'url("https://dl.dropbox.com/u/211279/hborder.png") repeat-x 0px -27px',
  'border': '1px outset #ccc'
  })
于 2012-12-23T08:29:16.930 に答える