WordPress მოდული სტილის არჩევისთვის. JQuery მოდული სტილის სელექტორებისთვის. CSS კლასები, რომლებიც შეიძლება გამოყენებულ იქნას შერჩევის შესაქმნელად

სოლდატოვი ნიკოლაი

სტილის არჩევა სტილის არჩევა სუფთა CSS-ის გამოყენებით მესამე მხარის ბიბლიოთეკების ან JavaScript კოდის გამოყენების გარეშე. და ასევე ბონუსი: ჩვენ გადავხედავთ, თუ როგორ შევქმნათ არჩევის ვარიანტი დამატებითი JavaScript-ისა და jQuery-ის გამოყენებით.

სტრუქტურა იქნება სტანდარტული

სპილო ჰიპო ჟირაფი

ისე, რომ არჩევა აჩვენებს პირველ რიგს ზომის ატრიბუტის გამოყენებით 1 მნიშვნელობებით.

სტილი ჩვენი შერჩეულისთვის

-webkit-გარეგნობა: არცერთი; -moz-გარეგნობა: არცერთი; -ms-გარეგნობა: არცერთი; გარეგნობა: არცერთი; ფონი: url ("path/img.png") არ გაიმეოროთ მარჯვენა ცენტრში; მონახაზი: 0;

ამოღება შეუძლებელია

სპილო ჰიპო ჟირაფი

აპლიკაციაში ჩვენ დავწერეთ ccs power იერსახის რამდენიმე სტრიქონი გამყიდველის პრეფიქსებით, რათა ყველა ბრაუზერში ძალა ერთნაირად მუშაობს. წაიკითხეთ ქვემოთ ძალაუფლების შესახებ.

მთელი დასაკეცი განპირობებული იყო სტანდარტული ისრის მართკუთხა ისრით ჩანაცვლებით, რომლის ნაცვლად ფონი განხორციელდა. ამ გზით შეგიძლიათ სურათის ჩასმა. ასევე აუცილებელია ზომის კორექტირება დამატებითი ფონის ზომის ყუთისთვის

გარეგნობა CSS

css3 power გამოჩენა დაეხმარა ჩვენი დიზაინის განხორციელებას

ეს ძალა საშუალებას გაძლევთ შეცვალოთ ელემენტის გარეგნობა: ღილაკით, ჩამრთველით, რადიოებით, ველებით, ხატებით და მრავალი სხვა. ჩვენს ეპიზოდში ჩვენ ვიყვირეთ ელემენტი, vikoristuyuchi არცერთი და დავამატეთ სურათი დამატებითი ფონისთვის

სტილის არჩევის ვარიანტი

არჩეული ვარიანტის სტილისთვის გჭირდებათ JavaScript

