Memperkenalkan permohonan anda dengan Gembala-tutorial js-php.cn

Takeaways Key

Gembala, yang dibangunkan oleh HubSpot, adalah perpustakaan JavaScript yang mudah yang membantu pengguna membimbing melalui lawatan aplikasi, menjadikan proses memperkenalkan aplikasi kepada pengguna yang lebih cekap dan interaktif.

Sebagai pemaju web, anda mungkin menyedari bahawa membuat aplikasi sering menjadi bahagian yang mudah - menyampaikannya kepada dunia adalah tugas yang sukar. Ada yang lebih suka membuat persembahan, beberapa yang lain membuat video. Bukankah lebih baik jika anda mempunyai sesuatu untuk membantu anda berjalan pengguna anda melalui aplikasi anda? Masukkan Gembala, oleh Hubspot. Gembala adalah perpustakaan JavaScript yang mudah yang membantu anda membimbing pengguna anda melalui lawatan aplikasi anda. Ia membantu anda mengarahkan pengguna anda ke tempat yang betul, sama seperti gembala menjaga kawanan domba -dombanya. Terdapat perpustakaan lain untuk tujuan ini juga, tetapi sebab saya lebih suka gembala adalah bahawa ia tidak mempunyai sebarang kebergantungan. Ia juga mempunyai sokongan untuk Coffeescript, walaupun kami hanya akan meneroka JavaScript di sini.

Bermula

Gembala adalah sumber terbuka dan kodnya boleh didapati di GitHub. Demo Gembala juga boleh didapati di HubSpot. Mari kita mulakan. Bagi yang tidak sabar, inilah kod asas untuk bermula. Ini mewujudkan satu langkah lawatan ke permohonan anda. Ini mengikat dialog ke bahagian bawah elemen yang dipadankan oleh pemilih #id_selector.

<span>var tour = new Shepherd<span>.Tour</span>({
</span>  <span>defaults: {
</span>    <span>classes: 'shepherd-theme-arrows',
</span>    <span>scrollTo: true
</span>  <span>}
</span><span>});
</span>
tour<span>.addStep('myStep', {
</span>  <span>title: 'Hi there!',
</span>  <span>text: 'This would help you get started with this application!',
</span>  <span>attachTo: '#id_selector bottom',
</span>  <span>classes: 'shepherd shepherd-open shepherd-theme-arrows shepherd-transparent-text',
</span>  <span>buttons: [
</span>    <span>{
</span>      <span>text: 'Exit',
</span>      <span>classes: 'shepherd-button-secondary',
</span>      <span>action: function() {
</span>        <span>return tour.hide();
</span>      <span>}
</span>    <span>}
</span>  <span>]
</span><span>});</span>

Salin selepas log masuk

Breaking Shepherd Down

Sekarang bahawa anda mempunyai kod mudah berjalan, mari kita memecahkan langkah -langkah yang dapat kita fahami.

Termasuk

Anda perlu memasukkan fail JavaScript Gembala tunggal. Gembala juga dilengkapi dengan tema lalai, yang terkandung dalam fail CSS.

<span><span><span><link</span> type<span>="text/css"</span> rel<span>="stylesheet"</span> href<span>="css/shepherd-theme-arrows.css"</span> /></span>
</span><span><span><span><script</span> type<span>="text/javascript"</span> src<span>="./shepherd.min.js"</span>></span><span><span></script</span>></span></span>

Salin selepas log masuk

Inisialisasi Gembala

Sampel kod berikut menunjukkan bagaimana lawatan dibuat melalui JavaScript. Oleh kerana anda akan menambah langkah -langkah ke lawatan anda tidak lama lagi, pilihan lalai dalam permulaan menambah pilihan tersebut kepada semua langkah anda, melainkan jika anda mengatasinya:

tour <span>= new Shepherd<span>.Tour</span>({
</span>  <span>defaults: {
</span>    <span>classes: 'shepherd-theme-arrows',
</span>    <span>scrollTo: true
</span>  <span>}
</span><span>});</span>

Salin selepas log masuk

Membuat langkah

Mari kita lihat bahawa kod "bermula" lagi. Berikut adalah kod yang memulakan satu langkah lawatan:

