コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript/jQueryフォーム美化プラグイン_javascriptスキルまとめ

JavaScript/jQueryフォーム美化プラグイン_javascriptスキルまとめ

WBOY
リリース： 2016-05-16 17:56:12
オリジナル
1405 人が閲覧しました
Niceforms
Niceforms は独立したフォーム美化ツールで、現在のバージョンは 2.0
公式ホームページ: http://www.emblematiq.com/lab/niceforms/
公式デモ: http ://www.emblematiq.com/lab/niceforms/demo/niceforms.html
GitHub: https://github.com/emblematiq/Niceforms
メソッドを使用して、先頭に次のスクリプトとスタイルを導入しますページのそれだけです:
コードをコピー コードは次のとおりです:


🎜>

<script> <br>imagesPath = "niceforms-v2.0/img/"; //niceforms 画像リソースのパス<br></script>


効果:


JavaScript/jQueryフォーム美化プラグイン_javascriptスキルまとめ
Uniform
これはjQueryのフォーム美化プラグイン公式Webサイトおよびオンラインデモ: http://uniformjs.com/
githubホームページ: https://github.com/pixelmatrix/uniform
使用方法、以下を紹介ページの先頭にあるスクリプトとスタイル:


コードをコピー コードは次のとおりです:


< script>
$(function() {
$(" input, textarea, select, button");
}); >
ユニフォームには、デフォルト、アリスト、エージェントの 3 つのテーマが含まれています。使用する場合は、対応するディレクトリ内の CSS を引用するだけです。
効果については公式デモを直接ご覧ください

Formly

Formly は jQuery 用のフォーム美化プラグインでもあります
公式 Web サイトとオンライン デモ: http: //thrivingkings.com /formly/
github: https://github.com/ThrivingKings/Formly 使用するには、ページの先頭に次のスクリプトとスタイルを導入するだけです:



コードをコピーします
コードは次のとおりです: < スクリプト src="jquery-1.7.1.min.js"> <スクリプト src="Formly/formly.js">< /script>
<script> <div class="codebody" id="code5850">$(function() { <br>$("form").formly(); <br></script>

効果を直接確認してください。 公式デモ


Ideal Forms

Ideal Forms は、jQuery 用のフォーム美化プラグインでもあります。
公式 Web サイト: spacirdesigns。 com/jqidealforms
GoogleCode: http://code .google.com/p/idealforms/
これを使用するには、ページの先頭に次のスクリプトとスタイルを導入するだけです:


コードをコピーします


コードは次のとおりです:

<--[IE 8 の場合] >



< スクリプト src="idealforms1.02/js/jquery.idealforms.js">
<script> <br>$(function( ) { <br>$("#fancyform").<br>});<br>効果: <br><img src="http://files.jb51.net/upload/201202/20120214152408460.gif" border="0" alt="JavaScript/jQueryフォーム美化プラグイン_javascriptスキルまとめ" ><br><br><strong>jqTransform <br></strong>jqTransform は jQuery のフォーム美化プラグインでもあります <br>公式 Web サイトとオンライン デモ: http:/ /www .dfc-e.com/metiers/multimedia/opensource/jqtransform/ <br>使用するには、ページの先頭に次のスクリプトとスタイルを導入するだけです: <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="26808" class="copybut" id="copybut26808" onclick="doCopy('code26808')"><u>コードをコピー </u></a></span> コードは次のとおりです: </div> <div class="codebody" id="code26808"> <br><link rel="stylesheet" href="jqtransformplugin/jqtransform.css" media="all" /> <br><スクリプト src="jquery-1.7.1.min.js"></script>
<スクリプト src="jqtransformplugin/jquery.jqtransform.js"> /script>
< ;style>/*フォーム要素の位置ずれを修正*/
form {
clear: Both;
}
form.jqtransform .rowElem label {
width: 150px ;
text -align: right;
form.jqtransform .rowElem label.radiovalue {
width: 30px;
float: left;
フォーム .jqtransform .rowElem label.checkboxvalue {
幅: 70px;
フロート: 左: 5px;
.jqTransformSelectWrapper li {
パディング: 0;
マージン: 0;

<script> ('フォーム') .jqTransform({ imgPath: 'jqtransformplugin/img/' }) <br></script>

>


Carbon Fiber サインアップ フォーム
Fiber ログイン フォーム、この製品には js はなく、css/html のみ
公式 Web サイト: http://tutorialzine.com/2010/04 /carbon-signup-form /
効果:


終了
デモを置く:
パッケージのダウンロード アドレス
関連ラベル：
フォーム美化
ソース：php.cn
前の記事：js コード最適化の要素とレコード_javascript スキル 次の記事：js URLパラメータの結合方法の比較_javascriptスキル
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
単語と一致する正規表現 新しいジョブ名をデータベース内の既存のジョブ名と照合しようとするスクリプトがあります。 SELECTa.titleASJobTitle,j.DescriptionASMatched...
から 2024-04-06 21:24:04
0
1
606
MySQL SQLクエリを使用して別のテーブルのフィールドの合計を計算する 次のようなスキーマがあります。 属性「user_id」と「username」を持つユーザーテーブルと、属性「customer_id」（user_idのFK）と「finalPrice...
から 2024-04-06 19:39:29
0
1
441
Android 上の React-Native でステータス更新が機能しない スワイプ可能な水平ギャラリーに画像のペアを含むコードがいくつかあります。両方の画像の上部をクリックすると、画像がオフに切り替わるはずです。そのため、私が行ったのは、isImage2...
から 2024-04-06 16:54:10
0
1
410
無効な React 子要素 (見つかった: キー {clientVersion} を持つオブジェクト)。子要素のコレクションをレンダリングする場合は、代わりに配列を使用してください 複数ステップのフォームを持っているのですが、送信しようとするとこのエラーが表示されます。ただし、createOrganization スケジュールを単純な形式で使用すると、機能しま...
から 2024-04-06 16:25:39
0
1
346
Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...
から 2024-04-06 14:54:03
0
2
421
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート