0

この JQuery pluginを使用してスタイリングしているフォーム入力 (type='file') があります。基本的には、ソートのマスクとして入力要素に新しいスパンを重ね、すべてを div で囲みます。問題は、javascript が読み込まれる前の 1 秒間、標準の html 入力ボックスとボタンが表示されることです (見苦しい)。私の質問は、どちらかに何かがあるかどうかです

1）入力要素を非表示にします（クリック可能な機能を維持しながら）

また

2) JavaScript が作動してそれを隠すまで、input 要素を非表示にします。

また

3) 思いもよらなかったこと。

前もって感謝します！

4

4 に答える 4

0

CSS と jQuery を組み合わせて、完全にレンダリングされるまで要素を非表示にすることができます。CSS ファイルに以下を追加します。

.element{
    opacity: 0;
    transition: opacity 0.5s ease;
}

あなたのjQueryスクリプトでは、すべてのレンダリングの後に：

$('.element').css('opacity', '1');

「トランジション」プロパティは必須ではありませんが、要素が表示されているときにフェード効果があると便利な場合があります。多くの jQuery スクリプトがサイト上で実行され、「すべてがちらつく」場合は、これを body 要素に追加します。サイトの読み込みがスムーズになりました。

于 2016-01-15T13:51:43.783 に答える
0

通常、これを行う最善の方法は、DOM と JavaScript が完全に読み込まれるまで待つことです。そのため、入力要素を非表示に設定し、$(document).ready(function() {...})JavaScript が読み込まれたときに入力のスタイルを設定するために使用します。

于 2013-08-08T16:28:36.683 に答える
0

これは CSS + Javascript で実現できます。

HTML の例:

<input type="file" name="file" id="file" />

ファイルを非表示にする CSS:

input#file
{
    display: none;
}

JavaScript がロードされたら、メソッドを実行して入力をカスタマイズし、show コマンドを実行して、カスタマイズ後に入力を表示できるようにします。

$('input#file').customFileInput().show();

この方法では、JavaScript がすべてのプロセスを完了するまで、入力ファイルは表示されません。

于 2013-08-08T16:29:09.160 に答える
0

これは 100% CSS ソリューションであり、JS が実行時にサイズをチェックする必要はありません。トリックは、入力に巨大なフォント サイズを与えること460pxです。

元：

<div style="position:relative; width:100px; height:20px; overflow:hidden;">
     Upload button <!-- this text will be shown -->
     <input type="file" style="position:absolute; right:0; top:0; font-size:460px;" />
</div>
于 2013-08-08T16:27:27.140 に答える