JQuery yordamida tanlash uslubini o'zgartiring. IkSelect - uslublar uchun mukammal plagin Beautiful tanlang jQuery ni tanlaydi

Diqqat! Keyingi rivojlanish va plaginni qo'llab-quvvatlash endi uning bir qismi bo'lganligi sababli to'xtatildi.

Veb-ishlab chiqishdagi eng yoqimsiz (va hatto dahshatli deb aytardim) narsalardan biri bu html shakllarining joylashuvidir. Afsuski, brauzer va brauzerdan qat'i nazar, shakl elementlarini ko'rsatish uchun yagona standart yo'q operatsion tizim, xuddi kaskadli uslublar jadvallari yordamida ushbu elementlarning ba'zilarini sozlashning hech qanday usuli yo'qligi kabi.

Quyidagi HTML forma elementlarini toʻliq uslublash mumkin emas:

• ochiladigan ro'yxat;
• tasdiqlash qutisi;
• o'tish.
• faylni yuborish uchun maydon.

Xabarning sarlavhasidan ko'rinib turibdiki, bu erda biz faqat tanlanganlar haqida gaplashamiz.

Ochiladigan ro'yxatlarni shakllantirish uchun jQuery plaginlari ko'rinishida ko'plab tayyor echimlar mavjud. Ammo men (biror yoki boshqa sababga ko'ra plaginlarning hech biri menga mos kelmaganligi sababli) o'z g'ildiragimni qayta ixtiro qilish orqali borishga qaror qildim va ushbu maqolada baham ko'rgan o'z plaginimni yozdim.

