ปลั๊กอิน WordPress สำหรับเลือกสไตล์ ปลั๊กอิน JQuery สำหรับตัวเลือกสไตล์ คลาส CSS ที่สามารถใช้เพื่อออกแบบการเลือก

โซลดาตอฟ นิโคไล

การเลือกสไตล์ การเลือกสไตล์โดยใช้ CSS ล้วนๆ โดยไม่ต้องใช้ไลบรารีบุคคลที่สามหรือโค้ด JavaScript และโบนัสอีกด้วย: เราจะดูวิธีจัดสไตล์ตัวเลือกที่เลือกโดยใช้ JavaScript และ jQuery เพิ่มเติม

โครงสร้างจะได้มาตรฐาน

ช้างฮิปโปยีราฟ

เพื่อให้การเลือกแสดงแถวที่หนึ่งโดยใช้แอตทริบิวต์ขนาดที่มีค่าเป็น 1

จัดแต่งทรงผมสำหรับเราเลือก

-webkit-ลักษณะที่ปรากฏ: ไม่มี; -moz-ลักษณะที่ปรากฏ: ไม่มี; -ms-ลักษณะที่ปรากฏ: ไม่มี; ลักษณะที่ปรากฏ: ไม่มี; พื้นหลัง : url ("path/img.png" ) ไม่ทำซ้ำ ตรงกลาง ; โครงร่าง: 0;

ออตตริโมโม

ช้างฮิปโปยีราฟ

ในแอปพลิเคชัน เราได้เขียนลักษณะพาวเวอร์ ccs หลายแถวพร้อมคำนำหน้าผู้ขาย เพื่อให้ power ทำงานเหมือนกันในทุกเบราว์เซอร์ อ่านด้านล่างเกี่ยวกับพลังงาน

ความสามารถในการพับได้ทั้งหมดเกิดจากการเปลี่ยนลูกศรมาตรฐานเป็นสี่เหลี่ยมแทนที่จะใช้พื้นหลัง คุณสามารถแทรกรูปภาพได้ด้วยวิธีนี้ นอกจากนี้ยังจำเป็นต้องปรับขนาดสำหรับกล่องขนาดพื้นหลังเพิ่มเติม

ลักษณะที่ปรากฏ CSS

รูปลักษณ์ของพลัง css3 ช่วยในการออกแบบของเรา

พาวเวอร์นี้ช่วยให้คุณเปลี่ยนรูปลักษณ์ขององค์ประกอบเป็น: ปุ่ม ช่องทำเครื่องหมาย วิทยุ สนาม ไอคอน และอื่นๆ อีกมากมาย ในตอนของเรา เราร้องออกมาเป็นองค์ประกอบ vikoristuyuchi none และเพิ่มรูปภาพสำหรับพื้นหลังเพิ่มเติม

ตัวเลือกการเลือกสไตล์

ในการจัดสไตล์ตัวเลือกที่เลือกคุณต้องมี JavaScript

