Хэрхэн сайтаа зочдын сонирхлыг татахуйц болгох вэ? Энэ асуулт бараг бүх интернет нөөцийн эздийн санааг зовоож байна: худалдаачид, блогчид, жижиг, том бизнес эрхлэгчид, аялагчид болон дэлхийд хэлэх зүйлтэй бүтээлч хүмүүс.
Вэбсайт яагаад үзэсгэлэнтэй, ажиллагаатай байх ёстой вэ?
Зочлох тоо нь тухайн сайтын сэдэв, зорилтот үзэгчид, хүмүүсийн тухайн бүтээгдэхүүнийг сонирхож буй байдал, хөрөнгө оруулалт, сурталчилгаа, контент болон бусад олон хүчин зүйлээс хамаарна. Гэхдээ сайтыг “хувцас угтаж” байхыг үгүйсгэх аргагүй. Энэ нь эх сурвалжийн эхний бөгөөд гол хуудас бөгөөд түүний нүүр царай болох дуудлагын карт бөгөөд зочин тухайн контентыг цаашид үзэхэд цаг заваа зарцуулах эсэхээ ойлгох ёстой.
Мөн алдаа гаргах зай байхгүй! АНУ-ын нэгэн техникийн их сургуулийн судалгаагаар зочлон сайтын анхны сэтгэгдлийг секунд хүрэхгүй хугацаанд олж авдаг. Дунджаар хүн 3 секундын дотор сайтыг "сканнердаг". Аянгын хурд, тийм үү?!
Нөөцийн амжилтын 70 хүртэлх хувь нь үндсэн хуудас хэрхэн харагдахаас хамаарна. Хүмүүсийн хамгийн түрүүнд анзаардаг зүйл боллого, харин хоёр дахь нь навигаци юм. Хэрэв логоны хувьд бүх зүйл тодорхой эсвэл тодорхой байвал сайтын эргономикийн навигаци, цэс, тохь тухыг анхаарч үзэх нь зүйтэй юм. Үндэслэлтэй асуулт гарч ирдэг: "Сайтаа хэрхэн яаж чимэглэх, аль болох ажиллагаатай, тохиромжтой, гэхдээ нэгэн зэрэг үзэсгэлэнтэй болгох вэ?" Санал болгож болох олон ер бусын санаанууд байгаа ч хамгийн сонирхолтой нь зөвлөмжүүд юм.
Хэрэгслийн зөвлөмж гэж юу вэ? Зөвлөмжүүд нь сайтын үйл ажиллагааг сайжруулах гайхалтай механизмаас гадна дүрс, үг эсвэл зураг дээр хулганыг гүйлгэх үед тухайн зургийн тайлбарыг харах боломжийг хэрэглэгчдэд олгодог хэрэгсэл юм.
Хэрэгслийн зөвлөмжтэй ажиллах хэрэгсэл
Bootstrap бол зөвлөмж үүсгэх шилдэг хэрэгсэл юм. Энэ нь HTML, CSS, Sass болон JavaScript дээр бичигдсэн программууд болон вэб сайтуудыг бүтээхэд зориулсан сурахад хялбар загваруудын багц юм.
Тодруулбал, зөвлөмжүүд нь Bootstrap загварын график элементүүдийн нэгийг ашигладаг - Зөвлөмж.
Bootstrap хүрээ нь "Twitter"-д зориулагдсан бөгөөд анх "Twitter Blueprint" нэртэй байсан. 2012 онд зарим өөрчлөлтийн дараа энэ нь 12 баганатай сүлжээг хүлээн авч, дасан зохицож, танил нэрийг олж авсан - Tooltip. Зөвлөмж нь дэлгэцийн дэлгэцэн дээр тодорхой элемент дээр хулганаа гүйлгэн ирэхэд гарч ирэх элемент юм.
Сануулга үүсгэж байна
Та атрибутуудыг ашиглан Bootstrap хэрэгслийн зөвлөмжийг үүсгэж болноөгөгдөл, түүнчлэн "Java Script" элементүүдийг идэвхжүүлэх замаар. HTML Bootstrap Tooltip үүсгэх хоёр үндсэн арга байдаг. Эхнийх нь мөн чанар нь шинж чанар, шинж чанарын гарчиг (гарчиг) хэрэглэх явдал юм. Зөвлөмж нь дээд талд гарч ирэх болно (анхдагч тохиргоо). Гүйцэтгэлийн шалтгаанаар "Twitter bootstrap"-д автоматаар эхлүүлэхийг цуцалсан тул зөвлөмжийг эхлүүлэх шаардлагатай гэдгийг санах нь зүйтэй.
Хэрэгслийн зөвлөмжийг эхлүүлэхийн тулд тусгай JavaScript ашигладаг бөгөөд үүнд атрибут бүхий бүх элементийн зөвлөмжийн аргыг сэргээдэг. Хоёрдахь аргын мөн чанар нь jQuery номын сангийн оролцоотойгоор "JavaScript" кодыг ашиглан зааварчилгааг агуулсан хэрэгслийн анги бичиж идэвхжүүлэх явдал юм. Элемент сонгох аргыг эс тооцвол энэ арга нь эхнийхтэй төстэй. Та доор үзүүлсэн арга замаар "Java Script" дээрх зөвлөмжийг идэвхжүүлж болно.
Ачаалах хэрэгслийн зөвлөмжийн жишээ
Хэрэгслийн зөвлөмжийг байрлуулах дөрвөн үндсэн сонголт байдаг: зүүн ба баруун ирмэг дээр, элементийн дээд ба доор.
Дээрээс өгсөн зөвлөгөө
Зөв зөвлөгөө
Доор талд байгаа зөвлөгөө
Зүүн талын зөвлөмж
Хэрэгслийн зөвлөмж ашиглах
Ачаалах хэрэгслийн зөвлөмжийг ашиглах олон зүйл бий. Хэрэглэгч текст дэх гадаад хэл дээрх текстийн орчуулгыг ойлгохын тулд та зөвлөмж оруулах боломжтой. Хэрэгслийн зөвлөмжийг мөн самбар дээр байрлах товчлууруудын утгыг ойлгоход нь туслах хэрэгсэл болгон ашиглаж болно. Bootstrap Tooltip загваруудыг янз бүрийн байгууллагуудын вэб сайтууд дээр ихэвчлэн компанийн мэдээний захиалга үүсгэхэд ашигладаг. Энэ нь үйлчлүүлэгчдэд шинэ мэдээлэл өгөхөөс гадна хямдрал, санал, компани доторх өөрчлөлт зэрэг шинэ мэдээллийг хүлээн авах боломжийг олгодог.
Хэрэглэгч мэдээллийн товхимолд бүртгүүлэхийн тулд имэйл хаягаа оруулах шаардлагатай жишээг авч үзье. Үйлчлүүлэгч үзэгчдийг мэдээ захиалахыг баталгаажуулах ажлыг HTML5 болон шаардлагатай шинж чанарыг ашиглан хялбархан гүйцэтгэдэг. Хэрэглэгч үйлдлийн дарааллыг ойлгохын тулд энэ тохиолдолд зөвлөмж хэрэгтэй болно. Жишээлбэл, имэйл хаягаа оруулсны дараа би "Би компанийн мэдээг өөрийн имэйл хаягаар хүлээн авахыг зөвшөөрч байна" гэсэн нүдийг шалгасан. Доорх маягтын кодын жишээг үзүүлэв.
Энэ кодыг HTML Bootstrap Tooltip-д суулгахад хялбар. Гэхдээ ашиг тус нь мэдэгдэхүйц юм. Одоо хэрэглэгчид компанийн бүх мэдээг мэддэг болсон. Энэ бол нэг төрлийн үнэгүй сурталчилгаа юм.
Попап үүсгэх үед гаргадаг гол алдаануудзөвлөмж
Хэрэв Bootstrap Tooltip ажиллахгүй бол яах вэ? Хэрэгслийн зөвлөмжийн шинж чанар ажиллахгүй байх эхний бөгөөд гол алдаа бол зөвлөмжийг идэвхжүүлээгүй тохиолдолд юм. Үүнийг идэвхжүүлэхийн тулд та тусгай код ашиглах шаардлагатай.
Энэ арга нь танд вэб хуудасны бүх зөвлөмжийг эхлүүлэх боломжийг олгоно.
Хоёр дахь нийтлэг алдаа бол толгой хэсэгт jQuery байхгүй байна.
Холбоос зөв ажиллахад зайлшгүй шаардлагатай нөхцөл байгаа - "Java Script" гэх мэт өгөгдөл боловсруулах функцийг зааж өгөх ёстой.
Хэрэгслийн шинж чанарууд
Үндсэндээ Tooltip бүрэлдэхүүн хэсэг нь хулганын заагчийг хуудасны аль нэг хэсэг дээр шилжүүлэхэд зөвлөмжийг харуулах зориулалттай. Гэхдээ баруун, зүүн, дээд талын тусламжийн зөвлөмжийн байршлаас гадна зөвлөмж нь дараах шинж чанартай:
- Идэвхтэй. Bootstrap Tooltip дээрх true шинж чанарыг ашигласнаар зөвлөмжийг харуулах боломжтой бол ижил шинж чанарыг худал гэж тохируулснаар ямар ч зөвлөмжийг харуулах боломжгүй болно.
- AutoPopDelay нь зөвлөмжийг харуулах цаг юм.
- AutoPopDelay. Хэрэгслийн зөвлөмж гарч ирэхийн тулд хулганын курсор ямар нэг элемент дээр очих ёстойг илэрхийлнэ.
- IsBaloon. Хэрэв HTML ачаалах хэрэгслийн зөвлөмжийн утга үнэн бол заавар нь клоуд болж өөрчлөгдөнө.
- ХэрэгслийнЗөвлөгөөний дүрс. Цонхонд харагдах тэмдэгтийг илэрхийлнэзөвлөмж.
Хэрэгслийн зөвлөгөө
Жишээ нь Wordpress дээр үүсгэсэн сайт дээр үзэсгэлэнтэй зөвлөмжүүдийг бий болгохын тулд вэб хөгжүүлэгчдийн хэлийг сайтар мэдэх шаардлагагүй. Tooltipster гэх мэт залгаас (өргөтгөл) байгаа эсэхийг мэдэхэд хангалттай. Нэрнээс нь харахад энэ залгаас нь Tooltip дээр суурилсан бөгөөд шинж чанар, зорилгынхоо хувьд түүнтэй төстэй юм. Энэ залгаас юунд зориулагдсан вэ? Энэ нь танд зөвлөмжийн дотор шаардлагатай HTML тэмдэглэгээг үүсгэх боломжийг олгоно.
Plugin-ийн ажил нь хуудсан дээр товчлол оруулахад суурилдаг. Бүх үндсэн HTML Bootstrap Tooltip шинж чанаруудыг агуулсан: контент (өгөгдлийн зөвлөмж-агуулга), гарчиг, байрлал, гох гэх мэт. Энэ нь танд сэдэв, фонт, хэрэгслийн зөвлөмжийн хэмжээ, өнгө, зураг оруулах болон бусад зүйлийг өөрчлөх боломжийг олгоно.