tour<span>.addStep('myStep', {
</span>  <span>title: 'Hi there!',
</span>  <span>text: 'This would help you get started with this application!',
</span>  <span>attachTo: '#id_selector bottom',
</span>  <span>classes: 'shepherd shepherd-open shepherd-theme-arrows shepherd-transparent-text',
</span>  <span>buttons: [
</span>    <span>{
</span>      <span>text: 'Exit',
</span>      <span>classes: 'shepherd-button-secondary',
</span>      <span>action: function() {
</span>        <span>return tour.hide();
</span>      <span>}
</span>    <span>}
</span>  <span>]
</span><span>});</span>

Salin selepas log masuk

Anda boleh melampirkan butang tambahan jika anda merancang untuk mempunyai beberapa langkah. Berikut adalah contoh cara menggunakan butang jika anda mempunyai dua langkah:

tour<span>.addStep('step1', {
</span>  <span>...
</span>  <span>buttons: [
</span>    <span>{
</span>      <span>text: 'Exit',
</span>      <span>classes: 'shepherd-button-secondary',
</span>      <span>action: function() {
</span>        <span>return tour.hide();
</span>      <span>}
</span>    <span>}, {
</span>      <span>text: 'Next',
</span>      <span>action: tour.next,
</span>      <span>classes: 'shepherd-button-example-primary'
</span>    <span>}
</span>  <span>]
</span><span>});
</span>
tour<span>.addStep('step2', {
</span>  <span>...
</span>  <span>buttons: [
</span>    <span>{
</span>      <span>text: 'Back',
</span>      <span>action: tour.back,
</span>      <span>classes: 'shepherd-button-example-primary'
</span>    <span>}, {
</span>      <span>text: 'Exit',
</span>      <span>classes: 'shepherd-button-secondary',
</span>      <span>action: function() {
</span>        <span>return tour.hide();
</span>      <span>}
</span>    <span>} 
</span>  <span>]
</span><span>});</span>

Salin selepas log masuk

Mulakan lawatan

Selepas menetapkan lawatan, semua yang tersisa adalah untuk memulakannya!

tour<span>.start();</span>

Salin selepas log masuk

API

Gembala menyediakan API yang luas, serta dokumentasi yang menerangkan kelakuannya. Di sini kita akan melalui beberapa panggilan berguna.

contoh lawatan

Pertama, buat lawatan seperti yang ditunjukkan di bawah.

myTour <span>= new Shepherd<span>.Tour</span>({ options })</span>

Salin selepas log masuk

Sekarang, kita akan melihat bagaimana kita boleh bekerja dengan contoh ini. Langkah -langkah dan lalai adalah pilihan contoh lawatan. Kaedahnya diterangkan di bawah.

addStep (id, opsyen) - Seperti yang kita lihat di atas, langkah dibuat dengan memberikan ID kepadanya, kemudian menambah pilihan seperti teks atau butang, yang diterangkan kemudian.
getById (ID) - Kaedah ini digunakan untuk memilih langkah tertentu dengan idnya.
Show (ID) - Tunjukkan langkah tertentu dengan id.
pada (acara, pengendali) - mengikat acara untuk lawatan anda. Ini serupa dengan kaedah JQuery's Bind ().
off (acara, pengendali) - Unbinds peristiwa.

Contoh lawatan juga mempunyai acara seperti Start, Complete, Show, dan Hide.

Langkah

Walaupun kami telah menambah langkah sebelum ini, mari kita lihat lebih dekat. Senarai berikut menerangkan pilihan yang boleh anda tentukan.

