Вэбсайт эсвэл блог үүсгэх, цаашид контентоор дүүргэх явцад янз бүрийн шалтгааны улмаас заримдаа текстийн зарим хэсгийг нуух, илүү их хэмжээний мэдээллийг одоогоор нуусан блокт байрлуулах шаардлагатай болдог. хэрэглэгч өөр зүйл байгаа бөгөөд дараагийн мөр эсвэл хуудас руу шилжихгүйгээр далд агуулгыг үзэх боломжийг түүнд олгоно.
Өмнө нь ийм шийдлийг хэрэгжүүлэхийн тулд олон тооны javascript ашигладаг байсан бол одоо энэ бүгдийг гайхалтай шинж чанаруудыг ашиглан маш амархан хийж болно.

Өнөөдөр бид зөвхөн CSS3 шинж чанаруудыг ашиглан тодорхой текстийн элемент дээр дарахад нээгддэг сайтын хуудас болон тусдаа мессежүүд дээр далд контент үүсгэх хамгийн энгийн аргыг авч үзэх болно. Шилжүүлэгч нь нэг үг, тодруулсан хэллэг, бүхэл өгүүлбэр эсвэл мэдээллийн дүрс байж болно.
Ийм блокуудыг ихэвчлэн их хэмжээний агуулгатай хуудсан дээр ашигладаг бөгөөд үүнийг илүү бүтэцтэй, нягт нямбай болгохын тулд бүх агуулгыг зөвхөн гарчигтай гэж нэрлэгддэг бүлэгт хувааж, бүх текстийг анхдагч байдлаар нуудаг. тодорхой элемент дээр дарж харж болно (дээрхийг үзнэ үү).

Шаардлагагүй усгүйгээр хийхийг хичээцгээе, энэ энгийн механизмыг бүхэлд нь ажиллаж байгаа тодорхой жишээгээр харцгаая, хэрэв та хүсвэл ямар нэг зүйлийг засварлаж болно.

Жишээ №1

Сонгогдоогүй, тэмдэглэгээгүй текстийг нэмэлт мэдээлэл бүхий унадаг блокуудын шилжүүлэгч болгон ашигладаг бөгөөд үүн дээр товшино уу гэсэн хоёрдмол утгагүй урилгатай бөгөөд та үүнийг харахын тулд айдас, эргэлзээгүйгээр хийх ёстой)))

Таны харж байгаагаар бүх зүйл төгс ажилладаг, далд агуулга нь асуудалгүй гарч ирдэг бөгөөд хулганыг бага зэрэг товшилтоор алга болдог бөгөөд үүний зэрэгцээ бид html хүрээ болон форматын аль алинд нь гүйцэтгэх боломжтой хамгийн бага кодыг ашигласан. css загварын. Нэмэлт JavaScript сангуудыг холбохгүйгээр хэрэглэгчийн тал дээр идэвхгүй болсон эсэх талаар мөнхийн санаа зовдог.
Энэ бүх үйлдлийг хэрэгжүүлэх нь CSS3 псевдо ангийн ачаар боломжтой болсон :шалгасан, радио товчлуурууд () гэх мэт интерфэйсийн элементүүдэд хэрэглэнэ. Бид үнэндээ шошгон дээр юу хийсэн Бид төрөл шинж чанарт утгыг шалгах хайрцаг, мөн өвөрмөц танигчтай харгалзах танигч id="hd-1"-ийг өгсөн. for = "hd-1"одоогийн блок шилжүүлэгч. Class.hide доторх none property гэсэн дэлгэцийг тохируулснаар бид чек нүдийг сайтар, үүрд нуух болно.
Үнэндээ энд тайлбарлах онцгой зүйл байхгүй; далд блокуудыг асаах, унтраах бүх механизм нь гурван элементээс бүрдэнэ.

• Checkbox - шошго утга учиртай шалгах хайрцагшинж чанар төрөлмөн тодорхой холбох танигчтай
• Гарчиг (текст солих) - шошго шинж чанарын өвөрмөц танигч утгатай төлөө, (танигч нь шошго танигчтай ижил байх ёстой оролтутга учиртай шалгах хайрцагшинж чанар төрөл).
• Агуулгын блок нь div шошго бөгөөд хэрэглэгч товших хүртэл, янз бүрийн далд агуулгыг (текст, зураг гэх мэт) агуулсан байх болно.

