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

リポジトリ: PopupPro ?

説明:

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

---

特徴 ？

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

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

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

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

3. ボタン構(gòu)成:

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

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

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

5. エラー処理:

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

---

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

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

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

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

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

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

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

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

---

開発者について ???

開発者: Mayank Chawdhari ?

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

---

使用法 ？

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

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

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

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

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

<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.設(shè)定オプション:

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

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

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

5.高度な使用法:

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

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

6.エラー処理:

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

---

貢獻(xiàn)していますか？

貢獻(xiàn)は大歓迎です!問題を開いたり、提案を送信したり、プル リクエストを作成したりしてください。詳細(xì)なガイドラインについては、リポジトリ內(nèi)の CONTRIBUTING.md ファイルを參照してください。 ?

---

ライセンス？

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

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

以上がPopupPro JS モジュールの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。