Geekly Articles each Day

jQueryを使用して美しい入力[type = file]を作成する

ヒントまたは別のプラグインが必要な理由は何ですか？


かつて50年代の王国では 、ウェブがまったく2.0でなかったとき、誰もスタイリング形式を考えていませんでした。 現在、要素の外観を劇的に変更する多くの純粋なCSSソリューションがあります。 残念ながら、一部の要素ではこれは機能しません。 この点で特に難しいのは、入力[type = file]です。

CSSツールのこの要素では、フォントサイズのみを変更できます。 私たちは皆、力が大好きです。 あなたは本当にこの扱いにくいファイルを完全に制御したいですか？ ここでは、現代のインターネットの魔法の束が私たちの助けになります-JavaScript + CSS。

私たちのプロジェクトではjQueryを使用しているため、最初に行ったのは既成のプラグインを使用したソリューションを探すことでしたが、すぐに失望しました。 見つかったプラグインは、お客様の要件を満たしていないか、まったく必要のない追加機能を提供しました。 これから何が続きますか？ そうです- 自転車プラグインを作成する必要があります。

TKとして


私たちのプロジェクトのフォームには、ファイルをダウンロードするためのいくつかのチェックボックスとオプションのフィールドが含まれています。 お客様は、「チェックボックスを使用してファイルをダウンロードしたい！」と言いました。

頭をかいた。 インターネットでは、このような機能はフラッシュを使用して実装されるか、 ajaxファイルのアップロードにバンドルされていました。 最初のオプションはすぐに拒否されます-flash'emは私たちに誰もすることがなく、私たちは彼が好きではありません。 2番目のオプションは、いくつかの理由で不便でした。

開発者、開発者、開発者、開発者


標準の要素置換スキームは次のとおりです。

「なんでこんなに複雑なの？！」 残念ながら、入力[type = file]のクリックをエミュレートすることはうまく機能しないか、まったく機能しないため、ストリートマジックが必要です。