Миний эмх замбараагүй тайлбараас гол нь юу болох нь тодорхой болсон гэж найдаж байна. CSS нь шинэ хэв маягийг ашигладаг (псевдо анги ашиглан шалгасан) өмнө нь нуугдсан агуулгын блокийг хэрэглэгч өвөрмөц танигчаар тэмдэглэсэн нүдтэй холбосон элемент дээр дарахад л харуулах.

Энэ бүхнээс харахад ийм байна чухал тэмдэглэл:

Нэг хуудсан дээр олон далд блок ашиглах үед радио товчлуур бүр нь бусад блокуудын ID-аас ялгаатай өвөрмөц ID-тай байх ёстой.

Тиймээс, бид юу хаашаа, яагаад явдгийг тодорхойлоод, одоо бүх бүтцийн html хүрээг харцгаая.

< input class = "hide" id= "hd-1" type= "checkbox" > < label for = "hd-1" >Энд дарж нээх! < div>Нууцлагдсан контент...... < input class = "hide" id= "hd-2" type= "checkbox" > < label for = "hd-2" >Дэлгэрэнгүйг энд дарж уншина уу! < div>Нууцлагдсан контент...

Энд дарж нээх!

Дэлгэрэнгүйг энд дарж уншина уу!

Дараа нь бид CSS хэв маягийг бий болгоход шууд шилжих бөгөөд үүнгүйгээр энэ загвар бүхэлдээ ажиллахгүй болно. Кодын хамгийн бага хэмжээ нь ямар ч чимэглэлгүйгээр унадаг блокийн дэвсгэрийг бага зэрэг тодруулж, танд зориулж, далд текстийн хүрээг харуулах болно. Та блокуудыг хүссэнээрээ загварчлах, хүрээ, дугуй булан нэмэх, текстийг тодруулах, эсвэл .

1.CSS