Vibrati HTML JavaScript PHP .select (ჩვენება: ბლოკი; მაქსიმალური სიგანე: 215 პიქსელი; სიგანე: 100%; პოზიცია: შედარებითი; ). ნათესავი ; ) .new-select__list (საზღვარი: 1px მყარი #ced4da; კურსორი: მაჩვენებელი; პოზიცია: აბსოლუტური; ზედა: 45px; მარცხნივ: 0; სიგანე: 100%;) .new-select__list.on (ჩვენება: . new-select (__item span) ეკრანი: ბლოკი; შიგთავსი: 10 პიქსელი 15 პიქსელი;) .new-select__item span:hover (ფერი: #12b223;) .ახალი აირჩიეთ :after (შინაარსი: ""; : 25px; პოზიცია: აბსოლუტური; მარჯვნივ: 9px; ზედა: 9px ; -out , -o-transition: all .27s ease-in-out, transition: all .27s ease-in-out, -webkit-transform: rotate (0deg); -ms-transform: rotate (0deg); - o-transform : rotate (0deg); transform : rotate (0deg); ) .new-select.on :after ( -webkit-transform : rotate (180deg); -ms-transform : rotate (180deg); -o-transform : როტაცია (180 გრადუსი); ტრანსფორმაცია: როტაცია (180 გრადუსი);

JavaScript კოდის წინ არის jQuery კავშირები

$("არჩევა"). თითოეული (ფუნქცია () ( const _this = $ (this), selectOption = _this . find ("option"), selectOptionLength = selectOption . length , selectOption = selectOption. filter ( " :selected " ), ხანგრძლივობა = 45 ანიმაცია _thide . (); _this . wrap ( " " ); $ ( " " , ( class : " new-select " , text : _this . children ( " option: disabled " ). text () ) ) _this ); const selectHead = _this. შემდეგი (" . new-select"); select__list"); for (მოდით i = 1; i< selectOptionLength ; i ++ ) { $ (" " , { class : " new-select__item " , html : $ (" " , { text : selectOption . eq (i ). text () }) }) . attr (" data-value "აირჩიეთ ოფცია. eq(i). val()). appendTo (selectList); ) const selectItem = selectList. იპოვე (" .new-select__item " ); selectList . slideUp (0 ); selectHead . on (" click " , function () { if ( ! $ (this ). hasClass (" on " ) ) { $ (this ). addClass (" on " ); selectList . slideDown (duration ); selectItem . on (" click " , function () { let chooseItem = $ (this ). data (" value " ); $ (" select " ). val (chooseItem ). attr (" selected " , " selected " ); selectHead . text ( $ (this ). find (" span " ). text () ); selectList . slideUp (duration ); selectHead . removeClass (" on " ); }); } else { $ (this ). removeClass (" on " ); selectList . slideUp (duration ); } }); });

დღესდღეობით, დიზაინერებმა სულ უფრო და უფრო დაიწყეს მცირე HTML ფორმების დახატვა HTML 2.0 სტილში, ეს ტენდენცია სულ უფრო და უფრო მნიშვნელოვანი ხდება და მონაცემთა შეყვანის ლამაზი ველები და მომრგვალებული კიდეებითა და ჩრდილებით შერჩეული ველები სულ უფრო მნიშვნელოვანი ხდება. თქვენ შეგიძლიათ მხოლოდ გთხოვთ, და ყველაფერიც კი მშვენიერია, და CSS3 უკვე მრავალი თვალსაზრისით იმარჯვებს, რაც საშუალებას გაძლევთ მშვენივრად შეხედოთ ფორმებს, ველებს და სელექტორებს. სამწუხაროა, ნუ გახდებით ყველაფერი ასე ვარდისფერი.

მიუხედავად იმისა, რომ ყველა თანამედროვე ბრაუზერი მხარს უჭერს HTML5 და CSS3, ყველა არ იყენებს მათ და სტატისტიკის მიხედვით, მთელი ინტერნეტის მომხმარებელთა ნახევარი, როგორც ადრე, იყენებს ძველი ვერსიების ბრაუზერებს და ბევრი მათგანი არ სარგებლობს სრულად. მსოფლიოში ან გამოიყენეთ CSS3. ამიტომ, სიის (Select) სტილი, რომელიც გამოჩნდება, ხშირად კეთდება ძველი კარგი გზით, jQuery (js) და PNG ან GIF სურათების გამოყენებით. მინდა გითხრათ ერთ-ერთი ამ მეთოდის შესახებ.

ქვემოთ მოცემულია სკრიპტი, რომელიც მოულოდნელად აღმოვაჩინე RuNet-ის საიტებზე, სამწუხაროდ, არ მახსოვდა მისი ავტორის მისამართი და სახელი. უბრალოდ დიდ პატივისცემას გამოვხატავ შენდამი.

კოდის მიმოხილვა JS

(function($)( $.fn.extend(( customStyle1: function(options) ( if(!$.browser.msie || ($.browser.msie&&$.browser.version>6))) ( დააბრუნეთ ეს. თითოეული (function() ( var currentSelected = $(this).find(":selected"); $(this).after(""+currentSelected.text()+")).css((პოზიცია:"აბსოლუტური" , opacity:0,fontSize:$(this).next().css("font-size")));var selectBoxSpan = $(this).next();var selectBoxWidth = parseInt($(this).width ( )) - parseInt(selectBoxSpan.css("padding-left")) -parseInt(selectBoxSpan.css("padding-right"));var selectBoxSpanInner = selectBoxSpan.find(":first-child"); selectBoxSpan.cs ( (ჩვენება:"inline-block")); selectBoxSpanInner.css((სიგანე:selectBoxWidth, ჩვენება:"inline-block")); -ზემო")) + parseInt(selectBoxSpan.css("padding-bottom")) ; $(this).height(selectBoxHeight).change(function())( selectBoxSpanInner.text($("option:selected",this).text()).parent().addClass("შეცვლილია"); ) ) ;));)))))); )) (jQuery);

