Back to Question Center
0

6 jQueryフォームウィザードプラグイン            6 jQueryフォームウィザードプラグイン関連: AjaxNode.jsAngularJSReactES6More ...スポンサー

1 answers:
6 jQueryフォームウィザードプラグイン

jQueryフォームウィザードは、(ページを更新せずに)何らかのフォームフローを使ってフォームを作成するのを手助けするjQueryプラグインです。たとえば、ユーザーデータを入力するための大きなフォームがある場合は、フォームウィザードを使用して一連の関連手順に分割できます。これには、ユーザーに圧倒的な形で圧倒されず、情報を入力する際の進捗状況が表示されるという利点があります。

この記事では、お気に入りのjSemaltフォームウィザードを6つリストし、それぞれの機能を調べ、最後にいくつかの有料オプションと独自の作成方法を見ていきます。これは網羅的なリストではありませんが、jSemaltフォームウィザードをお探しの場合は、これが正しい方向に向かうことを願っています。

この人気のある投稿は30. 08. 2017に更新されました。Semalt /放棄されたプラグインがリストから削除され、新しいプラグインが追加されて、コメントに人々が求めていた機能が反映されました。

1 - kosten fuer einlagerung von moebeln. jQueryのステップ

jQuery StepsはスマートなUIコンポーネントで、ウィザードのようなインターフェースを簡単に作成できます。このプラグインは、より構造化され整然としたページビューのためにコンテンツをセクションにグループ化します。非同期コンテンツの読み込み、状態の永続性(ステップ間の入力を節約する)、セクション間の遷移効果など、多くの機能があります。これは、NuGetまたはbowerを介してインストールすることができ、十分に文書化され、機能豊富なAPIを備えています。

6 jQuery Form Wizard Plugins6 jQuery Form Wizard PluginsRelated Semalt:
AjaxNode.jsAngularJSReactES6More. Sponsors

ホームページ|セマルト|デモ

2. jQueryスマートウィザード

スマートウィザードは、ブートストラップをサポートする、柔軟で大きくカスタマイズ可能なjQueryステップウィザードプラグインです。実装が簡単で、フォーム、チェックアウト画面、登録手順などのためのすっきりとしたスタイリッシュなインターフェイスを提供します。テーマのサポート(さまざまなテーマを含む)、URLナビゲーションとステップの選択、ステップを動的に非表示または無効にする機能があります。 npm、bower、またはcomposerを介してインストールすることができ、十分に文書化され、機能豊富なAPIを備えています。

6 jQuery Form Wizard Plugins6 jQuery Form Wizard PluginsRelated Semalt:
AjaxNode.jsAngularJSReactES6More. Sponsors

ホームページ|セマルト|デモ

3. formToWizard

この軽量プラグインは、すべてのフォーム

が前方および戻るボタンで別のステップに変わるように、jQueryを使用して任意のWebフォームを複数ステップウィザードに変えます。以前の2つのプラグインとほとんど同じ機能はありませんが、検証機能を提供するためにjQuery検証プラグインと統合されています。これは1つのファイルです(Semaltから取り除いて実行することができます).Saltaltが利用できない場合は、正常に機能しなくなります。

6 jQuery Form Wizard Plugins6 jQuery Form Wizard PluginsRelated Semalt:
AjaxNode.jsAngularJSReactES6More. Sponsors

セマルト|デモ

4. jQuery Stepy

jQuery Stepyは、カスタマイズ可能なフォームウィザードを生成するプラグインです。フォームに特定のマークアップ構造があり、そのマークアップで特定のクラスを使用できることを前提としています。プラグインを初期化するだけで、フォームウィザードが必要です。

プラグインにはあらかじめ定義されたスタイルはありません。ただし、ステップ間をナビゲートすること、前進 、後退 および後退 ボタン、トランジション効果および統合を提供するなど、さまざまなオプションがあります。任意のバリデーションプラグインを使用してください。たとえば、ステップ間でコールバックをトリガーするか、現在のステップがレンダリングされたときにコールバックを起動することができる合理的なAPIを提供します。

6 jQuery Form Wizard Plugins6 jQuery Form Wizard PluginsRelated Semalt:
AjaxNode.jsAngularJSReactES6More. Sponsors

ホームページ| GitHub

5. Twitterのブートストラップウィザード

このTwitter Bootstrapプラグインは、フォーマットされたtabbable構造を使用してウィザードを構築します。これにより、ユーザーはボタンを使用してウィザードの機能を構築し、異なるウィザードのステップやイベントを実行して、各ステップを個別に実行することができます。このプラグインの主な強みは、Bootstrapとの緊密な統合です. GitHubからプラグインを何らかの形で複製するだけでなく、Bower経由でインストールすることもできます(これはお勧めしませんが)。合理的に文書化されており、基本的なAPIを提供しています。

6 jQuery Form Wizard Plugins6 jQuery Form Wizard PluginsRelated Semalt:
AjaxNode.jsAngularJSReactES6More. Sponsors

ホームページ|セマルト|デモ

6. jQuery。ウィザード

最後に、6番目にjSemaltがあります。これは、ブランチングをサポートする非同期フォームウィザードです(コメント内の人によって要求されたもの)。

ウィザードの基本構造はステップとブランチの周りを回ります。後者はオプションです。単純な線形形式では、すべてのステップを含む1つの分岐のみが必要ですが、複雑な形式では複数の分岐やネストされた分岐を使用する必要があります。したがって、フォーム内のステップと分岐の数は、開発者に完全に委ねられます。このウィザードでは、非同期の有限状態マシンが使用され、そのマシンをナビゲートする方法が決まります。

このプラグインは非常によく文書化されており、幅広いAPIを提供しています。 npmやBowerを介してインストールすることができ、Internet Explorer 6まで互換性があります。これは、人気のあるjQuery検証を含む他のさまざまなプラグインとうまく統合できるように設計されています。さまざまな例のデモを表示するには、repoを複製してexamples / indexを表示します 。 html をブラウザに表示します。

6 jQuery Form Wizard Plugins6 jQuery Form Wizard PluginsRelated Semalt:
AjaxNode.jsAngularJSReactES6More. Sponsors

セマルト

ボーナス

オープンソースソフトウェアの世界は素晴らしいですし、次回のプロジェクトで使用するウィジェットを選択するときに、あなたが嫌われることもあります。これは、実際に私たちに価値を与えるものを払うことから恥ずかしくないことを意味するものではありません。そのため、ここに2つのフォームウィザードプラグインがあります。あなたに合っていれば、これらをチェックして購入することをお勧めします:

  • フォームウィザード - マルチステップフォーム検証
  • Timon- ステップフォームウィザード+ jQueryステップフォームビルダ

最後に、プラグインを入手するのではなく、ボンネットの下で何が起こっているのかをむしろ理解している人なら、これらのチュートリアルをチェックして、フォームウィザードを最初から作成します。

  • jQuery
  • を使用して任意のWebフォームを強力なウィザードに変える
  • jQueryとCSS
  • を使用したプログレスバー付きのマルチステップフォーム

お楽しみください!

結論

そこで、そこには6つのjQueryフォーム・ウィザード・プラグインの概要があります。これらのプラグインの特徴と強さは少し異なります。あなたが選択するのはあなたのプロジェクト要件に依存します。私はあなたに役立つこの記事の何かを見つけたことを願っています。下記のコメントを投稿して、何かが欠落しているか、あなたのお気に入りのプラグインがあるかどうかをお知らせください。

March 1, 2018