1

私は Google Plus のアップロード ウィンドウのようなものを実装しています。ウィンドウ内の灰色の領域 (div) 全体をクリックすると、ファイル セレクターが表示されます。 Google プラスの写真のアップロード

これは、私がやろうとしていることの単純化されたモックアップ コードです ( jsfiddle )

$(function () {
  var fineupper = new qq.FineUploader({
     element: $('#fine-uploader-container')[0],
     button: $('#clickable-area')[0],
     text: {
         uploadButton: 'click me'
     },
     request: {
         endpoint: '/example'
     },
     multiple: false
   });
 });

<body>
  <div id="upload-container" class="window">
    <div id="clickable-area" class="clickable-area">Click me</div>
  </div>
  <div id="fine-uploader-container"></div>
</body>

2 つの問題が発生しています。1) 「クリック可能領域」div の下部をクリックできません。2) 「クリック可能エリア」div の css が変更されています。特に、位置属性は「相対」として上書きされています。（jsfiddleではそれほど重要ではありませんが、実際のコードではもっと必要です）

この 2 つの問題を回避する方法はありますか?

これは機能リクエスト 930の続きであることに注意してください)、クリック可能エリアの div を入力要素を参照するラベルにするようにリクエストしました。個人的には、これはカスタマイズ可能なボタンを実装するためのよりクリーンな方法だと思います。

また、JavaScript でクリック可能な領域の div のクリック イベントをキャッチし、入力要素をクリックさせようとしたことにも注意してください。ただし、私は IE との互換性を試みているため、これは実行できませんでした。

4

2 に答える 2