jquery - jquery モバイル スタイルの JQuery-File-Upload ボタン

Question

jquery-1.8.3 と jquery-mobile-1.2 で jquery-file-upload プラグインを使用しました。うまくいきました。

しかし、今日、jquery-1.9 と jquery-mobile-1.3 にアップデートし、ボタンのスタイルが変わりました。

それらをjsfiddleに追加しました。こんな感じにしたい

<span class="fileinput-button" data-role="button" data-icon="plus">
<span>添加文件</span>
<input type="file" name="files[]" multiple />
</span>

しかし、それはそのように見えます

<span class="fileinput-button" data-role="button" data-icon="plus">
<span>添加文件</span>
<input type="file" name="files[]" multiple />
</span>

ありがとう。

Answer 1

新しいバージョンでは、jQuery Mobile はファイル入力を処理する方法を変更しました。発表投稿から：

ファイル入力タイプがモバイル プラットフォームでより多くサポートされるようになったため、jQuery Mobile の一部としてこれらの自動スタイル設定を追加しました。

実際、入力の周りに HTML コードを生成します。

<div class="ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow ui-body-c">
    <input type="file" name="files[]" multiple="" class="ui-input-text ui-body-c">
</div>

解決策は、属性を追加するだけで、jQuery Mobile が要素のスタイルを設定できないようにすることです。data-role="none"

<input type="file" name="files[]" multiple data-role="none"/>

ここで jsFiddle を参照してください: http://jsfiddle.net/X23dx/1/

jQuery Mobile 1.4 の更新

1.4 バージョンで (一種の) 同様の結果を得るには、いくつかの新しいクラスを周囲に追加する必要があります<span>。

<span class="ui-btn ui-icon-plus ui-btn-icon-left ui-corner-all fileinput-button">
    <span>添加文件</span>
    <input type="file" name="files[]" multiple data-role="none"/>
</span>

更新された jsFiddle を参照してください: http://jsfiddle.net/X23dx/173/