Modul PopupPro JS-tutorial js-php.cn

PopupPro - Perpustakaan Popup Boleh Disesuaikan ?

PopupPro JS Module

Repositori: PopupPro ?

Penerangan:

PopupPro ialah pustaka JavaScript moden dan boleh disesuaikan yang direka untuk meningkatkan interaksi pengguna dengan pop timbul yang serba boleh dan bergaya. Ia melangkaui perpustakaan pop timbul tradisional dengan set ciri yang luas, termasuk konfigurasi fleksibel, animasi lancar dan pilihan penggayaan yang kaya. Sama ada anda memerlukan makluman ringkas atau mod kompleks dengan pelbagai butang, PopupPro menyediakan cara intuitif untuk mencipta pop timbul yang menarik dan menarik secara visual untuk aplikasi web anda. ✨

ciri ?

Pilihan Boleh Disesuaikan:
- Tajuk & Mesej: Tetapkan tajuk dan mesej pop timbul dengan mudah. ?
- Warna Latar Belakang & Warna Teks: Warna yang boleh disesuaikan sepenuhnya untuk rupa yang disesuaikan. ?
- Saiz & Penggayaan: Lebar, tinggi dan jejari jidar boleh laras untuk dipadankan dengan reka bentuk anda. ?
- Butang Tutup: Pilihan untuk memasukkan atau mengecualikan butang tutup. ❌
Sokongan Animasi:
- Animasi Terbina dalam: Pilih daripada animasi yang dipratakrif seperti lantunan atau cipta animasi tersuai. ?
- Tempoh Animasi: Perhalusi masa animasi untuk pengalaman yang lancar. ⏳
Konfigurasi Butang:
- Berbilang Butang: Sokongan untuk berbilang butang dengan teks boleh disesuaikan. ?
- Penggayaan Butang: Gaya butang dengan warna, jidar dan kesan tuding yang berbeza. ?
- Tindakan Butang: Tentukan tindakan dan URL ubah hala untuk setiap butang. ?
Responsif dan Boleh Diakses:
- Reka Bentuk Responsif: Direka untuk berfungsi dengan baik pada pelbagai saiz skrin dan peranti. ??
- Kebolehaksesan: Pengurusan fokus dan pengendalian klik tindanan untuk kebolehaksesan yang dipertingkatkan. ♿
Pengendalian Ralat:
- Pelaporan Ralat: Pengendalian ralat terbina dengan pengelogan dan makluman konsol. ⚠️

Bagaimana PopupPro Terserlah?

1. Penyesuaian Luas: Tidak seperti kebanyakan perpustakaan pop timbul, PopupPro membenarkan kawalan berbutir ke atas hampir setiap aspek pop timbul, termasuk jenis animasi, gaya butang dan reka bentuk keseluruhan. Tahap penyesuaian ini memastikan tetingkap timbul anda boleh disesuaikan agar sesuai dengan lancar ke dalam mana-mana reka bentuk.

2. Fleksibiliti Animasi: Walaupun banyak modul pop timbul menawarkan animasi fade-in/fade-out asas, PopupPro menyokong pelbagai animasi, termasuk animasi tersuai, untuk mencipta pengalaman pengguna yang menarik dan dinamik. Anda boleh memilih daripada animasi terbina dalam seperti lantunan atau menentukan sendiri.

3. Konfigurasi Butang Serbaguna: PopupPro menyokong berbilang butang dengan konfigurasi yang pelbagai. Setiap butang boleh mempunyai teks, gaya, tindakan dan URL ubah hala pilihannya sendiri, menjadikannya mungkin untuk mengendalikan interaksi pengguna yang kompleks dalam satu pop timbul.

4. Fokus pada Kebolehcapaian: PopupPro menekankan kebolehaksesan dengan ciri seperti pengurusan fokus dan pengendalian klik tindanan, memastikan pop timbul anda boleh digunakan oleh semua orang, termasuk pengguna kurang upaya.

5. Pengendalian Ralat dan Nyahpepijat: Pustaka termasuk pengendalian ralat menyeluruh dengan pengelogan konsol dan pemberitahuan amaran, memudahkan proses penyahpepijatan dan meningkatkan kebolehpercayaan.

6. Reka Bentuk Bersih dan Moden: Penggayaan lalai PopupPro adalah moden dan bersih, memberikan penampilan profesional di luar kotak. Ia juga menawarkan pilihan penggayaan yang meluas untuk dipadankan dengan keperluan reka bentuk khusus anda.

7. Reka Bentuk Responsif: PopupPro direka bentuk untuk menyesuaikan diri dengan pelbagai saiz skrin, memastikan pop timbul anda kelihatan hebat pada kedua-dua peranti mudah alih dan desktop.

Mengenai Pemaju ??

Pembangun: Mayank Chawdhari ?

Mayank Chawdhari ialah pembangun web yang berdedikasi dan inovatif dengan tumpuan untuk mencipta aplikasi web yang elegan dan mesra pengguna. Dengan kepakaran dalam JavaScript, CSS dan PHP, Mayank membawa semangat untuk kod bersih dan pengalaman pengguna yang luar biasa. Terkenal kerana menyampaikan penyelesaian berkualiti tinggi dan meneroka teknologi baharu secara berterusan, Mayank komited untuk memajukan bidang pembangunan web dan meningkatkan interaksi pengguna. ??

penggunaan ?

1. Sertakan Perpustakaan:

Muat turun PopupPro.js daripada repositori ini atau sertakan terus dalam projek anda. Tambahkan teg skrip berikut pada fail HTML anda:

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

Salin selepas log masuk

2. Contoh Pop Timbul Asas:

Tambah butang pada HTML anda dan konfigurasikan pop timbul dengan 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>

Salin selepas log masuk

3. Pilihan Konfigurasi:

tajuk: Tajuk pop timbul. ?️
mesej: Teks mesej dipaparkan dalam pop timbul. ?️
Warna latar belakang: Warna latar belakang bekas pop timbul. ?
warna teks: Warna teks. ?️
lebar: Lebar bekas pop timbul. ?
tinggi: Ketinggian bekas pop timbul (pilihan). ?
borderRadius: Jejari sempadan untuk sudut bulat. ?
closeButton: Nilai Boolean untuk menunjukkan atau menyembunyikan butang tutup. ❌
animationDuration: Tempoh animasi pop timbul. ⏳
animasi: Jenis animasi (cth., lantunan). ?
butang: Tatasusunan konfigurasi butang, termasuk teks, gaya, tindakan klik dan URL ubah hala pilihan. ?

4. Tindakan Butang Mengendalikan:

Setiap butang boleh dikonfigurasikan dengan teks, gaya, fungsi onClick dan URL ubah hala pilihan. Pop timbul akan ditutup secara automatik selepas butang diklik melainkan dinyatakan sebaliknya. ?

5. Penggunaan Lanjutan:

Untuk menyesuaikan tetapan lalai, gunakan kaedah setOptions:

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

Salin selepas log masuk

6. Pengendalian Ralat:

Jika ralat berlaku, ia akan dilog ke konsol dan dipaparkan dalam dialog amaran untuk nyahpepijat pantas. ?️

Menyumbang?

Sumbangan dialu-alukan! Sila buka isu, serahkan cadangan atau buat permintaan tarik. Untuk garis panduan terperinci, rujuk fail CONTRIBUTING.md dalam repositori. ?