დააწკაპუნეთ სკრიპტზე სტილისთვის "Selectu".

კოდის მიმოხილვა JS

$(დოკუმენტი).ready(function() ($(".select1").customStyle1(); ));

HTML კოდი "არჩევა", რომელიც იქნება სტილიზებული

კოდის მიმოხილვა HTML

ვარიანტი 1 ვარიანტი 2 ვარიანტი 3 ვარიანტი 4 ვარიანტი 5 ვარიანტი 6

სტილი იქნება stosovano სანამ შერჩევა

კოდის მიმოხილვა CSS

.select1 (სიგანე: 410 პიქსელი; სიმაღლე: 32 პიქსელი; ფერი: #909090; შრიფტი: 12 პიქსელი Arial, Tahoma, Helvetica, Verdana; ტექსტის გასწორება: მარცხნივ; ფონი: url (images/sel1.png) აირჩიეთ * / ხაზის შესაქმნელად - სიმაღლე: 30 px; თეთრი სივრცე: nowrap; / * დაცულია გადაცემით * / padding: 0 22px 0 12px; / * მარჯვენა ხელით წვდომა IE6 ისრებით * / ზღვარი: 3px 0 5px 0 ;)

ფონის სურათის ჩანაცვლებით, თქვენ შეგიძლიათ აირჩიოთ არჩევის სტილი, როგორც გსურთ და გამოიყენოთ ეს მაგალითი უმეტეს ბრაუზერებში, ისევე როგორც უძველეს ბრაუზერებში).

მე ხშირად ვიყენებ ფორმის ობიექტების სტილიზაციის მსგავს პრინციპს დიდ საიტებზე და პირიქით, რათა შევქმნათ ახალი იდეა ისე, რომ მაშინ, როცა ვებ ოსტატების უმეტესობას არ სურს ასეთი არც თუ ისე მარტივი გადაწყვეტილებების სტაგნაცია, მომხმარებლის წარმატების ხელშეწყობის მიზნით. ძველი ბრაუზერებით.

შუადღე მშვიდობისა, მომხმარებლებო და უბრალოდ წაიკითხეთ. Porivnyano-მ ცოტა ხნის წინ იკითხა, როგორ დააყენოთ სტილი შერჩეულ ტეგზე. ჩვენ ყველას გვსურს, რომ ფორმის სტილიზაცია შეესაბამებოდეს საიტის დიზაინს, მაგრამ ჯერჯერობით ყველაფრის წმინდა CSS-ით აღწერა არ შეიძლება. ამ სტატიაში ჩვენ განვიხილავთ მარტივი მაგალითს, რომ დაწეროთ თქვენი საკუთარი რჩეული სია CSS და JavaScript ენის ბიბლიოთეკის გამოყენებით - jQuery. მე ვფიქრობ, რომ განსაკუთრებით დამწყები ისარგებლებენ ამ მასალისგან. რა თქმა უნდა, უკეთესი იქნებოდა მშობლიურ JS-ში დაწერა, მაგრამ ყველამ იცის, რომ კოდის მეტი სტრიქონი იქნებოდა და ნაკლებად სავარაუდოა, რომ უფრო ინტელექტუალური იყოს.

მართალი გითხრათ, მე ვცადე მსგავსი გამოსავალი მეპოვა, მაგრამ სხვა არაფერი ვიცოდი, გარდა ეფექტური div wrappers შერჩეული ტეგისთვის. და ვიფიქრე, რომ ცუდი იქნებოდა რაიმე მარტივი და აუცილებელი დამეწერა. აბა, ესე იგი!

სამი ფაილი იზიარებს იმავე ბედს ჩვენს პლასტილინის ჩამოსხმასთან:

selectbox.html
selectbox.css
selectbox.js

მოდით შევხედოთ მათ სათითაოდ. პირველ რიგში, მე ნამდვილად ვაფასებ ამ აპლიკაციაში უმარტივეს მიდგომას - სიის განლაგებას ან selectbox.html ფაილის:

selectbox.html

თვე

სიჩენი
ლუციუსი
ბერეზენი
კვიტენი
ტრევენი
ჩერვენი
ლიპენი
გველი
ვერესენი
ჟოვტენი
ფოთოლცვენა
მკერდი

