0

へのコードのスニペットを次に示します。

<div id="manual-fine-uploader"></div>
<div id="triggerUpload" class="button" style="margin-top: 10px;">Save</div>

<script type="text/javascript" src="~/js/fineuploader/fineuploader-3.5.0.js"></script>
<script type="text/javascript">
   $(document).ready(function () {
      var manualuploader = new qq.FineUploader({
         element: $('#manual-fine-uploader')[0],
         request: {
            endpoint: 'server/handleUploads'
         },
         autoUpload: false,
         text: {
            uploadButton: 'Select Files'
         }
      });

      $('#triggerUpload').click(function () {
         manualuploader.uploadStoredFiles();
      });
   });
</script>

背景として、私は FineUploader の V3.5.0 を使用しており、スタンドアロンの依存関係のないバージョンを使用しています。私は文字通り、FineUploader dev 用にこの例をコピーしました。2 番目の div を次のように変更しましたclass="button"(アプリケーションのあらゆる場所で使用する CSS スタイル)。ただし、スタイリングは行われません。uploadButtonまた、JavaScript のカスタム スタイルへのスタイルの 1 つへの参照をどこに配置しますか?

ありがとう。

4

1 に答える 1

0

コメントで述べたように、「保存」ボタン (作成したもの) と「ファイルの選択」ボタン (Fine Uploader が作成したもの) のスタイルを設定する必要があります。

「保存」ボタンに関してはFine Uploaderとは全く関係ありません。このボタンはあなたが作成したものであり、Fine Uploader の一部ではありません。CSS で好きなようにスタイルを設定できます。

[ファイルの選択] ボタンに関しては、次の 3 つのオプションがあります。

  1. button独自の div/anchor/etc 要素を作成し、オプションを介して Fine Uploader に渡します。Fine Uploader は、不透明なファイル入力要素をこのボタン要素の子として追加します。CSS を使用して、好きなように要素のスタイルを設定します。

  2. Fine Uploader の UI モジュールによって作成されたデフォルトのボタンをターゲットにして、独自の CSS (ファイル) を作成します。CSS プロパティが確実に「勝つ」ようにする方法はたくさんありますが、それは厳密には CSS の問題であり、ここでは実際の範囲外です。

  3. オプションをオーバーライドしtemplateます。このルートには行かないことをお勧めします。Fine Uploader のテンプレート オプションは脆く、後のバージョンで改善する必要があります。テンプレートのオーバーライドについては、スタイリングの readme の前半で詳しく読むことができますが、繰り返しますが、これは行わないことをお勧めします。

上記の 3 つのオプションのうち、最初のオプションが最も簡単で、個人的にお勧めします。

また、Fine Uploader に同梱されている CSS ファイルを正しくインポートしていないようです。これは、デモ ページ/ウェブサイトの最初の例「セットアップ」で説明されています。

于 2013-05-15T19:39:48.777 に答える