さて、実際にそれがどのように機能するか：
function replace() { $replacement .addClass(config.replacementClass + '-' + currentId) // CSS class name .insertBefore($input) // input'a .bind( 'mouseenter' , function () { toggleVisibility( true ); toggleHoverClass( true ); }) .bind( 'init' , function () { createWrapper(); // createFileName(); // }) .trigger( 'init' ); } * This source code was highlighted with Source Code Highlighter .
  1. function replace() { $replacement .addClass(config.replacementClass + '-' + currentId) // CSS class name .insertBefore($input) // input'a .bind( 'mouseenter' , function () { toggleVisibility( true ); toggleHoverClass( true ); }) .bind( 'init' , function () { createWrapper(); // createFileName(); // }) .trigger( 'init' ); } * This source code was highlighted with Source Code Highlighter .
  2. function replace() { $replacement .addClass(config.replacementClass + '-' + currentId) // CSS class name .insertBefore($input) // input'a .bind( 'mouseenter' , function () { toggleVisibility( true ); toggleHoverClass( true ); }) .bind( 'init' , function () { createWrapper(); // createFileName(); // }) .trigger( 'init' ); } * This source code was highlighted with Source Code Highlighter .
  3. function replace() { $replacement .addClass(config.replacementClass + '-' + currentId) // CSS class name .insertBefore($input) // input'a .bind( 'mouseenter' , function () { toggleVisibility( true ); toggleHoverClass( true ); }) .bind( 'init' , function () { createWrapper(); // createFileName(); // }) .trigger( 'init' ); } * This source code was highlighted with Source Code Highlighter .
  4. function replace() { $replacement .addClass(config.replacementClass + '-' + currentId) // CSS class name .insertBefore($input) // input'a .bind( 'mouseenter' , function () { toggleVisibility( true ); toggleHoverClass( true ); }) .bind( 'init' , function () { createWrapper(); // createFileName(); // }) .trigger( 'init' ); } * This source code was highlighted with Source Code Highlighter .
  5. function replace() { $replacement .addClass(config.replacementClass + '-' + currentId) // CSS class name .insertBefore($input) // input'a .bind( 'mouseenter' , function () { toggleVisibility( true ); toggleHoverClass( true ); }) .bind( 'init' , function () { createWrapper(); // createFileName(); // }) .trigger( 'init' ); } * This source code was highlighted with Source Code Highlighter .
  6. function replace() { $replacement .addClass(config.replacementClass + '-' + currentId) // CSS class name .insertBefore($input) // input'a .bind( 'mouseenter' , function () { toggleVisibility( true ); toggleHoverClass( true ); }) .bind( 'init' , function () { createWrapper(); // createFileName(); // }) .trigger( 'init' ); } * This source code was highlighted with Source Code Highlighter .
  7. function replace() { $replacement .addClass(config.replacementClass + '-' + currentId) // CSS class name .insertBefore($input) // input'a .bind( 'mouseenter' , function () { toggleVisibility( true ); toggleHoverClass( true ); }) .bind( 'init' , function () { createWrapper(); // createFileName(); // }) .trigger( 'init' ); } * This source code was highlighted with Source Code Highlighter .
  8. function replace() { $replacement .addClass(config.replacementClass + '-' + currentId) // CSS class name .insertBefore($input) // input'a .bind( 'mouseenter' , function () { toggleVisibility( true ); toggleHoverClass( true ); }) .bind( 'init' , function () { createWrapper(); // createFileName(); // }) .trigger( 'init' ); } * This source code was highlighted with Source Code Highlighter .
  9. function replace() { $replacement .addClass(config.replacementClass + '-' + currentId) // CSS class name .insertBefore($input) // input'a .bind( 'mouseenter' , function () { toggleVisibility( true ); toggleHoverClass( true ); }) .bind( 'init' , function () { createWrapper(); // createFileName(); // }) .trigger( 'init' ); } * This source code was highlighted with Source Code Highlighter .
  10. function replace() { $replacement .addClass(config.replacementClass + '-' + currentId) // CSS class name .insertBefore($input) // input'a .bind( 'mouseenter' , function () { toggleVisibility( true ); toggleHoverClass( true ); }) .bind( 'init' , function () { createWrapper(); // createFileName(); // }) .trigger( 'init' ); } * This source code was highlighted with Source Code Highlighter .
  11. function replace() { $replacement .addClass(config.replacementClass + '-' + currentId) // CSS class name .insertBefore($input) // input'a .bind( 'mouseenter' , function () { toggleVisibility( true ); toggleHoverClass( true ); }) .bind( 'init' , function () { createWrapper(); // createFileName(); // }) .trigger( 'init' ); } * This source code was highlighted with Source Code Highlighter .
  12. function replace() { $replacement .addClass(config.replacementClass + '-' + currentId) // CSS class name .insertBefore($input) // input'a .bind( 'mouseenter' , function () { toggleVisibility( true ); toggleHoverClass( true ); }) .bind( 'init' , function () { createWrapper(); // createFileName(); // }) .trigger( 'init' ); } * This source code was highlighted with Source Code Highlighter .
  13. function replace() { $replacement .addClass(config.replacementClass + '-' + currentId) // CSS class name .insertBefore($input) // input'a .bind( 'mouseenter' , function () { toggleVisibility( true ); toggleHoverClass( true ); }) .bind( 'init' , function () { createWrapper(); // createFileName(); // }) .trigger( 'init' ); } * This source code was highlighted with Source Code Highlighter .
  14. function replace() { $replacement .addClass(config.replacementClass + '-' + currentId) // CSS class name .insertBefore($input) // input'a .bind( 'mouseenter' , function () { toggleVisibility( true ); toggleHoverClass( true ); }) .bind( 'init' , function () { createWrapper(); // createFileName(); // }) .trigger( 'init' ); } * This source code was highlighted with Source Code Highlighter .
function replace() { $replacement .addClass(config.replacementClass + '-' + currentId) // CSS class name .insertBefore($input) // input'a .bind( 'mouseenter' , function () { toggleVisibility( true ); toggleHoverClass( true ); }) .bind( 'init' , function () { createWrapper(); // createFileName(); // }) .trigger( 'init' ); } * This source code was highlighted with Source Code Highlighter .


ラッパーの作成を詳しく見てみましょう。

  1. 関数 createWrapper（）{
  2. var cord = getElementCoordinates（$の置換）; //ラッパーが代替と正確に同じ次元を占めることが必要です
  3. var wrap = $（ '<div />' 、{
  4. css：{
  5. 位置： 「絶対」 、
  6. visibility： "hidden" 、 //ラッパーはデフォルトで非表示
  7. オーバーフロー： "hidden" 、
  8. zIndex：10000000、 //ページ上の他のすべての要素の「上」に配置
  9. opacity：0、 //ロード用の標準ボタンは表示されません
  10. 左：cord.left、
  11. 上：cord.top、
  12. 幅：$ replacement.get（0）.offsetWidth、
  13. 高さ：$ replacement.get（0）.offsetHeight、
  14. マージン：0、
  15. パディング：0、
  16. 方向： 「ltr」
  17. }
  18. }）
  19. .addClass（config.wrapperClass）
  20. .bind（ 'mouseout' 、 function （）{
  21. toggleVisibility（ false ）;
  22. toggleHoverClass（ false ）;
  23. }）;
  25. $ input.wrap（ラップ）.css（config.inputCss）;
  26. }
*このソースコードは、 ソースコードハイライターで強調表示されました。


さらに、最後の行では、次のCSSスタイルを標準要素に適用します。

  1. inputCss：{
  2. fontSize： '600px' 、 //「参照」ボタンをできるだけ大きくする
  3. 位置： 「絶対」 、
  4. right：0、 //ラッパーの右境界線に揃えます
  5. マージン：0、
  6. パディング：0
  7. }、
*このソースコードは、 ソースコードハイライターで強調表示されました。


これは、ラッパーをクリックして、常に[type = file]入力ボタンにアクセスし、ファイルをダウンロードするための標準ダイアログを呼び出すために必要です。

ファイル名を表示するフィールドを作成するのは非常に簡単です。

  1. 関数 createFileName（）{
  2. {
  3. if （！jQuery.contains（ document .body、$ filename.get（0）））{
  4. throw （ "not found" ）;
  5. }
  6. } catch （e）{
  7. if （！$ filename.length）{
  8. throw （ "filename is empty" ）;
  9. }
  10. $ replacement.after（$ filename）;
  11. }
  12. $ filename.addClass（config.filenameClass + '-' + currentId）;
  13. }
*このソースコードは、 ソースコードハイライターで強調表示されました。


名前を表示するための要素がページにない場合は、ラッパーの直後に追加します。

基本的な機能は用意されていますが、選択したファイルを削除する機能を提供する必要があります。 これは別の問題です。入力[type = file]の値は読み取り専用です。 次の焦点に進みます-すべての特性をコピーしながら、その場で新しい入力を作成します。

  1. function onClear（）{
  2. var el = $ input.get（0）;
  3. var attrs = {};
  4. //値を除く、古い入力のすべての属性をコピーします
  5. for （ var i = 0; i <el.attributes.length; i + = 1）{
  6. var attrib = el.attributes [i];
  7. if （attrib.specified === true && attrib.name！== 'value' ）{
  8. attrs [attrib.name] = attrib.value;
  9. }
  10. }
  11. attrs.value = "" ;
  12. //新しい入力を作成し、古い入力をそれに置き換えます
  13. $ input = $（ '<input />' 、attrs）;
  14. $（ this ）.replaceWith（$ input）;
  16. //イベントをバインドします
  17. $ input.css（config.inputCss）.bind（ 'change' 、onChange）.bind（ 'clear' 、onClear）.trigger（ 'change' ）;
  18. toggleActiveClass（ false ）;
  19. }
*このソースコードは、 ソースコードハイライターで強調表示されました。


助けて


プラグインの使用は非常に簡単です-最新のjQuery、プラグインスクリプト自体を接続し、次の行を登録する必要があります。
  1. <script type = "text / javascript" >
  2. $（ 関数 （）{
  3. $（ "＃fileupload-1" ）.customInputFile（{
  4. ファイル名： "＃filename-1"
  5. }）;
  6. $（ "＃fileupload-2" ）.customInputFile（）;
  7. $（ '#clear' ）.bind（ 'click' 、 function （）{
  8. $（ "＃fileupload-1、＃fileupload-2" ）.trigger（ "clear" ）;
  9. }）;
  10. }）;
  11. </ script>
*このソースコードは、 ソースコードハイライターで強調表示されました。


この例では、2つの標準ファイルアップロード要素を置き換えています。 プラグインの呼び出しの違いは、最初のケースでは、ファイル名を表示する要素を明示的に示すという事実のみです。 2番目の場合、このアイテムは自動的に作成されます。

値のリセットは、交換可能な入力でclearイベントを呼び出すことにより初期化されます。 次の状況では、パラメーターでCSSクラスを指定することもできます。

これらは、3つのクラスの組み合わせを使用して実現されます。
  1. replacementClass： "customInputFile" 、
  2. replacementClassHover： "customInputFileHover" 、
  3. replacementClassActive： "customInputFileActive" 、
*このソースコードは、 ソースコードハイライターで強調表示されました。

デモンストレーションと配布資料


プラグインの結果は、次の2つの写真で確認できます。

働く

デモ

プロジェクトのソースコードはbitbucketで入手でき ます。ライブデモはこちらでご覧いただけます。

Source: https://habr.com/ru/post/J98260/

More articles:


All Articles