Tajuk- Anda boleh atau tidak boleh memohon tajuk.
teks - teks yang akan ditunjukkan dalam langkah.
lampiran - Ini mempunyai dua bahagian: pemilih elemen di mana langkahnya akan dilampirkan, dan kedudukan untuk melampirkan langkah ke (iaitu #id_selector bawah).
Kelas - Kelas tambahan untuk ditambah ke dialog anda. Ini bergantung pada tema yang anda gunakan.
Butang - Senarai butang yang akan ditunjukkan. Setiap butang mempunyai teks, kelas tambahan yang akan ditambah kepadanya, dan tindakan yang akan dilakukan semasa mengklik butang.

Terdapat pelbagai kaedah yang boleh digunakan untuk menjadikan tugas anda lebih mudah. Berikut adalah beberapa yang berguna:

tunjukkan () - Tunjukkan langkah.
menyembunyikan () - Sembunyikan langkah.
Batal () - Sembunyikan langkah dan batalkan lawatan.
Lengkap () - Sembunyikan langkah dan selesaikan lawatan.
memusnahkan () - memusnahkan langkah.
on (acara, pengendali) - mengikat peristiwa.
on (event, handler) - Unbinds peristiwa.

Kesimpulan

Walaupun Gembala kelihatan cukup menjanjikan, satu cegukan yang saya perhatikan ialah sokongan penyemak imbas IE 9. Tetapi jika anda tidak merancang untuk menyokong pelayar lama, maka cubalah. Anda boleh mencari demo secara langsung berdasarkan kod artikel ini di GitHub. Demo boleh diubah suai lagi. Anda boleh mencuba pengendali acara mengikat untuk kekunci anak panah ke navigasi gembala. Anda juga boleh membuat kelas CSS dan melampirkannya kepada unsur -unsur yang berbeza untuk beralih fokus dari satu elemen ke yang lain.

Soalan Lazim (Soalan Lazim) Mengenai Permohonan Gembala

Apakah aplikasi Gembala dan bagaimana ia berbeza dari Shepherd.js? Ia berbeza dari Shepherd.js kerana ia direka untuk menjadi lebih mesra pengguna dan lebih mudah dilaksanakan. Walaupun Shepherd.js adalah alat yang berkuasa, ia memerlukan pemahaman yang lebih mendalam tentang JavaScript untuk digunakan dengan berkesan. Permohonan Gembala, sebaliknya, direka untuk diakses oleh pemaju semua tahap kemahiran, dengan API yang mudah dan dokumentasi yang jelas. adalah mudah. Anda boleh memasangnya melalui npm menggunakan perintah NPM memasang aplikasi-Shepherd. Sebaik sahaja dipasang, anda boleh mengimportnya ke dalam projek anda menggunakan Gembala Import dari 'Permohonan-Shepherd'. Gembala membolehkan penyesuaian yang luas. Anda boleh menukar warna, saiz, kedudukan, dan banyak lagi elemen panduan. Ini membolehkan anda membuat panduan yang sepadan dengan rupa dan nuansa aplikasi anda, memberikan pengalaman pengguna yang lancar.

Bagaimana aplikasi Shepherd Handle Complex, Multi-Step Guides?

Gembala aplikasi direka untuk mengendalikan panduan kompleks dengan mudah. Anda boleh membuat panduan pelbagai langkah yang membimbing pengguna melalui satu siri tugas. Setiap langkah boleh mempunyai teks, kedudukan, dan tindakannya sendiri, yang membolehkan anda membuat panduan terperinci, interaktif. Gembala Permohonan direka untuk menjadi mudah untuk diintegrasikan dengan codebase sedia ada. Ia adalah perpustakaan yang mandiri, jadi ia tidak memerlukan rangka kerja atau teknologi tertentu untuk digunakan. Anda hanya boleh mengimportnya ke dalam projek anda dan mula membuat panduan.

Bagaimana aplikasi Shepherd berbanding dengan perpustakaan panduan pengguna yang lain? Walaupun perpustakaan lain mungkin memerlukan lebih banyak pengetahuan teknikal untuk digunakan dengan berkesan, permohonan Gembala direka untuk diakses oleh pemaju semua tahap kemahiran. Ia juga menawarkan pilihan penyesuaian yang luas, membolehkan anda membuat panduan yang sesuai dengan rupa dan rasa aplikasi anda. pada kedua -dua desktop dan peranti mudah alih. Panduan secara automatik menyesuaikan agar sesuai dengan saiz skrin, memastikan pengalaman pengguna yang hebat pada semua peranti. onboarding pengguna baru. Anda boleh membuat panduan terperinci, langkah demi langkah yang berjalan pengguna baru melalui aplikasi anda, membantu mereka memahami cara menggunakannya dengan berkesan. 🎜> Mengemaskini atau mengubahsuai panduan mudah dengan permohonan Gembala. Anda hanya boleh mengubah sifat langkah panduan dalam kod anda, dan perubahan akan ditunjukkan dalam panduan. Ini membolehkan anda menyimpan panduan anda yang terkini apabila aplikasi anda berkembang. Rangkaian untuk Gembala Aplikasi, anda boleh mendapatkan bantuan dan nasihat mengenai forum dan komuniti pembangunan JavaScript dan Web. Dokumentasi untuk Gembala Aplikasi juga merupakan sumber yang hebat untuk belajar bagaimana menggunakan perpustakaan dengan berkesan.

Atas ialah kandungan terperinci Memperkenalkan permohonan anda dengan Gembala. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!