0

カスタム フォーム要素をいくつか作成したいと考えています。カスタム フォーム要素を作成するために使用するのに最適なライブラリはどれですか?

主にファイルアップロードとセレクトボックスを見ています。

セットの残りの部分は、CSS3 でスタイルを設定できます。

4

3 に答える 3

3

ファイル選択要素

Harsha bhai 自分のデザインを作ってみてください。簡単なので、良い学習体験になるでしょう。

いくつかのトリックを理解する必要があります (choose-file 要素の場合など)。これらのトリックでは、作成した div でスタイルを設定できない要素をオーバーレイするだけです。

スタイルを設定できない要素の上にこれらの div を配置する方法をすばやく学習するには、jquery/css を使用します。これが完了すると、すべてのブラウザーでほぼ同じになりますが、ファイルの選択要素のようにわずかな違いがあります。私が使用する必要な html,jquery を提供しました。疑問がある場合は、別の質問をすることができます。

 $(function(){
  $('div#input_file_outer input[type=file]').change(function(e){
    $('div.file_name').html($('div#input_file_outer input[type=file]').val()); });
    $('div#input_file_outer input[type=file]').css({'cursor':'pointer'});

    if($.browser.opera) {
      $('div.file_name').css({'float':'left'});
      $('span.input_file_label').css({'float':'right','cursor':'pointer'});
    }
    if(!$.browser.opera) {
      $('span.input_file_label').css({'left':'-4px'});
    }
    $("div.input_file_cover,div#input_file_outer").css( { 'width':$("input.upload_file").outerWidth()+9+'px', 'height':$("input.upload_file").outerHeight()+2+'px', 'cursor':'pointer' });
    $("div.file_name,span.input_file_label").css( { 'height':$("input.upload_file").outerHeight()+'px', 'cursor':'pointer' });
  });

<input type="file" name="photograph" class="upload_file" title="Upload your jpeg/jpg photographs" style="cursor: pointer; ">

<div class="input_file_cover" style="width: 249px; height: 23px; cursor: pointer; ">
  <span class="input_file_label" style="left: -4px; height: 21px; cursor: pointer; ">
    Choose File
  </span>
  <div class="file_name" style="height: 21px; cursor: pointer; ">
    File name
  </div>
</div>

タイプミスすみません、急がなければなりません

于 2012-08-11T15:19:30.530 に答える
2

ファウンデーションcssフロントエンドフレームワークを試す必要がありますあなたのためにトリックを行う必要があります http://foundation.zurb.com/docs/forms.php

于 2012-08-11T10:23:38.740 に答える
1

Jquery の使い方を知っている場合は、それがカスタム要素を作成する最良の方法です。

カスタム選択ボタンについては、Jquery ライブラリcustomSelectを使用することをお勧めします。選択内のテキストボックス、ラジアルなど、さまざまなものを使用して選択要素を作成できます。

プログレスバーを備えた事前構築済みの派手なファイルアップロードが必要な場合は、FancyUploadを使用することをお勧めします

于 2012-08-11T10:25:08.753 に答える