როგორც გამომავალი HTML კოდიდან ჩანს, ჩვენი სია ერთ თვეში იქნება წარმოდგენილი. ახლა მოდით შევხედოთ selectbox.css ფაილს:

selectbox.css

div#selectBox ( სიგანე: 250px; პოზიცია: ფარდობითი; სიმაღლე: 50px; საზღვრის რადიუსი: 3px; საზღვარი: მყარი 1px ღია ნაცრისფერი; ფონის ფერი: #fff; ფერი: #333; კურსორი: მაჩვენებელი; გადინება: დამალული; გარდამავალი: .3s; ) div#selectBox p.valueTag ( padding: 15px; კურსორი: მაჩვენებელი; გადასვლა: .2s; სიმაღლე: 40px; ) div#selectBox > img.arrow (პოზიცია: აბსოლუტური; მარჯვნივ: 0; სიგანე: 50px; padding : 15px; ) /* Safari-ის, Chrome-ისა და Opera-ს მომხმარებლებისთვის, მისასალმებელი ბონუსი - სტილიზებული გადახვევის ზოლი. */ ::-webkit-scrollbar ( ფონი: გამჭვირვალე; სიგანე: 0.5em; პოზიცია: აბსოლუტური; ) ::-webkit-scrollbar-track (ფონი: გამჭვირვალე; პოზიცია: აბსოლუტური; z-ინდექსი: -2; ) :: -webkit-scrollbar-thumb ( საზღვარი-რადიუსი: 100 პიქსელი; ფონი: #888; ) ul#selectMenuBox (ფონი: #fff; გადასვლა: .3s; სიგანე: 100%; სიმაღლე: 200px; overflow-y: ავტომატური; overflow- x: დამალული !მნიშვნელოვანი; პოზიცია: აბსოლუტური; ზღვარი ზედა: 00 პიქსელი; ჩვენება: ბლოკი; ) ul#selectMenuBox > li ( ჩვენება: ბლოკი; li.option (ფერი: ნაცრისფერი; ბალიშები: 10px; ) ul#selectMenuBox > li. ვარიანტი: hover (ფერი: #333; ფონი: #e1e1e1; გარდამავალი: .2s; )

აქ განსაკუთრებული სირთულეები არ არის, რადგან თქვენ საქმე გაქვთ განლაგებისა და განლაგების საფუძვლებთან HTML და CSS3 გამოყენებით.

ახლა კი სიამოვნებისთვის! მოდით შევხედოთ მოდულის გამომავალ კოდს selectbox() jQuery-სთვის, selectbox.js ფაილი:

selectbox.js