. нуух, . нуух + шошго ~ div (дэлгэц: байхгүй; ) /* шошгоны текстийн төрөл */. нуух + шошго, . нуух: шалгасан + шошго (зайлгах: 0; өнгө: ногоон; курсор: заагч; хилийн доод хэсэг: 1px цэгтэй ногоон; ). нуух: шалгасан + шошго + div (дэлгэц: блок; дэвсгэр: #efefef; - moz- хайрцаг- сүүдэр: оруулга 3px 3px 10px #7d8e8f; - webkit- хайрцаг- сүүдэр: оруулга 3px 3px 10px #7d8e8f; хайрцаг- сүүдэр: оруулга 3px 3px 10px #7d8e8f; дүүргэлт: 10px; )

/* шалгах хайрцаг болон агуулгын блокуудыг нуух */ .нуух, .нуух + шошго ~ div (дэлгэц: байхгүй; ) /* шошгоны текстийн харагдах байдал */ .нуух + шошго, .нуух: шалгасан + шошго ( padding: 0; өнгө: ногоон ; курсор: заагч; хүрээ-доод: 1px цэгтэй ногоон; ) /* шилжүүлэгч идэвхтэй үед шошгоны текстийн харагдах байдал */ .нуух: шалгагдсан + шошго (өнгө: улаан; хилийн доод: 0; ) /* checkbox идэвхтэй, агуулга бүхий блокуудыг харуулах */ .hide:checked + label + div ( дэлгэц: блок; дэвсгэр: #efefef; -moz-box-shadow: inset 3px 3px 10px #7d8e8f; -webkit-box-shadow: inset 3px 3px 10px #7d8e8f; хайрцаг-сүүдэр: оруулга 3px 3px 10px #7d8e8f; дэвсгэр: 10px; )

Энэ бүхэн нь даяанч жишээний хувьд бүрэн хангалттай доод хэмжээ юм. Гэхдээ бид ядаж хэдэн сайхан зүйл нэмэхгүй бол бид огтхон ч болохгүй бөгөөд хэрэглэгчдэд хаана товшихыг нүдээр хэлэх нь дээр.
Хоёрдахь жишээнд би нэмэх хэлбэрээр энгийн тэмдэг нэмсэн бөгөөд энэ нь энд өөр зүйл нуугдаж байгааг тодорхой харуулж байна; дарахад тэр даруй хасах болж хувирдаг бөгөөд би нуугдмал блокуудад агуулга бүхий бага зэрэг хөдөлгөөнт дүрс нэмсэн. Тэд гарч ирдэг бөгөөд энэ бүхэн зөвхөн CSS3-ийн ид шидийн тусламжтайгаар гарч ирдэг.

2.CSS

/* шалгах нүд болон агуулгын блокуудыг нуух */. нуух, . нуух + шошго ~ div (дэлгэц: байхгүй; ) /* шошгоны текстийн төрөл */. нуух + шошго (хаваас: 0; дэвсгэр: 0; өнгө: ногоон; курсор: заагч; дэлгэц: шугаман блок; ) /* шилжүүлэгч идэвхтэй үед шошгоны текстийн харагдах байдал */. нуух: шалгасан + шошго (өнгө: улаан; хүрээ- доод: 0; ) /* шалгах хайрцаг идэвхтэй үед контент бүхий блокуудыг харуулах */. нуух: шалгасан + шошго + div (дэлгэц: блок; дэвсгэр: #efefef; - moz- хайрцаг- сүүдэр: оруулга 3px 3px 10px #7d8e8f; - webkit- хайрцаг- сүүдэр: оруулга 3px 3px 10px #7d8e8f; хайрцаг- сүүдэр: оруулга 3px 3px 10px #7d8e8f;зүүн захын зай: 20px; дүүргэгч: 10px; /* гарч ирэх үед бага зэрэг хөдөлгөөнт дүрс */- webkit- animation: fade ease- 0. 5 секундын дотор; - moz- animation: fade ease- 0. 5 секундын дотор; хөдөлгөөнт дүрс: 0. 5 секундын дотор бүдгэрэх; ) /* далд блок гарч ирэх үед хөдөлгөөнт дүрс */@- moz- түлхүүр фрэймүүд бүдгэрнэ (-аас ( тунгалаг байдал: 0 ; ) хүртэл ( тунгалаг байдал: 1 ) ) @- webkit- түлхүүр фрэймүүд бүдгэрнэ (-аас ( тунгалаг байдал: 0 ; ) хүртэл ( тунгалаг байдал: 1 ) ) @ түлхүүр фрэймүүд бүдгэрнэ (-аас ( тунгалаг байдал: 0 ; ) хүртэл ( тунгалаг байдал: 1 ) ). нуух + шошго: өмнө ( дэвсгэр өнгө: #1e90ff; өнгө: #fff; агуулга: " \002 B"; дэлгэц: блок; хөвөх: зүүн; үсгийн хэмжээ: 14px; үсгийн жин: тод; өндөр: 16px; шугамын өндөр: 16px; захын зай: 3px 5px; текстийг зэрэгцүүлэх: төв; өргөн: 16px; - webkit- border- радиус: 50%; - moz- хилийн- радиус: 50%; хилийн радиус: 50%; ). нуух: шалгасан + шошго: өмнө ( контент: " \221 2" ; }

/* шалгах хайрцаг болон агуулгын блокуудыг нуух */ .нуух, .нуух + шошго ~ div (дэлгэц: байхгүй; ) /* шошгоны текстийн харагдах байдал */ .нуух + шошго (маржин: 0; дүүргэх: 0; өнгө: ногоон; курсор : заагч; display: inline-block; ) /* шилжүүлэгч идэвхтэй үед шошгоны текстийн харагдах байдал */ .hide:checked + label (өнгө: улаан; хилийн доод: 0; ) /* шалгах хайрцаг идэвхтэй үед харуулах агуулгатай блокууд */ . hide:checked + label + div (дэлгэц: блок; дэвсгэр: #efefef; -moz-box-shadow: inset 3px 3px 10px #7d8e8f; -webkit-box-shadow: inset 3px 3px 10px #7d8e8f ; box-shadow: inset 3px 3px 10px #7d8e8f; margin-left: 20px; padding: 10px; /* гарч ирэх үед бага зэрэг хөдөлгөөнт дүрс */ -webkit-animation:fade ease-0.5s; -moz-animation:fade ease -0,5 секундын дотор; хөдөлгөөнт дүрс: 0,5 секундын дотор бүдгэрнэ; ) /* далд блок гарч ирэх үед хөдөлгөөнт дүрс гарч ирнэ */ @-moz-keyframes бүдгэрнэ ( ( тунгалаг байдал: 0; ) -аас ( тунгалаг байдал: 1 ) ) @-webkit-keyframes бүдгэрэх ( from ( тунгалаг байдал: 0 ; ) хүртэл ( тунгалаг байдал: 1 ) ) @keyframes fade ( from ( тунгалаг байдал: 0; ) хүртэл ( тунгалаг байдал: 1 ) ) .hide + label:before ( background-color: #1e90ff; өнгө: #fff; агуулга: "\002B"; дэлгэц: блок; хөвөх: зүүн; үсгийн хэмжээ: 14px; үсгийн жин: тод; өндөр: 16px; шугамын өндөр: 16px; захын зай: 3px 5px; текстийг зэрэгцүүлэх: төв; өргөн: 16px; -webkit-border-radius: 50%; -moz-border-radius: 50%; хилийн радиус: 50%; ) .нуух:шалгасан + шошго:өмнө ( контент: "\2212"; )

Бүх тооцоогоор энэ арга нь эргэлзээгүй сайн боловч үргэлжийн адил бөгөөд огт гайхмаар зүйл биш бөгөөд ахиц дэвшлийн мөнхийн тоормос, IE хөтөч, псевдо ангиллын асуудал үүсдэг. шалгасанзөвхөн энэ хөтчийн 9 ба түүнээс дээш хувилбаруудыг дэмждэг. IE-ийн хуучин хувилбаруудын хувьд бүх зүйл ижил хэвээр байгаа тул та javascript ашиглах хэрэгтэй болно.

Нуугдсан хайрцгийг ашигласнаар та загварлаг блок, гулсагч, галерей болон бусад зүйлийг хялбархан хийж болно.

Хүндэтгэсэн, Эндрю

Тодорхойлолт

HTML шошго Маягтын элементийг дарахад гарч ирэх, сайтын зочдод урьдчилан тодорхойлсон сонголтуудын аль нэгийг сонгох боломжийг олгодог уналт (унадаг) жагсаалт үүсгэхэд ашигладаг.

Бүрэлдэхүүн

хоёр ба түүнээс дээш шошго агуулж болно , унадаг жагсаалтад байгаа сонголтуудыг тодорхойлох. Эхний хүүхэд элементийн текст нь эхлээд унадаг жагсаалтад харагдах бөгөөд энэ нь жагсаалтын анхдагч утга байх болно. Өгөгдмөл утгыг өөрчлөх эсвэл тохируулах Та сонгосон шинж чанарыг хүссэн сонголтдоо нэмж болно:

Volvo Сааб VW Ауди

Унждаг жагсаалтын өргөнийг шошгонд заасан хамгийн урт текстээр тодорхойлно .

Атрибутууд

autofocus: Вэб хуудсыг ачаалах үед тухайн элемент автоматаар фокус авах ёстойг заана. Автофокусын логик шинж чанарын боломжит утгууд: Жишээ »

Тайлбар: Автомат фокусын шинж чанарыг IE9 болон түүнээс өмнөх хувилбарууд болон Firefox-д дэмждэггүй.

Идэвхгүй: Элемент идэвхгүй байгааг илтгэж, хэрэглэгч тухайн элементтэй харилцах боломжгүй болно. Идэвхгүй болсон Boolean шинж чанарын боломжит утгууд:

Жишээ » хэлбэр: Элементийн холбогдох хэлбэрийг тодорхойлно. Аттрибутын утга нь элемент танигч юм

. Энэ шинж чанар нь элементийг байрлуулах боломжийг олгодог Баримт бичгийн аль ч газар, зөвхөн элементийн удам биш .

Тайлбар: Firefox-д маягтын атрибутыг дэмждэггүй.

Олон: Нэг дор олон сонголтыг сонгох боломжтойг илэрхийлнэ. Үйлдлийн системээс хамааран хэд хэдэн сонголтууд өөр өөр байдаг:

• Windows: Олон сонголтыг сонгохын тулд CTRL товчийг удаан дарна уу.
• Mac: Олон сонголтыг сонгохын тулд CMD товчийг удаан дарна уу.

Олон тооны логик шинж чанарын боломжит утгууд: Жишээ »

Тэмдэглэл: Олон зүйлийг сонгох янз бүрийн арга замууд болон олон сонголт хийх боломжтой гэсэн нэмэлт мэдэгдлийг хэрэглэгчдэд өгдөг тул унждаг жагсаалтын оронд шалгах нүдийг ашиглахыг зөвлөж байна.

Нэр: Унждаг жагсаалтын нэрийг тодорхойлно. Үүнийг илгээсний дараа маягтын өгөгдөлд хандах эсвэл JavaScript дахь элементийг лавлахад ашиглаж болно. хэмжээ: Унждаг жагсаалтад харагдах сонголтуудын тоог заана. Хэмжээ атрибутын утга нь 1-ээс их боловч жагсаалтад байгаа сонголтуудын нийт тооноос бага байвал хөтөч автоматаар гүйлгэх мөрийг нэмж, харах олон сонголт байгааг илтгэнэ.

Сайт дээрх HTML маягтуудыг тодорхойлсон HTML хаягууд

Бид интернетэд вэб сайт болон хувь хүний ​​хуудас үүсгэдэгзочинтой харилцах.

HTML маягтуудЭнэ нь сайтад зочдыг бүртгэх, харилцан санал асуулга явуулах, танд мессеж илгээх, худалдан авалт хийх гэх мэт үйлдлүүдэд ашиглагддаг. HTMLМаягт нь нэг зорилгоор бүтээгдсэн: програм хангамжийн скрипт эсвэл имэйлээр боловсруулах зорилгоор мэдээллийг цуглуулж, дараа нь дамжуулах.

Жишээ HTML маягт | Сайт руу орно уу

Шошго, шинж чанар, үнэ цэнэ

- хэлбэрийг тодорхойлох.
• name="" - маягтын нэрийг тодорхойлно.
• method="" - маягтаас өгөгдөл илгээх аргыг тодорхойлно. Утга: "авах" (өгөгдмөл) ба "шууд" . "Шуудангийн" аргыг ихэвчлэн ашигладаг бөгөөд энэ нь их хэмжээний өгөгдлийг дамжуулах боломжийг олгодог.
• action="" - өгөгдлийг боловсруулахаар илгээх url хаягийг тодорхойлно. Манай тохиолдолд - enter_data.php ..
• - өгөгдөл оруулах товчлуур, унтраалга, текст талбар гэх мэт хэлбэрийн элементүүдийг тодорхойлох.
• type = "текст" - өгөгдөл оруулах текст талбарыг тодорхойлно.
• type = "нууц үг" - нууц үг оруулах талбарыг тодорхойлж, текстийг одоор эсвэл тойрог хэлбэрээр харуулна.
• type = "checkbox" - радио товчлуурыг тодорхойлно.
• type="hidden" - далд хэлбэрийн элементийг тодорхойлдог - нэмэлт мэдээллийг сервер рүү шилжүүлэхэд ашигладаг.
• size="25" - тэмдэгт дэх текст талбарын урт.
• maxlength = "30" - оруулсан тэмдэгтүүдийн зөвшөөрөгдөх дээд хэмжээ.
• value="" - хэрэв энэ нь радио товчлуур эсвэл унтраалгатай холбоотой бол боловсруулахад илгээгдэх утгыг тодорхойлно. Текст талбар эсвэл товчлуурын нэг хэсэг болох энэ атрибутын утгыг дээрх жишээн дээр жишээ нь Вася эсвэл Нэвтрэх хэлбэрээр харуулах болно.

Жишээ HTML маягт | Сайт дээрх сэтгэгдэл

Нэр Мэйл

Шошго, шинж чанар, үнэ цэнэ

• action="http://site/comments.php" - маягтаас өгөгдөл илгээгдэх URL хаягийг тодорхойлно.
• id="" - маягтын элементийн нэр болон танигчийг тодорхойлно.
• name="" - маягтын элементийн нэрийг тодорхойлно.
• - маягтын хэсэг болгон текст талбарыг тодорхойлох.
• cols="" - маягтын текст талбарын баганын тоог тодорхойлно.
• rows="" - маягтын текст талбарын мөрийн тоог тодорхойлно.

Хэрэв хооронд нь Текстийг байрлуулбал үүнийг хялбархан арилгаж болох жишээ болгон талбар дотор харуулах болно.

Жишээ HTML маягт | Унждаг жагсаалт

Эхний байр суурь Хоёр дахь байр суурь Гурав дахь байр суурь Дөрөвдүгээр байр суурь

Шошго, шинж чанар, үнэ цэнэ

• - сонгох байрлал бүхий жагсаалтыг тодорхойлох.
• size="" - харагдах жагсаалтын байршлын тоог тодорхойлно. Хэрэв утга нь 1 бол бид унадаг жагсаалттай ажиллаж байна.
• - жагсаалтын байрлалыг (зүйл) тодорхойлох.
• value="" - маягтаар тодорхойлогдсон URL руу илгээгдэх утгыг агуулна.
• сонгосон="сонгосон" - жагсаалтын зүйлийг жишээ болгон тодруулна.

Жишээ HTML маягт | Гүйлгэх мөр бүхий жагсаалт

size="" атрибутын утгыг нэмэгдүүлснээр бид гүйлгэх мөр бүхий жагсаалтыг авна.

Нэгдүгээр байр Хоёрдугаар байр Гуравдугаар байр Дөрөвдүгээр байр

Эхний байр суурь Хоёр дахь байр суурь Гурав дахь байр суурь Дөрөвдүгээр байр суурь

Энэ сонголтыг хийхийн тулд олон "олон" тугийг ашиглана уу, энэ нь олон байрлал сонгох боломжтой болгодог. Түүний байхгүй нь зөвхөн нэг зүйлийг сонгох боломжийг олгодог.

type="submit" - товчлуурыг тодорхойлно.

type="reset" - дахин тохируулах товчлуурыг тодорхойлно.

утга = "" - товчлуур дээрх шошгыг тодорхойлно.

Нэмэлт үзнэ үү:

Тодорхойлолт

Tag унадаг жагсаалт хэлбэрээр интерфэйсийн элемент, мөн доор үзүүлсэн шиг дан эсвэл олон сонголттой жагсаалт үүсгэх боломжийг танд олгоно. Эцсийн харагдах байдал нь шошгоны хэмжээтэй шинж чанарыг ашиглахаас хамаарна жагсаалтын өндрийг тохируулдаг. Жагсаалтын өргөнийг шошгонд заасан хамгийн өргөн текстээр тодорхойлно , мөн хэв маягийг ашиглан өөрчлөх боломжтой. Зүйл бүрийг шошго ашиглан үүсгэсэн , саванд үүрлэсэн байх ёстой . Хэрэв та жагсаалтын өгөгдлийг сервер рүү илгээхээр төлөвлөж байгаа бол элементийг байрлуулах хэрэгтэй маягт дотор. Скриптээр дамжуулан жагсаалтын өгөгдөлд хандах үед энэ нь бас зайлшгүй шаардлагатай.

Синтакс

1-р зүйл 2-р цэг

Атрибутууд

Гарын товчлолыг ашиглан жагсаалт руу шилжих боломжийг танд олгоно. Хуудсыг ачаалсны дараа анхаарлаа төвлөрүүлэх жагсаалтыг тохируулна. Элементийн хандалт болон өөрчлөлтийг блоклодог. Жагсаалтыг маягттай холбоно. Жагсаалтын олон зүйлийг нэгэн зэрэг сонгох боломжийг танд олгоно. Сервер рүү илгээх эсвэл скриптээр дамжуулан хандах элементийн нэр. Маягтыг илгээхээс өмнө жагсаалтыг сонгох шаардлагатай. Харуулах жагсаалтын мөрүүдийн тоо. Tab товчийг дарах үед элементүүдийн хооронд шилжих дарааллыг тодорхойлно

Хаалтын шошго

Шаардлагатай.

HTML5 IE Cr Op Sa Fx

Баатар сонго Чебурашка Матар Гена Шапокляк Харх Лариса

HTML сонголтын шошго нь хэрэглэгчдэд урьдчилан тодорхойлсон утгуудаас нэг сонголтыг сонгох боломжийг олгодог унадаг жагсаалт үүсгэхэд ашиглагддаг.

Хэрэглэгчдэд харагдах текст нь утгын шинж чанарт заасан текстээс ялгаатай байж болно. Унтраах жагсаалтыг хэрхэн үүсгэхийг эндээс үзнэ үү.

Ногоон Шар Хар

• Унждаг жагсаалтыг шошго ашиглан үүсгэнэ ;
  Шошго дотор
  Сонгох сонголтуудыг шошго ашиглан тодорхойлно ;
• Шошгонд та PHP, JS, JQuery гэх мэтийг ашиглан сонгосон сонголтод хандахын тулд утгын шинж чанарыг ашиглаж болно.

Унждаг жагсаалтын загвар гаргахын тулд ID ашиглахын оронд CSS ангиллыг зааж өгөх боломжтой.

Дараагийн хэсэгт би HTML унадаг жагсаалтыг JavaScript/JQuery дээр ашиглах жишээг харуулах болно. Жишээ нь хэв маягийг хэрхэн тохируулахыг харуулах болно CSS/CSS3 ашиглан болон Bootstrap хүрээ.

Энгийн унадаг жагсаалт үүсгэх жишээ

Энэ жишээнд гурван сонголттой унадаг жагсаалт үүсгэхийн тулд HTML сонгох сонголтыг ашигладаг:

Дээрх жишээнд унадаг жагсаалт үүсгэхийн тулд дараах тэмдэглэгээг ашигладаг.

5 10 15 20 25

Утга шинж чанарыг ашиглах

Өмнө дурьдсанчлан, утгын шинж чанарын утга нь хуудсан дээр харуулсан текстээс ялгаатай байж болно. Жишээлбэл, та хэрэглэгчдэд зориулсан улс эсвэл өнгөний нэрсийг харуулах, мөн value шинж чанарт богино кодыг ашиглах боломжтой.

Дараах жишээнд бид утгын атрибут бүхий унадаг жагсаалт үүсгэх болно.

Онлайн демо болон кодыг үзэх

Шошгоны хувьд Дараах кодыг ашиглана.

Марун Ногоон Шар Цэнхэр Улаан

JavaScript дээр сонгосон сонголтод хандах жишээ

Одоо сонгосон сонголтын утгад хандах, зарим үйлдлийг гүйцэтгэх жишээг бий болгоё. Бид дээрх жишээн дээрхтэй ижил жагсаалтыг өнгөний сонголттойгоор үүсгэдэг. Сонгосны дараа тухайн өнгийг баримт бичигт хэрэглэхийн тулд товчийг дарна уу:

Онлайн демо болон кодыг үзэх

HTML сонголтын утгын хувьд дараах кодыг ашиглана:

Марун Ногоон Шар Цэнхэр Улаан Бусад

Опционы утгын атрибутын утгад хандахын тулд дараах мөр кодын JavaScript-д ашиглагддаг :

var seltheme = document.getElementById("selcolor").утга;

Товчлуур дээр дарахад JS функц дуудагдах бөгөөд энэ нь унждаг жагсаалтаас сонгосон утгыг хувьсагчид оноох болно. Энэ утгыг одоогийн баримт бичигт өнгө оруулахад ашиглана.

JQuery дээр харагдах текстэд хандах

Энэ удаад би JQuery ашиглан сонгосон сонголтын утгад хандах болно: текст болон утгын аль алинд нь. Энэ үзүүлэн дээр би HTML дээрх сонголтын шошгон дээрх харагдах текстэд хандах болно:

Онлайн демо болон кодыг үзэх

Шошгон дахь сонголт бүрийн кодонд

утга нь текстээс ялгаатай. Таныг өнгө сонгосны дараа jQuery нь анхааруулга дотор харагдах текстийг харуулна. Шошго код дараачийн:

Марун Ногоон Шар Цэнхэр Улаан

Энэ утгад хэрхэн хандахыг эндээс үзнэ үү HTML сонгосон JavaScript сонголтыг сонгоно:

var selectedcolor = $("#jqueryselect сонголт:сонгосон").text();

Та мөн JQuery $.val() аргыг ашиглан утгад хандаж болно:

var selectedcolor = $("#jqueryselect").val();

Дээрх жишээн дээрх энэ мөрийг солих ба код нь харагдах текстээс илүү утгын шинж чанарт богино код/өнгөт утгыг харуулах болно.

PHP скрипт дээр утгыг олж авах жишээ

Унждаг жагсаалтаас сонгосон сонголтын утгыг авах энэ жишээнд маягтыг шошго ашиглан үүсгэсэн тэмдэглэгээний хэсэгт. Унждаг жагсаалтаас өнгө сонгосны дараа "Илгээх" товчийг дарна уу. Маягтын өгөгдлийг ижил PHP файл руу шилжүүлэх бөгөөд дараа нь сонгосон өнгө гарч ирнэ.

Онлайн демо болон кодыг үзэх

Жишээнд ашигласан маягтын арга нь POST тул PHP $_POST[“”] массивыг ашиглан маягтын утгыг авах боломжтой. Энэ бол жишээнд ашигласан маягтын код юм:

Өнгө сонгох:

Марун Ногоон Шар Цэнхэр Улаан