Darhol shuni ta'kidlashni istardimki, ushbu plagin tanlanganlardan foydalanishning barcha mumkin bo'lgan holatlari uchun mos emas (kamchiliklarni o'qing).

Siz mening plaginim yordamida selektor uslubining namunasini ko'rishingiz mumkin. Men ularni tasvirlardan foydalanmasdan loyihalashtirdim.

• JavaScript o'chirilgan bo'lsa, standart selektorlar ko'rsatiladi.
• Skript hajmi kichik, taxminan 4 kilobayt.
• IE6+ va barcha zamonaviy ish stoli brauzerlarida ishlaydi.
• Inline ko'rsatilgan.
• CSS yordamida osonlikcha uslublangan.
• Ochiladigan ro'yxat uchun maksimal balandlikni belgilash imkonini beradi (CSS xususiyati max-height).
• Agar kenglik belgilanmagan bo'lsa, uni avtomatik ravishda moslashtiradi.
• Sichqoncha g'ildiragini aylantirishni qo'llab-quvvatlaydi.
• "Aqlli joylashishni aniqlash" ga ega, ya'ni. ro'yxatni ochishda sahifaning ko'rinadigan qismidan tashqariga chiqmaydi.
• Tab tugmachasini bosish va klaviaturadagi strelkalar bilan o'tishni "tutib olish" mumkin.
• "Disabled" atributini qo'llab-quvvatlaydi.
• Shuningdek, u dinamik ravishda qo'shilgan/o'zgartirilgan tanlovlar bilan ishlaydi.

• Bir nechta atributni qo'llab-quvvatlamaydi, ya'ni. bir nechta elementni tanlashga ruxsat bermaydi (ko'p tanlovli).
• Ro'yxat elementlarini (teg) guruhlashni qo'llab-quvvatlamaydi.
• Ro'yxat sichqonchani bosish orqali ochilganda klaviaturadagi o'q tugmachalari bilan almashtirishni qo'llab-quvvatlamaydi.

Plagin mavjud emas, chunki u endi tegishli emas.

Versiya: 1.0.1 | Yuklashlar: 11103 | Hajmi: 7 KB | Oxirgi yangilanish: 07.10.2012

Agar saytda hali jQuery yoqilmagan bo'lsa, teg oldiga quyidagi qatorni qo'shing:

JQuery-dan so'ng darhol faylni skript bilan qo'shing:

(funksiya($) ( $(funksiya() ( $("tanlash").selectbox(); )) ))(jQuery)

Ushbu kodni yuqoridagi fayllardan keyin teg oldiga qo'ying.

Tanlovlarni dinamik ravishda o'zgartirganda, yangilash tetikini yoqishingiz kerak, masalan:

(funksiya($) ( $(funksiya() ( $("tugma"). tugmasini bosing(funksiya() ( $("tanlash").find("variant:n-child(5)").attr("tanlangan ", rost); $("tanlash").trigger("yangilash"); )) )) ))(jQuery)

Uning tuzilishi quyidagicha ko'rinadi:

-- Tanlash --

• -- Tanlash --
• 1-band
• 2-band
• 3-band

Chiqarmoq bilan tanlaydi CSS yordamida, quyidagi sinflardan foydalaning:

Bunday skriptni yaratish juda mashaqqatli ish, chunki siz juda ko'p turli xil fikrlarni hisobga olishingiz kerak. Umid qilamanki, jiddiy xatolar paydo bo'lmaydi. Lekin, agar biror narsa bo'lsa, iltimos, izohlarda menga xabar bering.

Salom, Xabrauzerlar va oddiy o'quvchilar. Nisbatan yaqinda men tanlangan tegga uslublarni qanday qo'llashni o'ylab qoldim. Har bir inson forma uslubini sayt dizayniga mos kelishini xohlaydi, lekin hali hammasini sof CSS bilan tasvirlab bo'lmaydi. Ushbu maqolada biz CSS va JavaScript til kutubxonasi - jQuery yordamida o'zingizning tanlagan ro'yxatingizni yozishning oddiy misolini ko'rib chiqamiz. O'ylaymanki, ayniqsa yangi boshlanuvchilar ushbu materialga qiziqishadi. Albatta, uni mahalliy JSda yozganingiz ma'qul, lekin kod satrlari ko'proq bo'lishini hamma biladi va bu aniqroq bo'lmaydi.

Rostini aytsam, keyingi velosipedni yaratishni boshlashdan oldin, men shunga o'xshash echim topishga harakat qildim, lekin tanlangan teg uchun ajoyib div o'ramlaridan boshqa hech narsa topa olmadim. Men esa oddiy va kerakli narsalarni yozsam yaxshi bo‘lardi, deb o‘yladim. Xo'sh, boshlaylik!

Bizning plastilin modellashtirish to'garagimiz uchta faylni o'z ichiga oladi:

• selectbox.html
• selectbox.css
• selectbox.js

selectbox.html

Oy

• Yanvar
• Fevral
• mart
• aprel
• may
• iyun
• iyul
• Avgust
• sentyabr
• oktyabr
• noyabr
• dekabr

selectbox.css

div#selectBox (kengligi: 250px; joylashuvi: nisbiy; balandlik: 50px; chegara radiusi: 3px; hoshiya: qattiq 1px och kulrang; fon rangi: #fff; rang: #333; kursor: koʻrsatgich; toʻldirish: yashirin; oʻtish: .3s; ) div#selectBox p.valueTag ( to‘ldirish: 15px; kursor: ko‘rsatgich; o‘tish: .2s; balandlik: 40px; ) div#selectBox > img.arrow (pozitsiya: mutlaq; o‘ng: 0; kenglik: 50px; to‘ldirish : 15px; */ ::-webkit-scrollbar (fon: shaffof; eni: 0,5em; pozitsiyasi: mutlaq; ) ::-webkit-aylantirish paneli-trek (fon: shaffof; pozitsiya: mutlaq; z-indeks: -2; ) :: -webkit-scrollbar-thumb (chegara-radius: 100px; fon: #888; ) ul#selectMenuBox (fon: #fff; oʻtish: .3s; kenglik: 100%; balandlik: 200px; overflow-y: auto; overflow- x: yashirin !important; mutlaq; margin-top: 00px; displey: blok; #333 fon: #e1e1e1;

Endi sovg'alar haqida! Keling, ko'rib chiqaylik manba kodi plagin tanlash qutisi() jQuery uchun selectbox.js fayli:

selectbox.js

(function($) ( $.fn.selectbox = function() ( // boshlang'ich parametrlar // div"a standart balandligini o'rnating. var selectDefaultHeight = $("#selectBox").height(); // tasvirni aylantirish burchak in div"e var rotateDefault = "rotate(0deg)"; // tugmani bosgandan so'ng funksiya ishga tushadi, unda // div"a ning boshlang'ich balandligi hisoblab chiqiladi // kiruvchi parametrlar bilan taqqoslash uchun juda qulay. (skript boshida nima o'rnatiladi) ) $("#selectBox > p.valueTag").click(function() ( // height() usuli yordamida ob'ekt balandligini hisoblash var currentHeight = $(). "#selectBox").height(); // moslashish shartini tekshirish/ dastlab berilgan balandlikka mos kelmasa, // keyin nima qilish kerakligini tushunish uchun (currentHeight.< 100 || currentHeight == selectDefaultHeight) { // если высота блока не менялась и равна высоте, заданной по умолчанию, // тогда мы открываем список и выбираем нужный элемент. $("#selectBox").height("250px"); // «точка остановки анимации» // здесь стилизуем нашу стрелку и делаем анимацию средствами CSS3 $("img.arrow").css({borderRadius: "1000px", transition: ".2s", transform: "rotate(180deg)"}); } // иначе если список развернут (высота больше или равна 250 пикселям), // то при нажатии на абзац с классом valueTag, сворачиваем наш список и // и присваиваем блоку первоначальную высоту + поворот стрелки в начальное положение if (currentHeight >= 250) ( $("#selectBox").height(selectDefaultHeight); $("img.arrow").css((transform: rotateDefault)); ) ));

tashqi fayl
skript va plaginni shunday chaqiring:

$("tanlovchi").selectbox();

Birinchidan, plagin hujjat toʻliq yuklangandan soʻng yuklanishi uchun hujjat obyektining tayyor() usuliga qoʻngʻiroqni kiriting. Siz jQuery plagini nima ekanligini ko'proq bilib olishingiz mumkin.

Yaqinda bir notanish kishi menga xat yozib, o'zining ikSelect plaginini sinab ko'rishimni so'radi, u iloji boricha idealga yaqinroq yozishga harakat qildi. Menga plagin shu qadar yoqdiki, keng qamrovli sinov va xatolarni tuzatganimdan so'ng, men unga sharh yozishga va ushbu mavzuga chek qo'yishga, shuningdek, aqlli dasturchiga markazga kirishiga yordam berishga qaror qildim.

Xulosa qilib aytganda: u mukammal stilize qilingan va tanlangan amalga oshirishning o'ziga xos xususiyatlariga moslashtirilgan holda standart tanlov qila oladigan deyarli hamma narsani qila oladi. turli xil brauzerlar. Plagin butunlay nusxa ko'chiradi ko'rinish mahalliy Mac OS X-ni tanlang, lekin uni CSS orqali hech qanday muammosiz uslublash mumkin.

U yopilganda shunday ko'rinadi:

Ochiq holatda shunday:

Afzalliklari:

• barcha brauzerlarda (IE6+, FF, Opera, Chrome, Safari), shu jumladan mobil qurilmalarda ishlaydi
• kenglikni avtomatik ravishda sozlaydi
• har doim sahifaning ko'rinadigan qismiga ("aqlli joylashishni aniqlash" deb ataladi) gorizontal va vertikal ravishda ochiladi
• ochiladigan ro'yxatning maksimal balandligini belgilash imkonini beradi
• variantlarni guruhlash imkonini beradi (optgroup)
• klaviaturadan toʻliq boshqariladi (shu jumladan Tab, PgUp, PgDown, Home, End bilan oʻtishlarga javob berish)
• birinchi harflarga asoslangan tanlovga ega (nafaqat bitta, balki keyingi harflar ham)
• sichqonchaning g'ildiragi bilan aylantirishni qo'llab-quvvatlaydi
• kiritilgan (inline-blok)
• katta ro'yxatlar bilan ajoyib ishlaydi (1000+ element)
• javascript o'chirilganida standart tanlovni qoldiradi
• ajoyib API mavjud

• bir vaqtning o'zida bir nechta narsalarni tanlashga ruxsat bermaydi (ko'p tanlov)
• ochiladigan ro'yxatning aylantirish panelini uslublamaydi (chunki u tezlikka juda ta'sir qiladi)
• pivo uchun yugurmaydi

Opera mini-da ro'yxatni ochishda sahifani qayta yuklamaslik uchun standart selektorlar qoladi. Opera Mobile-da u ish stoli versiyasida bo'lgani kabi ishlaydi.

Sahifa tartibi bilan jiddiy shug'ullanadigan har bir kishi CSS-da tanlash uchun uslublar juda cheklanganligini biladi. Lekin ko'pincha standart tanlov dizaynga umuman to'g'ri kelmaydi, shuning uchun siz JavaScript yordamida tanlovni uslublashingiz kerak. Aslida, ushbu maqolada biz JavaScript yordamida o'z tanlovimizni yaratamiz.

Bularning barchasini bajarishga imkon beruvchi juda ko'p tayyor plaginlar, jumladan jQuery plaginlari mavjud. Ammo, agar sizga o'ta murakkab narsa kerak bo'lmasa, sof JavaScript-dan foydalanib, hamma narsani o'zingiz qilishingiz osonroq.

Avvalo, kelajagimiz tanlovining HTML strukturasini yaratamiz:

Element 1
Element 2
Element 3

Element 1

Element 2

Element 3

Ko'rib turganingizdek, bu erda hech qanday tanlangan teg yo'q. Endi biz CSS-dan foydalanib, o'zimiz xohlagan tarzda shaxsiy tanlovimizni shakllantirishimiz mumkin:

Tanlash (
fon rangi: #0ee;
chegara radiusi: 10px;
to'ldirish: 10px 0;
kengligi: 200px;
}
.select p(
kursor: ko'rsatgich;
chegara: 0;
to'ldirish: 5px 20px;
}
.select p.active (
fon rangi: #ee0;
}

Albatta, bu erda siz xohlagan narsani qilishingiz mumkin. Va nihoyat, biz tashqi ko'rinishni tanlangan funksionallikka aylantirishimiz kerak, ya'ni bir nechta elementdan faqat bitta elementni tanlash va ajratib ko'rsatish va keyin uni forma bilan birga yuborish. Buning uchun biz JavaScript-dan foydalanamiz:

Funktsiyani tanlash (element) (
var value = element.getAttribute("ma'lumotlar-qiymat"); // Tanlangan elementning qiymatini o'qing
var nodes = element.parentNode.childNodes; // Boshqa barcha elementlarni oling
uchun (var i = 0; i< nodes.length; i++) {
/* begona matn va kiritish elementlarini filtrlash */
if (tugunlar [i] HTMLParagraphElement instance) (
/* Tanlangan elementga faol qo‘shing, bu sinfni boshqalardan o‘chiring */
agar (qiymat == tugunlar[i].getAttribute("ma'lumotlar-qiymat")) tugunlar[i].className = "faol";
else nodes[i].className = "";
}
}
document.getElementById("mening_tanlash").value = qiymat; // Yashirin maydonni tanlangan qiymatga o'rnating
}

Tanlash funksiyasini amalga oshirishning kaliti bu bizning tanlovimizdagi qiymatni saqlaydigan yashirin maydondir. Va bu shakl topshirilganda yuboriladigan qiymatdir.

Bu JavaScript-da har qanday tanlangan uslubni bajarishning oddiy usuli. Agar siz jQuery-dan foydalansangiz, kod yanada sodda bo'ladi.

Albatta, standart tanlov ko'proq funksionallikka ega. Masalan, u tab ga javob beradi va siz elementlar bo'ylab harakatlanish uchun klaviaturadagi o'q tugmalaridan ham foydalanishingiz mumkin. Agar kerak bo'lsa, bularning barchasini JavaScript-da ham amalga oshirishingiz mumkin.

Va oxirgi tavsiya. Kod noscript tegidan foydalangan va bu tasodifiy emas. Hamma ham JavaScript-ni yoqmaganligi sababli va bunday foydalanuvchilar uchun forma umuman ishlashi uchun siz hech bo'lmaganda standart tanlovni ko'rsatishingiz kerak. Va JavaScript yoqilgan har bir kishi bizning chiroyli tanlovimizni ko'radi.

Veb-sayt yaratishda har bir veb-usta o'z yaratganini barcha brauzerlarda bir xilda o'qishga harakat qiladi va bu ba'zida muammo tug'diradi. Shuning uchun, ushbu darsda biz tanlash yoki oddiyroq aytganda, tanlash tugmasi kabi sayt elementini yaratish va shakllantirish haqida gaplashamiz. Biz oddiy elementni o'zgartiradigan bir nechta skriptlarni ko'rib chiqamiz tanlang to'g'ri ko'rsatiladigan yanada zamonaviy va funktsional sayt boshqaruviga turli xil brauzerlar. Keling, nima borligini ko'rib chiqaylik ...

MANBALAR

Darsda biz HTML5 dan foydalanamiz, shuning uchun birinchi navbatda HTML belgilarini yaratamiz, bu quyidagicha ko'rinadi:

Sayt uchun tanlangan element yarating | Veb-sayt veb-saytidan namoyish




O'z tanlovingizni qiling Mahsulotni tanlang Veb-dizayn bo'yicha ma'lumot varag'i CMS+shablonlari, plaginlari Veb-saytlar yaratish bo'yicha qiziqarli darslar Blogimizdan RSS yangiliklari doimo yaqin

Keyinchalik, ba'zi atributlarni ko'rib chiqaylik, masalan, atribut ma'lumotlar opsion elementlaridagi ma'lumotlarni birlashtirish uchun ishlatiladi. Ularda mahsulot belgisi va formatlash bilan matn tavsifi mavjud. Ushbu elementlarning ikkalasi ham tanlangan elementning versiyamizda paydo bo'ladi.

Endi biz effektlarni ulaymiz, jQuery elementni tekshiradi tanlang, va ma'lumotlar atributlaridan foydalanib, elementdan keyin darhol qo'shiladigan belgilarni yaratadi tanlang:

Mahsulotni tanlang

• Video formatida yangi boshlanuvchilar uchun JavaScript + jQuery video taqdimotni tomosha qiling
• Yangi boshlanuvchilar uchun PHP + MySQL sotib olish
• WordPress - bir kunda professional blog yuklab oling
• Joomla - bir kunda professional veb-sayt sotib olish

Bizning menyumiz mahsulotlarning tartibsiz ro'yxatini tuzadi li, bu har bir elementni ifodalaydi variant elementdan tanlang.

Keling, bizning elementimizni muammosiz jonlantiradigan JavaScript-ni ko'rib chiqaylik:

$(document).ready(function())( // O'zgartiriladigan tanlash elementi: var select = $("select.makeMeFancy"); var selectBoxContainer = $("",( width: select.outerWidth() , className : "tzSelect", html: "" )); var dropDown = $("

",(className:"dropDown")); var selectBox = selectBoxContainer.find(".selectBox"); // Asl elementni tanlash select.find("option").each(function(i)( var variant) = $(bu); if(i==select.attr("selectedIndex"))( selectBox.html(option.text());) // jQuery 1.4.3 ishlatilganligi sababli, biz // HTML5 ma'lumotlariga kira olamiz. atributlar data() usuli yordamida if(option.data("skip"))(return true; ) // Ma'lumotlar belgisiga va HTML5 ma'lumotlar atributlariga muvofiq ochiladigan element yarating: var li = $(".
• ", (html: " "+ variant.data("html-matn")+"" )); li.click(funksiya())( selectBox.html(option.text()); dropDown.trigger("yashirish"); // Qachon klik hodisasi sodir bo'ladi, biz ham o'zgarishlarni aks ettiramiz: select.val(option.val()) select.hide().after(selectBoxContainer); / Bog'lash maxsus tadbirlar ochiladigan elementga ko'rsatish va yashirish: dropDown.bind("show",function())( if(dropDown.is(":animated"))( return false; ) selectBox.addClass("expanded"); dropDown.slideDown () ; )).bind("yashirish",function())( if(dropDown.is(":animated"))( return false; ) selectBox.removeClass("expanded"); dropDown.slideUp(); ) ).bind ("toggle",function())( if(selectBox.hasClass("expanded"))( dropDown.trigger("yashirish"); ) else dropDown.trigger("show"); ));

  selectBox.click(function())( dropDown.trigger("toggle"); false qaytarish; )); // Agar pastga tushadigan element ochiq bo'lsa, sahifaning istalgan joyida sichqoncha tugmasini bossangiz, // u yashirin bo'ladi: $(document).click(function())( dropDown.trigger("hide"); )); ))) tanlang Endi kichik nuance, bizning elementimizni yaratishda, asl element

  saqlangan bo'lsa, hide() usuli yordamida yashiriladi. Bu muhim emas, chunki barcha o'zgarishlar unda aks etadi. Keyin biz o'zimizga qaraymiz CSS uslublari

  #page( width:490px; margin:50px auto; ) #page h1(shrift-weight:normal; text-indent:-99999px; overflow:hidden; background:url("../img/your_product.png") yo'q -repeat; width:490px; height:36px; - width:460px; position:relative; /* ochiladigan elementlar uchun fon rasmini oldindan yuklash */ background:url("../img/dropdown_slice.png") no-repeat -99999px ) .tzSelect .selectBox( position:absolute; height; :100% width:100%; /* Shriftni o'rnatish: 13px/34px "Lucida Sans Unicode", "Lucida Grande", sans-shadow: 1px 0 # EEEEEE; ; /* Bir nechta CSS3 fonidan foydalanish */ background:url("../img/select_slice.png") repeat-x #ddd background-image:url("../img/select_slice. png"),url(; "../img/select_slice.png"),url("../img/select_slice.png"),url("../img/select_slice.png");fon pozitsiyasi: 0 -136px, o'ngda - 204px, 50% -68px, 0 0; fon-takror: takrorlanmaydi, takrorlanmaydi, takrorlanmaydi, takrorlanadi-x; kursor: ko'rsatgich;

  -moz-chegara-radius: 3px; -webkit-border-radius:3px; chegara radiusi: 3px; ) .tzSelect .selectBox:hover, .tzSelect .selectBox.expanded( fon-pozitsiya:0 -170px, o‘ngda -238px, 50% -102px, 0 -34px; rang:#2c5667; matn soyasi:1px 1px 0 #9bc2d ) Bu misolda birma-bir qo'yilgan ko'plab shaffof tasvirlar qo'llaniladi. Bir nechta fon rasmlari

  TzSelect .dropDown(pozitsiya:mutlaq; tepa:40px; chap:0; kenglik:100%; chegara:1px qattiq #32333b; chegara kengligi:0 1px 1px; roʻyxat uslubi:yoʻq; -moz-box-sizing:chegara -box; -webkit-box-sizing:border-box; -moz-box-shadow:0 0 4px #111; .tzSelect li( balandligi: 85px; nisbatan; /* Bir nechta CSS3 fonidan foydalanish */ background:url("../img/dropdown_slice.png") repeat- x #222 background-image:url("../img/dropdown_slice.png"),url; ("../img/dropdown_slice.png"),url("../img/dropdown_slice.png"); fon-pozitsiya: 50% -171px, 0 -85px, 0 0: takrorlashsiz , takrorlanmaslik, takrorlash-x ) .tzSelect li:hover( fon-pozitsiya: 50% -256px, 0 - 85px, 0 0; ) .tzSelect li span( chap:88px; position:absolute; top:27px; ) .tzSelect li i( rang:#999999; displey:blok; shrift-size:12px; ) .tzSelect li img( chap:9px; pozitsiya:absolyut;top:13px)

  Foydalanish quti o'lchami, biz unga qiymat berishimiz kerak chegara qutisi, bu umumiy kenglikning oshishiga yo'l qo'ymaydi, chunki bizning parchalarimiz element ichiga joylashtirilgan. Hammasi shu, bizning takomillashtirilgan tanlov elementlari yaratildi, tajribalaringizga omad tilaymiz.