(function($) ( $.fn.selectbox = function() ( // cob პარამეტრები // დააყენეთ div-ის სტანდარტული სიმაღლე "a. var selectDefaultHeight = $("#selectBox").height(); // rotate გამოსახულება to div"e var rotateDefault = "rotate(0deg)"; // ღილაკის დაჭერის შემდეგ გამოიყენება სპეციალური ფუნქცია, რომელიც // ითვლის ჩვენი div"a-ს გამომავალი სიმაღლეს. // ადვილია გასწორება შეყვანის პარამეტრები (ისინი, რომლებიც მითითებულია სკრიპტში ) $("#selectBox > p.valueTag").click(function() ( // ობიექტის სიმაღლის გამოთვლა სიმაღლე() მეთოდის გამოყენებით var currentHeight = $("# selectBox").height(); // გონების გაქცევის შემოწმება/არ გაქცევა თავის მოცემული სიმაღლიდან, // იმის გასაგებად, რა უნდა გააკეთოს შემდეგ, თუ (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)); ) )); // ასე იწვის თავად სია, როდესაც ირჩევთ საჭირო ელემენტს // და ცვლის აბზაცის ტექსტს ელემენტის ტექსტად სიაში $("li.option").click(function() ( $( "#selectBox").height(selectDefaultHeight);$ ("img.arrow").css((transform: rotateDefault));$("p.valueTag").text($(this).text()); )); ); )) (jQuery);

მეტი კოდი იყო, მაგრამ შესაძლებელი იყო css() და height() მეთოდების შეკუმშვა. გამოიცა მოდული მომხმარებლის მეგობრობისთვის და ფართომასშტაბიანი ვიკორისტანისთვის. თქვენ შეგიძლიათ ფულის გამომუშავება ისე, როგორც უნდა, ან ამიტომ არ გამიკვირდება, რომ ეს ოპტიმიზებს ჩემს პოლიციას. დასაწკაპუნებლად, უბრალოდ დააკავშირეთ გარე ფაილი სკრიპტთან და დააწკაპუნეთ დანამატზე ასე:

$("სელექტორი").selectbox();
პირველ რიგში, ჩართეთ გამოძახება დოკუმენტის ობიექტის ready() მეთოდით, რათა დანამატი ჩაიტვირთოს დოკუმენტის სრულად ჩატვირთვის შემდეგ. შეგიძლიათ გაიგოთ რა არის ეს jQuery მოდული.

ყველამ, ვინც სერიოზულად არის ჩართული გვერდის განლაგებაში, იცის, რომ CSS-ში შერჩეული სტილის შესაძლებლობები მნიშვნელოვნად გაუმჯობესებულია. მიუხედავად იმისა, რომ სტანდარტული შერჩევა ხშირად არ ჯდება დიზაინში, თქვენ უნდა იმუშაოთ შერჩეულ სტილთან JavaScript-ის საშუალებით. სინამდვილეში, ეს სტატია საშუალებას გაძლევთ შექმნათ თქვენი საკუთარი არჩევანი JavaScript-ის გამოყენებით.

არსებობს უამრავი მზა დანამატი, მათ შორის jQuery, რომლებიც ყველაფრის გაკეთების საშუალებას გაძლევენ. თუ არ გჭირდებათ რთული სტრუქტურა, უფრო ადვილია ყველაფრის ნულიდან აშენება სუფთა JavaScript-ის გამოყენებით.

უპირველეს ყოვლისა, მოდით შევქმნათ ჩვენი ახალი შერჩევის HTML სტრუქტურა:

ელემენტი 1
ელემენტი 2
ელემენტი 3

ელემენტი 1

ელემენტი 2

ელემენტი 3

მოგეხსენებათ, აქ თითქმის არ არის შერჩეული ტეგი. ახლა ჩვენ მარტივად შეგვიძლია ჩვენი არჩევანის სტილი დამატებითი CSS-ით:

აირჩიეთ (
ფონის ფერი: #0ee;
საზღვარი-რადიუსი: 10px;
padding: 10px 0;
სიგანე: 200px;
}
.აირჩიეთ p(
კურსორი: მაჩვენებელი;
ზღვარი: 0;
padding: 5px 20px;
}
.აირჩიეთ p.active (
ფონის ფერი: #ee0;
}

გიჟურად, შეგიძლიათ მიიღოთ ყველაფერი, რაც მოგწონთ. და, თქვენ გადაწყვიტეთ, თქვენ უნდა შეცვალოთ სელექციური ფუნქციის გარეგნობა, ისე, რომ აირჩიოთ და მონიშნოთ ერთზე ნაკლები ელემენტი ეტიკეტებიდან, ასევე ფორმის მართვის დროს. ვისთვის ვაჩქარებთ JavaScript-ს:

ფუნქციის არჩევა (ელემენტი) (
var value = element.getAttribute("data-value"); // წაიკითხეთ არჩეული ელემენტის მნიშვნელობა
var nodes = element.parentNode.childNodes; // ამოიღეთ ყველა სხვა ელემენტი
for (var i = 0; i< nodes.length; i++) {
/* მესამე მხარის ელემენტები არის გაფილტრული ტექსტი და შეყვანილია */
if (HTMLParagraphElement-ის კვანძები[i]) (
/* არჩეულ ელემენტზე აქტიურის დამატება, ამ კლასის ყველა დანარჩენიდან წაშლა */
if (value == nodes[i].getAttribute("data-value")) nodes[i].className = "აქტიური";
else nodes[i].className = "";
}
}
document.getElementById("my_select").value = მნიშვნელობა; // ადგენს ფარული ველის მნიშვნელობას
}

არჩევის ფუნქციონირების განხორციელების მთავარი წერტილი არის ფარული ველი, სადაც ჩაწერილია მნიშვნელობა ჩვენი არჩევიდან. იგივე ინფორმაცია გაიგზავნება ფორმის გაგზავნის დროს.

ღერძი ასეთი მარტივი გზით აბსოლუტურად მორცხვია, იქნება ეს შერჩეული JavaScript-ის სტილიზაცია. თუ იყენებთ jQuery-ს, კოდი კიდევ უფრო მარტივი იქნება.

გიჟურად, სტანდარტულ არჩევანს მეტი ფუნქციონირება აქვს. მაგალითად, ის პასუხობს ჩანართს, ასე რომ თქვენ ასევე შეგიძლიათ გადაადგილდეთ ელემენტებში კლავიატურაზე ისრის ღილაკების გამოყენებით. მაგრამ ეს ყველაფერი ასევე შეიძლება განხორციელდეს JavaScript-ში საჭიროების შემთხვევაში.

პირველი რეკომენდაცია. კოდს აქვს ნოსკრიპტის ტეგი და ის გაუგებარია. ყველას არ აქვს ჩართული JavaScript და იმისათვის, რომ ფორმა იმუშაოს ასეთ მომხმარებლებზე, თქვენ უნდა შეიყვანოთ სტანდარტული შერჩევა. და ყველას, ვისაც ჩართული აქვს JavaScript, გთხოვთ, გამოიყენოთ ჩვენი არჩეული ინსტრუმენტი.

პატივისცემა! მოდულის შემდგომი განვითარება და მხარდაჭერა იმის თაობაზე, რაც ახლა ნაწილობრივ არის.

ერთ-ერთი ყველაზე მიუღებელი (და მე ვგულისხმობ ხარბ) გამოსვლას ვებ დეველოპმენტში არის HTML ფორმების ნაკრები. სამწუხაროდ, არ არსებობს ერთიანი სტანდარტი ფორმის ელემენტების ჩვენებისთვის, ბრაუზერის ან ოპერაციული სისტემის მიუხედავად, ისევე როგორც ამ ელემენტების, vikoryst და კასკადური სტილის ფურცლებისგან ადეკვატური მოქმედებების შემუშავების შესაძლებლობა.

შემდეგი HTML ფორმის ელემენტების შემდგომი სტილიზაცია შეუძლებელია:

გასახსნელი ნივთების სია;
პრაპორშჩიკი;
პერემიკაჩი.
ველი ფაილის ატვირთვისთვის.

როგორც უკვე ხედავთ პოსტის სათაურიდან, მეტი სათქმელია შერჩევითობაზე.

არსებობს უამრავი მზა გადაწყვეტა jQuery დანამატების სახით სტილისტური სიებისთვის, რომლებიც იხსნება. თუმცა, მე (მათ, რომლებიც მომდინარეობს დანამატებიდან, ამ და სხვა მიზეზების გათვალისწინების გარეშე) ავირჩიე ჩემი ბორბლის გასასვლელის გზა და დავწერე დენის დანამატი, რომელსაც ვიზიარებ ამ სტატიაში.

მინდა აღვნიშნო, რომ ეს დანამატი არ არის შესაფერისი შერჩევის სტაგნაციის ყველა შესაძლო სიტუაციისთვის (წაიკითხეთ რამდენიმე).

რობოტული მოდულის დემონსტრირება

შეგიძლიათ იხილოთ სელექტორი სტილის მაგალითი დამატებითი მოდულის გამოყენებით. ეს დიზაინი შევქმენი ვიკორისტანის გამოყენების გარეშე მის გამოსახატავად.

უპირატესობები

როდესაც JavaScript ჩართულია, გამოჩნდება სტანდარტული სელექციები.
სკრიპტი მცირე ზომისაა, დაახლოებით 4 კილობაიტი.
მუშაობს IE6+ და ყველა მიმდინარე დესკტოპ ბრაუზერში.
შიგადაშიგ შესაცნობად.
ადვილად კონფიგურირებადი CSS-ის საშუალებით.
საშუალებას გაძლევთ დააყენოთ სიის მაქსიმალური სიმაღლე (CSS სიმძლავრე max-height).
ავტომატურად არეგულირებს სიგანეს, თუ ის არ არის მითითებული.
მხარს უჭერს მაუსის ბორბლის გადახვევას.
შეიძლება ჰქონდეს "გონივრული პოზიციონირება", ანუ. სიის გახსნისას არ გადახვიდეთ გვერდის ხილულ ნაწილზე.
შეგიძლიათ "დაიჭიროთ" Tab კლავიშის წნევა და გადაიტანოთ ისრები კლავიატურაზე.
მხარს უჭერს "გამორთული" ატრიბუტს.
მუშაობს სელექტორებთან, რომლებიც დინამიურად არის დამატებული/შეცვლილი.

ნედოლიკი

შემდეგ ის არ უჭერს მხარს მრავალჯერადი ატრიბუტს. არ იძლევა რამდენიმე ელემენტის არჩევის საშუალებას (მრავალარჩევანი).
არ აქვს სიის ელემენტების (ტეგი) დაჯგუფების მხარდაჭერა.
არ არის მიზანშეწონილი კლავიატურაზე ისრების გადატანა, თუ მაუსის დაწკაპუნების სია ღიაა.

მოზიდვა

მოდული მიუწვდომელია, რადგან VIN არ არის მიმდინარე.

jQuery მოდული „SelectBox Styler“

ვერსია: 1.0.1 | ზავანტაჟენი: 11103 | ზომა: 7 KB | ბოლო განახლება: 10/07/2012

განახლებულია 22/09/2012 მოდულის სკრიპტის გადამუშავებით (მათ შორის მინიმიზირებული ვარიანტის შექმნით) და ასევე არჩევის დინამიური დამატების/ცვლის მხარდაჭერის დამატებით. 10/07/2012 გაასწორა სკრიპტის ქცევა, როდესაც იცვლება ტეგის onchange მეთოდი. დანამატის კავშირი

თუ jQuery ჯერ არ არის ჩართული საიტზე, დაამატეთ წამყვანი ხაზი ტეგის წინ:

jQuery-ის შემდეგ დაუყოვნებლივ დააკავშირეთ ფაილი სკრიპტთან:

(function($) ( $(function() ( $("არჩევა").selectbox(); )) ))(jQuery)

ეს კოდი უნდა განთავსდეს ტეგის წინ მითითებული ფაილების შემდეგ.

სელექტორების დინამიურად შეცვლისას აუცილებელია განახლების ტრიგერის გაშვება, მაგალითად:

(function($) ( $(function() ( $("button").click(function() ($("select").find("option:nth-child(5))).attr("selected ", true); $("არჩევა").ტრიgger ("განახლება"); )) )) ))(jQuery)

HTML კოდი მოდულის დაყენების შემდეგ

მისი სტრუქტურა ასე გამოიყურება:

-- აირჩიეთ --

-- აირჩიეთ --
პუნქტი 1
წერტილი 2
წერტილი 3

-- აირჩიეთ -- პუნქტი 1 პუნქტი 2 პუნქტი 3

CSS კლასები, რომლებიც შეიძლება გამოყენებულ იქნას შერჩევის შესაქმნელად

დამატებითი CSS-ისთვის შერჩევითობის შესაქმნელად გამოიყენეთ შემდეგი კლასები:

.საარჩევნო ყუთი	მამის კონტეინერი ყველა შერჩევისთვის
.საარჩევნო ყუთი .არჩევა	აირჩიეთ დამწვარი ბანაკიდან
.selectbox.ფოკუსირებული .არჩევა	ფოკუსირება მოახდინეთ არჩევანზე, როდესაც დააჭირეთ Tab ღილაკს
.selectbox .აირჩიეთ .ტექსტი	დანართების ტეგი არჩეული ვარიანტისთვის, რათა ჩასვათ ფონის სურათი „ღია კარების“ ტექნიკის გამოყენებით
.selectbox .ტრიგერი	დამწვარი არჩევის ნაწილზე უფლებები (ჭკვიანი რემიქსერი)
.selectbox .ტრიგერი .ისარი	დანართის ტეგი რემიქსისთვის (ისარი)
.selectbox .ჩამოშლილი	სანთურა სიისთვის
.selectbox .ჩამოშლილი ul	შემთხვევითი სია
.selectbox li	ელემენტი (ვარიანტი) აირჩიეთ
.selectbox li.არჩეულია	ვიბრანიუმის არჩევის ელემენტი
.selectbox li.გამორთულია	vimkneny (არ არის ხელმისაწვდომი შერჩევისთვის) აირჩიეთ ელემენტი

ვისნოვოკი

ასეთი სკრიპტის შექმნა საკმარისია იმისთვის, რომ დაკავებული გყავდეს, მაშინ როცა უამრავ განსხვავებულ საკითხთან გაქვს საქმე. დარწმუნებული ვარ, რომ სერიოზული ხარვეზები არ იქნება. გამარჯობა, შემატყობინეთ კომენტარებში.

Რედაქტორის არჩევანი