PopupPro JS モジュール

PopupPro - カスタマイズ可能なポップアップ ライブラリ ?

リポジトリ: PopupPro ?

説明:

PopupPro は、多用途でスタイリッシュなポップアップでユーザー インタラクションを強化するように設計された、高度にカスタマイズ可能な最新の JavaScript ライブラリです。柔軟な構成、スムーズなアニメーション、豊富なスタイル オプションなどの広範な機能セットにより、従来のポップアップ ライブラリを超えています。単純なアラートが必要な場合でも、さまざまなボタンを備えた複雑なモーダルが必要な場合でも、PopupPro は、Web アプリケーション用の魅力的で視覚的に魅力的なポップアップを作成する直感的な方法を提供します。 ✨

特徴 ？

1. カスタマイズ可能なオプション:

   • タイトルとメッセージ: ポップアップのタイトルとメッセージを簡単に設定します。 ?
   • 背景色とテキストの色: カスタマイズ可能な外観を実現する完全にカスタマイズ可能な色。 ?
   • サイズとスタイリング: デザインに合わせて幅、高さ、境界線の半径を調整できます。 ?
   • 閉じるボタン: 閉じるボタンを含めるか除外するオプション。 ❌

2. アニメーションのサポート:

   • 組み込みアニメーション: バウンスなどの事前定義されたアニメーションから選択するか、カスタム アニメーションを作成します。 ?
   • アニメーションの長さ: アニメーションのタイミングを微調整して、スムーズなエクスペリエンスを実現します。 ⏳

3. ボタン構成:

   • 複数のボタン: カスタマイズ可能なテキストを含む複数のボタンのサポート。 ?
   • ボタンのスタイル: さまざまな色、境界線、ホバー効果でボタンのスタイルを設定します。 ?
   • ボタン アクション: 各ボタンのアクションとリダイレクト URL を定義します。 ?

4. 応答性とアクセス性:

   • レスポンシブデザイン: さまざまな画面サイズやデバイスで適切に動作するように設計されています。 ??
   • アクセシビリティ: アクセシビリティを向上させるためのフォーカス管理とオーバーレイのクリック処理。 ♿

5. エラー処理:

   • エラー報告: コンソールのログ記録とアラートによる組み込みのエラー処理。 ⚠️

PopupPro はどのように際立っているのでしょうか?

1.広範なカスタマイズ: 多くのポップアップ ライブラリとは異なり、PopupPro では、アニメーション タイプ、ボタン スタイル、全体的なデザインなど、ポップアップのほぼすべての側面をきめ細かく制御できます。このレベルのカスタマイズにより、ポップアップをあらゆるデザインにシームレスに適合するように調整できます。

2.アニメーションの柔軟性: 多くのポップアップ モジュールは基本的なフェードイン/フェードアウト アニメーションを提供しますが、PopupPro はカスタム アニメーションを含むさまざまなアニメーションをサポートし、魅力的で動的なユーザー エクスペリエンスを作成します。バウンスなどの組み込みアニメーションから選択することも、独自のアニメーションを定義することもできます。

3.多彩なボタン構成: PopupPro は、さまざまな構成の複数のボタンをサポートします。各ボタンには独自のテキスト、スタイル、アクション、およびオプションのリダイレクト URL を設定できるため、単一のポップアップ内で複雑なユーザー操作を処理できます。

4.アクセシビリティに重点を置く: PopupPro は、フォーカス管理やオーバーレイのクリック処理などの機能によりアクセシビリティを重視し、障害のあるユーザーを含むすべての人がポップアップを使用できるようにします。

5.エラー処理とデバッグ: このライブラリには、コンソールのログ記録とアラート通知による包括的なエラー処理が含まれており、デバッグ プロセスを簡素化し、信頼性を向上させます。

6.クリーンでモダンなデザイン: PopupPro のデフォルトのスタイルはモダンでクリーンで、すぐに使えるプロフェッショナルな外観を提供します。また、特定のデザインのニーズに合わせた広範なスタイル オプションも提供します。

7.レスポンシブ デザイン: PopupPro はさまざまな画面サイズに適応するように設計されており、モバイル デバイスとデスクトップ デバイスの両方でポップアップが美しく表示されます。

開発者について ?‍?

開発者: Mayank Chawdhari ?

Mayank Chawdhari は、エレガントでユーザーフレンドリーな Web アプリケーションの作成に重点を置いた、献身的で革新的な Web 開発者です。 JavaScript、CSS、PHP の専門知識を備えた Mayank は、クリーンなコードと優れたユーザー エクスペリエンスに対する情熱をもたらします。高品質のソリューションを提供し、新しいテクノロジーを継続的に探索することで知られる Mayank は、Web 開発分野の進歩とユーザー インタラクションの強化に取り組んでいます。 ??

使用法 ？

1.ライブラリを含めます:

このリポジトリから PopupPro.js をダウンロードするか、プロジェクトに直接含めます。次のスクリプト タグを HTML ファイルに追加します:

<script src="path/to/PopupPro.js"></script>

2.基本的なポップアップの例:

HTML にボタンを追加し、JavaScript でポップアップを構成します。

<button onclick="PopupPro.show({
    title: 'Login Authentication',
    message: 'Wrong password or username, Please try again',
    backgroundColor: '#333',
    textColor: '#fff',
    width: '400px',
    borderRadius: '20px',
    buttons: [
        {
            text: 'Retry',
            style: 'default',
            onClick: function() { console.log('Retry button clicked'); }
        },
        {
            text: 'Cancel',
            style: 'default',
            onClick: function() { console.log('Cancel button clicked'); }
        }
    ]
})">Show Popup</button>

3.設定オプション:

• title: ポップアップのタイトル。 ?️
• message: ポップアップに表示されるメッセージ テキスト。 ?️
• backgroundColor: ポップアップ コンテナーの背景色。 ?
• textColor: テキストの色。 ?️
• width: ポップアップ コンテナーの幅。 ?
• 高さ: ポップアップ コンテナーの高さ (オプション)。 ?
• borderRadius: 丸い角の境界線の半径。 ?
• closeButton: 閉じるボタンを表示または非表示にするブール値。 ❌
• animationDuration: ポップアップ アニメーションの継続時間。 ⏳
• アニメーション: アニメーションのタイプ (バウンスなど)。 ?
• ボタン: テキスト、スタイル、クリックアクション、およびオプションのリダイレクト URL を含むボタン構成の配列。 ?

4.ボタンアクションの処理:

各ボタンは、テキスト、スタイル、onClick 関数、およびオプションのリダイレクト URL で構成できます。特に指定しない限り、ボタンをクリックするとポップアップは自動的に閉じます。 ?

5.高度な使用法:

デフォルト設定をカスタマイズするには、setOptions メソッドを使用します。

<script src="path/to/PopupPro.js"></script>

6.エラー処理:

エラーが発生した場合は、コンソールに記録され、迅速なデバッグのために警告ダイアログに表示されます。 ?️

貢献していますか？

貢献は大歓迎です!問題を開いたり、提案を送信したり、プル リクエストを作成したりしてください。詳細なガイドラインについては、リポジトリ内の CONTRIBUTING.md ファイルを参照してください。 ?

ライセンス？

このプロジェクトは MIT ライセンスに基づいてライセンスされています。詳細については、LICENSE ファイルを参照してください。 ?

さらにサポートや質問が必要な場合は、GitHub リポジトリで問題を開いてください。 ?

以上がPopupPro JS モジュールの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。