Vibrati HTML JavaScript PHP .select ( แสดง : บล็อก ; ความกว้างสูงสุด : 215px ; ความกว้าง : 100% ; ตำแหน่ง : สัมพันธ์ ; ) ญาติ ; ) .new-select__list ( เส้นขอบ : 1px solid #ced4da ; เคอร์เซอร์ : ตัวชี้ ; ตำแหน่ง : แน่นอน ; ด้านบน : 45px ; ซ้าย : 0 ; ความกว้าง : 100% ; ) .new-select__list.on ( จอแสดงผล : . new-select__item span ( จอแสดงผล: บล็อก; การขยาย: 10px 15px;) .new-select__item span:hover (สี: #12b223;) .new-select :after (เนื้อหา: ""; : 25px; ตำแหน่ง: สัมบูรณ์; ขวา: 9px; ด้านบน: 9px ; -out , -o-transition : ความง่ายในการเข้า-ออก .27s ทั้งหมด , การเปลี่ยนแปลง : ความง่ายในการเข้า-ออก .27s ทั้งหมด , -webkit-transform : หมุน (0deg ); -ms-transform : หมุน (0deg ); - o-transform : หมุน (0deg); แปลง : หมุน (0deg); ) .new-select.on :after ( -webkit-transform : หมุน (180deg); -ms-transform : หมุน (180deg); -o-transform : หมุน (180 องศา ); แปลงร่าง : หมุน (180 องศา ); )

มีการเชื่อมต่อ jQuery อยู่ด้านหน้าโค้ด JavaScript

$(".เลือก"). แต่ละ (ฟังก์ชั่น () ( const _this = $ (นี้), selectOption = _this . ค้นหา ( "option "), selectOptionLength = selectOption . length , SelectedOption = selectOption . filter ( " :selected " ), Duration = 45 ภาพเคลื่อนไหว _this . ซ่อน (); _this . wrap ( " " ); $ ( " " , ( class : " new-select " , text : _this . children ( " option:disabled " ). text () )). _this ); const selectHead = _this . ถัดไป ( " . new-select " ); select__list " ); สำหรับ (ให้ i = 1; i< selectOptionLength ; i ++ ) { $ (" " , { class : " new-select__item " , html : $ (" " , { text : selectOption . eq (i ). text () }) }) . attr (" data-value "ให้เลือก ตัวเลือก สมการ(i) วาล()) ผนวกถึง (selectList); ) const selectItem = เลือกรายการ หา (" .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 น่าเสียดายที่ฉันจำที่อยู่หรือชื่อผู้เขียนไม่ได้ ฉันแค่แสดงความเคารพอย่างสูงต่อคุณ

การตรวจสอบรหัสจส

(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((position:"absolute" , ความทึบ: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.css ( (แสดง:"inline-block")); selectBoxSpanInner.css((width:selectBoxWidth, display:"inline-block")); -top")) + parseInt(selectBoxSpan.css("padding-bottom")) ; $(this).height(selectBoxHeight).change(function())( selectBoxSpanInner.text($("option:selected",this).text()).parent().addClass("changed"); ) ) ; )); ) ) )); )) (เจเคอรี่);

คลิกที่สคริปต์เพื่อจัดแต่งทรงผม "Selectu"

การตรวจสอบรหัสจส

$(เอกสาร).ready(function() ( $(".select1").customStyle1(); ));

โค้ด HTML "select" ซึ่งจะมีสไตล์

การตรวจสอบรหัส HTML

ตัวเลือกที่ 1 ตัวเลือกที่ 2 ตัวเลือกที่ 3 ตัวเลือกที่ 4 ตัวเลือกที่ 5 ตัวเลือกที่ 6

สไตล์จะเป็น stosovano จนกว่าจะเลือก

การตรวจสอบรหัสซีเอสเอส

.select1 ( กว้าง : 410px ; ความสูง : 32px ; สี : #909090 ; แบบอักษร : 12px Arial, Tahoma, Helvetica, Verdana; text-align : left ; พื้นหลัง : url (images/sel1.png) เพื่อออกแบบการเลือก * / บรรทัด - ความสูง : 30px ; white-space : nowrap ; / * ป้องกันโดยการถ่ายโอน * / padding : 0 22px 0 12px ; / * การเข้าถึงด้วยมือขวาด้วยลูกศร IE6 * / ระยะขอบ : 3px 0 5px 0 ; )

ด้วยการแทนที่รูปภาพพื้นหลัง คุณสามารถจัดสไตล์การเลือกตามที่คุณต้องการ และใช้ตัวอย่างนี้ในเบราว์เซอร์ส่วนใหญ่ เช่น เบราว์เซอร์ที่เก่าแก่ที่สุด)

ฉันมักจะใช้หลักการที่คล้ายกันในการจัดรูปแบบของออบเจ็กต์บนไซต์ที่ยอดเยี่ยมและในทางกลับกัน เพื่อให้เราสามารถสร้างแนวคิดใหม่ได้ เพื่อที่ในขณะที่ผู้ดูแลเว็บส่วนใหญ่ไม่เต็มใจที่จะหยุดนิ่งวิธีแก้ปัญหาที่ไม่ง่ายเช่นนั้น เพื่อประโยชน์ในการส่งเสริมความสำเร็จของลูกค้า ด้วยเบราว์เซอร์รุ่นเก่า

สวัสดีตอนบ่ายผู้ล่วงละเมิดและเพียงแค่อ่าน Porivnyano เพิ่งถามวิธีตั้งค่าสไตล์ให้กับแท็กที่เลือก เราทุกคนต้องการให้มีสไตล์ของแบบฟอร์มที่ตรงกับการออกแบบของเว็บไซต์ แต่จนถึงตอนนี้ยังไม่ใช่ทุกสิ่งที่สามารถอธิบายด้วย CSS ล้วนๆ ได้ ในบทความนี้ เราจะดูตัวอย่างง่ายๆ ของการเขียนรายการเลือกของคุณเอง โดยใช้ CSS และไลบรารีภาษา JavaScript - jQuery ฉันคิดว่าโดยเฉพาะผู้เริ่มต้นจะได้รับประโยชน์จากเนื้อหานี้ แน่นอนว่าเขียนด้วย Native JS จะดีกว่า แต่ทุกคนรู้ดีว่าจะต้องมีแถวของโค้ดมากกว่านี้ และไม่น่าเป็นไปได้ที่มันจะฉลาดกว่านี้

พูดตามตรง ฉันพยายามค้นหาวิธีแก้ปัญหาที่คล้ายกัน แต่ฉันไม่รู้อะไรนอกจาก div wrappers ที่มีประสิทธิภาพสำหรับแท็ก select และฉันคิดว่าการเขียนอะไรที่เรียบง่ายและจำเป็นคงจะไม่ดี แค่นั้นแหละ!

ไฟล์สามไฟล์มีชะตากรรมเดียวกันกับการปั้นดินน้ำมันของเรา:

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; cursor: pointer; transition: .2s; height: 40px; ) div#selectBox > img.arrow ( ตำแหน่ง: สัมบูรณ์; ขวา: 0; ความกว้าง: 50px; padding : 15px; ) /* สำหรับผู้ใช้ Safari, Chrome และ Opera โบนัสต้อนรับ - แถบเลื่อนที่มีสไตล์ */ ::-webkit-scrollbar ( พื้นหลัง: โปร่งใส; ความกว้าง: 0.5em; ตำแหน่ง: สัมบูรณ์; ) ::-webkit-scrollbar-track ( พื้นหลัง: โปร่งใส; ตำแหน่ง: สัมบูรณ์; z-index: -2; ) :: -webkit-scrollbar-thumb ( รัศมีเส้นขอบ: 100px; พื้นหลัง: #888; ) ul#selectMenuBox ( พื้นหลัง: #fff; การเปลี่ยนแปลง: .3s; ความกว้าง: 100%; ความสูง: 200px; overflow-y: อัตโนมัติ; ล้น- x: ซ่อน !important; ตำแหน่ง: สัมบูรณ์; ขอบบนสุด: 00px; display: block; ) ul#selectMenuBox > li ( display: block; li.option ( color: grey; padding: 10px; ) ul#selectMenuBox > li. ตัวเลือก:โฮเวอร์ ( สี: #333; พื้นหลัง: #e1e1e1; การเปลี่ยนแปลง: .2s; )

ไม่มีปัญหาพิเศษใดๆ ที่นี่ เนื่องจากคุณจัดการกับพื้นฐานของเลย์เอาต์และเลย์เอาต์โดยใช้ HTML และ CSS3

และตอนนี้เพื่อความเพลิดเพลิน! มาดูโค้ดเอาท์พุตของปลั๊กอินกัน กล่องเลือก()สำหรับ jQuery ไฟล์ selectbox.js:

selectbox.js

(function($) ( $.fn.selectbox = function() ( // cob พารามิเตอร์ // ตั้งค่าความสูงมาตรฐานของ div "a. var selectDefaultHeight = $("#selectBox").height(); // หมุน รูปภาพที่จะ div"e varrotDefault = "rotate(0deg)"; // หลังจากกดปุ่ม จะมีการใช้ฟังก์ชันพิเศษ ซึ่ง // คำนวณความสูงเอาต์พุตของ div"a ของเรา // มันง่ายที่จะปรับให้สอดคล้องกับ พารามิเตอร์อินพุต (ที่ระบุในสคริปต์ ) $("#selectBox > p.valueTag").click(function() ( // คำนวณความสูงของวัตถุโดยใช้เมธอด height() 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((เปลี่ยน: หมุนค่าเริ่มต้น)); ) )); // นี่คือวิธีการเบิร์นรายการเมื่อคุณเลือกองค์ประกอบที่ต้องการ // และเปลี่ยนข้อความในย่อหน้าเป็นข้อความขององค์ประกอบในรายการ $("li.option").click(function() ( $( "#selectBox").height(selectDefaultHeight); $ ("img.arrow").css((transform: RotDefault)); $("p.valueTag").text($(this).text()); )); ); )) (เจเคอรี่);

มีโค้ดมากกว่านี้ แต่สามารถบีบเมธอด css() และ height() ได้ มีการออกปลั๊กอินเพื่อให้ใช้งานง่ายและมี vikoristan ขนาดใหญ่ คุณสามารถสร้างรายได้อย่างที่ควรจะเป็น ไม่เช่นนั้นฉันจะไม่แปลกใจเลยที่มันเพิ่มประสิทธิภาพกองกำลังตำรวจของฉัน หากต้องการคลิก เพียงเชื่อมต่อไฟล์ภายนอกเข้ากับสคริปต์แล้วคลิกปลั๊กอินดังนี้:

$("ตัวเลือก").selectbox();
ขั้นแรก เปิดใช้งานการเรียกในเมธอด ready() ของออบเจ็กต์เอกสาร เพื่อให้ปลั๊กอินถูกโหลดหลังจากโหลดเอกสารโดยสมบูรณ์ คุณสามารถดูได้ว่าปลั๊กอิน jQuery นี้คืออะไร

ใครก็ตามที่มีส่วนร่วมอย่างจริงจังกับเค้าโครงหน้าจะรู้ดีว่าความเป็นไปได้ของการเลือกสไตล์ใน CSS นั้นได้รับการปรับปรุงอย่างมาก แม้ว่าการเลือกแบบมาตรฐานมักจะไม่เหมาะกับการออกแบบ แต่คุณต้องทำงานกับการเลือกสไตล์ผ่าน JavaScript ที่จริงแล้ว บทความนี้อนุญาตให้คุณสร้างการเลือกของคุณเองโดยใช้ JavaScript

มีปลั๊กอินสำเร็จรูปมากมาย รวมถึง jQuery ที่ให้คุณทำทุกอย่างได้ หากคุณไม่ต้องการโครงสร้างที่ซับซ้อน การสร้างทุกอย่างตั้งแต่เริ่มต้นโดยใช้ JavaScript ล้วนๆ จะง่ายกว่า

ก่อนอื่น เรามาสร้างโครงสร้าง HTML ของ select ใหม่ของเรากัน:

องค์ประกอบที่ 1
องค์ประกอบที่ 2
องค์ประกอบที่ 3

องค์ประกอบที่ 1

องค์ประกอบที่ 2

องค์ประกอบที่ 3

ดังที่คุณทราบ แทบไม่มีแท็กเลือกที่นี่ ตอนนี้เราสามารถจัดสไตล์การเลือกของเราได้อย่างง่ายดายด้วย CSS เพิ่มเติม:

เลือก(
สีพื้นหลัง: #0ee;
รัศมีเส้นขอบ: 10px;
การขยาย: 10px 0;
ความกว้าง: 200px;
}
.เลือก พี(
เคอร์เซอร์: ตัวชี้;
ระยะขอบ: 0;
การขยาย: 5px 20px;
}
.เลือก p.active (
สีพื้นหลัง: #ee0;
}

บ้าไปแล้ว คุณสามารถสร้างรายได้ตามที่คุณต้องการ และคุณตัดสินใจว่า คุณต้องเปลี่ยนรูปลักษณ์ของฟังก์ชันการทำงานของ select เพื่อที่คุณจะได้เลือกและไฮไลต์องค์ประกอบน้อยกว่าหนึ่งรายการจากสติ๊กเกอร์ รวมถึงจากการจัดการแบบฟอร์มไปพร้อมๆ กัน เราจะเร่งความเร็ว JavaScript เพื่อใคร:

เลือกฟังก์ชัน(องค์ประกอบ) (
var value = element.getAttribute("ข้อมูล-ค่า"); // อ่านค่าขององค์ประกอบที่เลือก
โหนด var = element.parentNode.childNodes; // ลบองค์ประกอบอื่นๆ ทั้งหมด
สำหรับ (var i = 0; i< nodes.length; i++) {
/* องค์ประกอบของบุคคลที่สามเป็นข้อความที่กรองและการป้อนข้อมูล */
ถ้า (โหนด [i] อินสแตนซ์ของ HTMLParagraphElement) (
/* เพิ่ม active ให้กับองค์ประกอบที่เลือก โดยลบคลาสนี้ออกจากคลาสอื่นทั้งหมด */
ถ้า (value == nodes[i].getAttribute("data-value")) nodes[i].className = "active";
โหนดอื่น [i] .className = "";
}
}
document.getElementById("my_select").value = ค่า; // ตั้งค่าของฟิลด์ที่ซ่อนอยู่
}

จุดสำคัญในการใช้ฟังก์ชันการเลือกคือฟิลด์ที่ซ่อนอยู่ซึ่งมีการบันทึกค่าจากการเลือกของเรา ข้อมูลเดียวกันจะถูกส่งไปในเวลาที่ส่งแบบฟอร์ม

แกนในลักษณะที่เรียบง่ายนั้นดูขี้อายอย่างยิ่ง ไม่ว่าจะเป็นการปรับสไตล์ของ JavaScript ที่เลือก หากคุณใช้ jQuery โค้ดจะง่ายกว่านี้อีก

การเลือกมาตรฐานมีฟังก์ชันการทำงานที่มากกว่าอย่างบ้าคลั่ง ตัวอย่างเช่น แท็บตอบสนองต่อแท็บ ดังนั้นคุณจึงสามารถเลื่อนดูองค์ประกอบต่างๆ ได้โดยใช้ปุ่มลูกศรบนแป้นพิมพ์ แต่ทั้งหมดนี้สามารถนำไปใช้ใน JavaScript ได้หากจำเป็น

คำแนะนำแรก. รหัสมีแท็ก noscript และไม่ชัดเจน ไม่ใช่ทุกคนที่เปิดใช้งาน JavaScript และเพื่อให้แบบฟอร์มใช้งานได้สำหรับผู้ใช้ดังกล่าว คุณจะต้องป้อนตัวเลือกมาตรฐาน และทุกคนที่เปิดใช้งาน JavaScript โปรดใช้เครื่องมือที่เราเลือก

เคารพ! การพัฒนาเพิ่มเติมและการสนับสนุนปลั๊กอินที่เกี่ยวข้องกับสิ่งที่เป็นบางส่วนในขณะนี้

หนึ่งในสุนทรพจน์ที่ยอมรับไม่ได้มากที่สุด (และฉันหมายถึงความโลภ) ในการพัฒนาเว็บคือชุดของรูปแบบ HTML น่าเสียดายที่ไม่มีมาตรฐานที่เหมือนกันในการแสดงองค์ประกอบของฟอร์ม โดยไม่คำนึงถึงเบราว์เซอร์หรือระบบปฏิบัติการ เช่นเดียวกับความสามารถในการออกแบบการดำเนินการจากองค์ประกอบเหล่านี้ vikoryst และสไตล์ชีตแบบเรียงซ้อนเหล่านี้

องค์ประกอบแบบฟอร์ม HTML ต่อไปนี้ไม่สามารถจัดสไตล์เพิ่มเติมได้:

รายการสิ่งที่จะเปิด
ธง;
เปเรมิคาช
ช่องสำหรับการอัพโหลดไฟล์

อย่างที่คุณเห็นจากชื่อโพสต์แล้ว ยังมีอะไรให้พูดอีกมากเกี่ยวกับการเลือกสรร

มีโซลูชันสำเร็จรูปมากมายในรูปแบบของปลั๊กอิน jQuery สำหรับรายการสไตล์ที่เปิดอยู่ อย่างไรก็ตามฉัน (ผ่านสิ่งที่มาจากปลั๊กอินโดยไม่คำนึงถึงเหตุผลเหล่านี้และเหตุผลอื่น ๆ ) ได้เลือกวิธีที่จะออกจากวงล้อของฉันและได้เขียนปลั๊กอินกำลังซึ่งฉันกำลังแบ่งปันในบทความนี้

ฉันต้องการชี้ให้เห็นว่าปลั๊กอินนี้ไม่เหมาะสำหรับสถานการณ์ที่เป็นไปได้ทั้งหมดของการเลือกซบเซา (อ่านบางส่วน)

การสาธิตปลั๊กอินหุ่นยนต์

คุณสามารถดูวิธีจัดสไตล์การเลือกได้โดยใช้ปลั๊กอินเพิ่มเติม ฉันสร้างการออกแบบนี้โดยไม่ต้องใช้ vikoristan เพื่อบรรยายถึงมัน

ข้อดี

เมื่อเปิดใช้งาน JavaScript ตัวเลือกมาตรฐานจะปรากฏขึ้น
สคริปต์มีขนาดเล็กประมาณ 4 กิโลไบต์
ใช้งานได้กับ IE6+ และเบราว์เซอร์เดสก์ท็อปปัจจุบันทั้งหมด
เพื่อนำมาแนะนำเป็นการภายใน
ปรับแต่งได้อย่างง่ายดายผ่าน CSS
ให้คุณตั้งค่าความสูงสูงสุดสำหรับรายการ (CSS power max-height)
ปรับความกว้างโดยอัตโนมัติหากไม่ได้ระบุไว้
รองรับการเลื่อนล้อเมาส์
อาจมี “จุดยืนที่สมเหตุสมผล” นั่นก็คือ เมื่อคุณเปิดรายการ อย่าไปเกินกว่าส่วนที่มองเห็นได้ของหน้า
คุณสามารถ "จับ" แรงกดของปุ่ม Tab และเลื่อนลูกศรบนคีย์บอร์ดได้
รองรับแอตทริบิวต์ "ปิดใช้งาน"
ทำงานร่วมกับตัวเลือกที่เพิ่ม/เปลี่ยนแปลงแบบไดนามิก

เนโดลิกี

มันไม่รองรับแอตทริบิวต์หลายรายการแล้ว ไม่อนุญาตให้เลือกหลายรายการ (เลือกหลายรายการ)
ไม่รองรับการจัดกลุ่มองค์ประกอบรายการ (แท็ก)
ไม่แนะนำให้ย้ายลูกศรบนแป้นพิมพ์หากรายการการคลิกเมาส์เปิดอยู่

ดึงดูด

ปลั๊กอินไม่พร้อมใช้งานเนื่องจาก VIN ไม่เป็นปัจจุบัน

ปลั๊กอิน jQuery “SelectBox Styler”

เวอร์ชัน: 1.0.1 | ซาวานตาเซิน: 11103 | ขนาด: 7 KB | อัปเดตล่าสุด: 10/07/2012

อัปเดตเมื่อ 22/09/2555 โดยการทำงานสคริปต์ของปลั๊กอินใหม่ (รวมถึงการสร้างตัวเลือกย่อเล็กสุด) และโดยการเพิ่มการสนับสนุนสำหรับการเพิ่ม/เปลี่ยนแปลงการเลือกแบบไดนามิก 2012/07/10 แก้ไขพฤติกรรมของสคริปต์เมื่อเปลี่ยนวิธีการ onchange ของแท็ก การเชื่อมต่อปลั๊กอิน

หากยังไม่ได้เปิดใช้งาน jQuery บนไซต์ ให้เพิ่มบรรทัดนำหน้าแท็ก:

ทันทีหลังจาก jQuery ให้เชื่อมต่อไฟล์กับสคริปต์:

(ฟังก์ชั่น($) ( $(ฟังก์ชั่น() ( $("เลือก").selectbox(); )) ))(jQuery)

ควรวางโค้ดนี้ไว้หน้าแท็กหลังไฟล์ที่ระบุ

เมื่อเปลี่ยนตัวเลือกแบบไดนามิก จำเป็นต้องเปิดทริกเกอร์การรีเฟรช เช่น:

(function($) ( $(function() ( $("button").click(function() ( $("select").find("option:nth-child(5))).attr("selected ", จริง); $("select").trigger("refresh"); )) )) ))(jQuery)

รหัส HTML หลังจากติดตั้งปลั๊กอินแล้ว

โครงสร้างของมันมีลักษณะดังนี้:

-- เลือก --

-- เลือก --
วรรค 1
จุดที่ 2
จุดที่ 3

-- เลือก -- รายการที่ 1 รายการที่ 2 รายการที่ 3

คลาส CSS ที่สามารถใช้เพื่อออกแบบการเลือก

หากต้องการสร้างการเลือกสำหรับ CSS เพิ่มเติมให้ใช้คลาสต่อไปนี้:

.กล่องเลือก	ภาชนะของพ่อคัดมาทั้งหมด
.กล่องเลือก .เลือก	เลือกจากค่ายที่กำลังลุกไหม้
.selectbox.เน้น .select	เน้นที่การเลือกเมื่อกดปุ่ม Tab
.selectbox .select .ข้อความ	ไฟล์แนบสำหรับตัวเลือกที่เลือกเพื่อแทรกภาพพื้นหลังโดยใช้เทคนิค "เปิดประตู"
.selectbox .ทริกเกอร์	สิทธิ์ในส่วนหนึ่งของการเลือกที่ถูกเบิร์น (smart remixer)
.selectbox .ทริกเกอร์ .ลูกศร	แท็กไฟล์แนบสำหรับรีมิกซ์ (ลูกศร)
.selectbox .ดรอปดาวน์	เตาสำหรับรายการ
.selectbox .ดรอปดาวน์ ul	รายการสุ่ม
.selectbox li	รายการ (ตัวเลือก) เลือก
.selectbox li.selected	รายการเลือกไวเบรเนียม
.selectbox li.disabled	vimkneny (ไม่มีให้เลือก) เลือกรายการ

วิสโนวอค

การสร้างสคริปต์ดังกล่าวก็เพียงพอแล้วที่จะทำให้คุณยุ่ง ในขณะที่คุณต้องจัดการกับสิ่งต่าง ๆ มากมาย ฉันแน่ใจว่าจะไม่มีข้อบกพร่องร้ายแรงอีกต่อไป สวัสดีแจ้งให้เราทราบในความคิดเห็น

ทางเลือกของบรรณาธิการ