jQuery: หา ()
jQuery เป็นกรอบ JavaScript ที่ดี ถ้าคุณยังไม่ได้มีโอกาสทำงานกับเขาผมหวังว่าสิ่งพิมพ์ต่อไปนี้จะขอแนะนำให้คุณใช้ประโยชน์จากวิธีการแก้ปัญหานี้โดยเฉพาะ เพราะมันเป็นลักษณะความเร็วเพิ่มประสิทธิภาพรหัสเพื่อรองรับเขาในเบราว์เซอร์เป็นจำนวนมากเช่นกันซึ่งอาจจะหลายที่น่าสนใจที่สุด - ง่ายต่อการสร้างโซลูชันที่ซับซ้อน
ในบทความวันนี้จะมุ่งเน้นไปที่วิธีที่มีประโยชน์มากหา ()
ถ้าคุณยังไม่ได้รับการติดต่อกับกรอบนี้ฉันขอให้คุณทำความคุ้นเคยกับพื้นฐานของ selectors โดยใช้ API อย่างเป็นทางการเมื่อselectorów หรือจัดทำขึ้นโดย Bartosz Medonia jQuery หลักสูตรพื้นฐาน . ความรู้นี้จะช่วยอำนวยความสะดวกในการทำความเข้าใจของโซลูชั่นที่นำเสนอในเอกสารฉบับนี้
ที่ดีที่สุดให้ของได้รับบางตัวอย่างที่เป็นรูปธรรมของวิธีการนี้ บนหน้าเว็บมากที่สุดคนหนึ่งขององค์ประกอบพื้นฐานสำหรับการนำเมนู เราจะพยายามที่จะสร้างเมนูเคลื่อนไหวของพวกเขาเองโดยใช้จำนวนขั้นต่ำของส่วนประกอบและการดำเนินงานภายใต้เบราว์เซอร์ที่สนับสนุน JavaScript ใด ๆ
ก่อน เตรียมความพร้อมขององค์ประกอบ
ขอเริ่มต้นด้วยการสร้างเอกสาร HTML ที่ว่างเปล่า:
<DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> xmlns="http://www.w3.org/1999/xhtml"> <html <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> เมนู </ title> <หัว /> <body> </ body> </ html>
แล้วคว้ารุ่นล่าสุดของ jQuery จาก เว็บไซต์อย่างเป็นทางการของโครงการ (การผลิต) และคัดลอกไปที่โฟลเดอร์ของไฟล์ HTML ของเรา
ภายในเอกสารนี้สามารถใช้เนื้อหาตัวอย่างบางส่วนและเมนูของเรา ที่ใช้สำหรับ div นี้และช่วงแท็ก แน่นอนรายการในเมนูของเราควรจะให้การสนับสนุนจึงวางไว้ในบล็อก ใส่ทั้งภายใน div บล็อกที่มี ID = เมนู ที่เพิ่มไฟล์โดยใช้แท็กสคริปต์ jQuery ทั้งควรมีลักษณะบางอย่างเช่นนี้
id="menu"> <div <div> href # 1 เมนู </ a> <span> href # 1.1 เมนู </ a> href # 1.2 เมนู </ a> href # 1.3 เมนู </ a> </ span> </ div> <div> href # 2 เมนู </ a> <span> href # 2.1 เมนู </ a> href # 2.2 เมนู </ a> href # 2.3 เมนู </ a> href # 2.4 เมนู </ a> href # 2.5 เมนู </ a> </ span> </ div> <div> href # 3 เมนู </ a> <span> href # 3.1 เมนู </ a> href # 3.2 เมนู </ a> href # 3.3 เมนู </ a> href # 3.4 เมนู </ a> </ span> </ div> <div> href # 4 เมนู </ a> <span> href # 4.1 เมนู </ a> href # 4.2 เมนู </ a> </ span> </ div> </ div> <- End เมนู # -> มีเนื้อหาตัวอย่างบางส่วน มีเนื้อหาตัวอย่างบางส่วน มีเนื้อหาตัวอย่างบางส่วน มีเนื้อหาตัวอย่างบางส่วน มีเนื้อหาตัวอย่างบางส่วน มีเนื้อหาตัวอย่างบางส่วน มีเนื้อหาตัวอย่างบางส่วน มีเนื้อหาตัวอย่างบางส่วน มีเนื้อหาตัวอย่างบางส่วน มีเนื้อหาตัวอย่างบางส่วน <script type="text/javascript" src="jquery.js"> </ script>
พิเศษใส่หลายรายการในเมนูที่จะแสดงวิธีที่ง่ายจะดึงดูดมากของพวกเขาจาก jQuery ซึ่งขึ้นอยู่กับบล็อกที่เราเลื่อนเมาส์
ที่สอง กำหนดลักษณะของเมนู (CSS)
ในส่วนนี้เรากำหนดให้ใช้ในไฟล์ html, บล็อครหัส ฉันเตรียมเองรหัสต่อไปนี้รูปแบบที่ตั้งอยู่ในส่วนหัว:
type="text/css"> <style <! - * {margin: padding, 0px: 0px;} {ตกแต่งข้อความ: ไม่มี; อักษร: 20px จอร์เจีย, "Times New Roman" ไทม์ส, serif;} HTML, body {margin: 10px;} เมนูด้านบน # {: 0px; float: left; กว้าง: 100%;} กองเมนู # {position: relative; float: left;} กองเมนู #: ที่ใช้งานเมนู div #: ลิงค์ div เมนู #: เข้าเยี่ยมชม {display: block; ตำแหน่ง: ญาติ; vertical-align: กลาง; พื้นหลัง: # ccc; color: # fff; padding: 5px 10px; ความกว้าง: 150px;} กองเมนู #: โฉบ {background: # 999;} กองเมนู # ช่วง {display: none; position: absolute, ชั้น: 100%; ที่ยังเหลือ: 0; ลอย: none;} กอง div เมนู #: ทำงาน, # div div เมนู: ลิงค์ div เมนู # ช่วง: {ตำแหน่งที่เข้าชม: relative; display: block; float: left; ชั้น: 0px; พื้นหลัง: # ddd; color: # fff; padding: 5px 10px; กว้าง: 150px;} กอง div เมนู #: โฉบ {background: # 999;} -> </ style>
ในตัวอย่างของเราที่เราสร้างเมนูสองระดับง่ายเท่านั้น แต่มีอะไรในทางที่จะปรับเปลี่ยนพวกเขาและปรับให้เข้ากับจำนวนของระดับใด
ถ้าเราอยู่ที่จุดนี้คุณยังควรดูที่ กรอบเพื่อสร้างเมนู css'owego .
ที่สาม เล็บของโปรแกรม - ค้นหา
โดยมาตรการดังกล่าวเรากำลังเตรียมที่จะดำเนินการเต็มรูปแบบหน้ารหัส JavaScript นอกจากนี้เรายังรู้ว่าเป็นที่กล่าวถึงว่าเลือก ในกรณีของเราเช่นค่อนข้างง่ายเนื่องจากมีเพียงสี่เมนูหลัก แต่ก็ไม่ยากที่จะจินตนาการว่าอาจจะมีมากขึ้นและแต่ละคนสามารถมีหลายสาขา นี้ disqualifies วิธีการวนลูปยังไม่รวมเดียรัจฉานบังคับต้องตรวจสอบทุกกรณีแยกต่างหาก แต่ด้วยวิธีการที่พบปัญหาที่เกิดเดือดลงไปหนึ่งเส้นที่ชัดเจนมากของรหัสที่รันงานทั้งหมดสำหรับเรา มันเป็นการดีที่รหัส JavaScript ของเราอยู่ใน $ (เอกสาร). พร้อมสร้างความมั่นใจเราจะเรียกมันเมื่อโหลดหน้าทุกสคริปต์ภายนอกรูปแบบและไฟล์อื่น ๆ
<script type="text/javascript"> <! - / / <! [CDATA [ $ (เอกสาร). พร้อม (function () { $ ("div # เมนู"). โฮเวอร์ ( function () { . $ (นี้) ค้นหา ("ช่วง") Css ({opacity: 0.98}) SlideToggle ("รวดเร็ว");.. } function () { . $ (นี้) ค้นหา ("ช่วง") SlideToggle ("รวดเร็ว"). } ); }); / /]]> -> </ script>
รหัสข้างต้นที่ผมแนะนำให้ใส่แท็กสคริปต์ซึ่งเราจะเรียก jQuery, ที่อยู่ด้านล่าง
ในตัวเลือกหลักที่อ้างถึงแท็กของ id = "เมนู", ภายในที่มี div วิธี. เลื่อน () หมายถึงการเกิดขึ้นบุกเมาส์, รายการที่เลือกและเป็นพารามิเตอร์ใช้เวลาหนึ่งหรือสองฟังก์ชั่นที่มีการดำเนินการในช่วงเริ่มต้นของเหตุการณ์นี้ คุณลักษณะที่สองคือไม่จำเป็นและจะดำเนินการเมื่อเมาส์ออกจากพื้นที่ขององค์ประกอบของเรา พยายามที่จะแนะนำรหัสเพื่อให้ฟังก์ชั่นทั้งสองมีความโปร่งใสให้กับผู้อ่าน แต่ผมขอแนะนำให้ลดการใช้รหัสในโครงการที่มีอยู่
ให้เราตอนนี้วิเคราะห์รหัสภายในฟังก์ชัน อีกครั้งที่นี่เราจะใช้เลือกเวลาที่เราอ้างถึงเรื่องที่เราอาศัยอยู่นี้. แต่ละส่งกลับเลือก jQuery ซึ่งสามารถแก้ไขโดยคำสั่งนี้ แต่ถ้าคุณต้องการภายในองค์ประกอบอ้างอิงถึงรายการที่อยู่ภายในรายการที่ใช้วิธีการค้นหาที่พบและส่งกลับองค์ประกอบที่ตรงกันทั้งหมด เก็บนี้ในใจเพราะถ้าคุณต้องการอ้างถึงรายการเฉพาะคุณจะใช้ระดับดังกล่าวและหลังจากการอุทธรณ์. หา (". ClassNazwa") แน่นอนภายในพบเรายังอาจหมายถึงความซับซ้อนมากขึ้นองค์ประกอบโครงสร้างเช่นเดียวกับ selectors jQuery
คุณสมบัติแรกที่คุณสามารถดูปรับเปลี่ยนหาวิธีการส่งกลับวัตถุและเปลี่ยนความโปร่งใสของมันแล้วใช้ slideToggle วิธีการ (), จะต้องเริ่มต้นการเคลื่อนไหวในกรณีนี้ก็เป็นภาพเคลื่อนไหว, "น้อย" ไปที่ด้านล่างซึ่งจะกำหนดพารามิเตอร์ตั้งค่าการแสดง ไม่มีในการตั้งค่าขององค์ประกอบ (องค์ประกอบจะมองไม่เห็นจึงเลื่อนสิ่งเดียวที่สามารถทำได้คือการแสดง)
ในลักษณะที่สองทุกอย่างดูคล้ายกันมากยกเว้นว่าเราไม่จำเป็นต้องปรับเปลี่ยนความทึบแสงเพราะมันได้ถูกเปลี่ยนแปลง เราไม่ได้เกี่ยวกับ jQuery ได้แก่ เพราะใน css ไม่ได้จะเป็นไปได้ในลักษณะเป็นเพื่อให้บรรลุปฏิบัติตาม W3C validator และความโปร่งใสที่ถูกแสดงขึ้นอย่างถูกต้องบนเบราว์เซอร์ที่ทันสมัยทั้งหมดที่สนับสนุน JavaScript
4 ข้อมูลอย่างย่อ
วัตถุประสงค์ของบทความนี้ก็คือเรียนรู้วิธีการสร้างเมนูแบบเคลื่อนไหว แต่จะทำความรู้จักประเด็นที่น่าสนใจมากมายเกี่ยวกับวิธีการหา () เช่นเดียวกับ jQuery โอกาสเป็นใหญ่และผมหวังว่าหลังจากอ่านบทความนี้ก็จะได้รับความชื่นชอบไม่กี่
ในขณะที่ผลกระทบจากการทำงานของเราเราจะสามารถเห็น การสาธิต .
บทความที่ดีมาก - วิธีที่มีประโยชน์มากที่อธิบาย jQuery และตัวอย่างในทางปฏิบัติค่อนข้าง ทั้งหมดที่ชัดเจนและน่ารื่นรมย์, ฉันรอคอยสำหรับศิลปินต่อไป