คุณลักษณะ data-toggle ใน Twitter Bootstrap

อะไรdata-toggleคุณลักษณะทำใน Twitter Bootstrap? ฉันไม่พบคำตอบใน Bootstrap API

ฉันได้เห็นคำถามที่คล้ายกันก่อนเช่นกันการเชื่อมโยง แต่มันก็ไม่ได้ช่วยอะไรมาก

มันเป็นคุณสมบัติข้อมูล Bootstrap ที่เชื่อมโยงองค์ประกอบกับประเภทของเครื่องมือโดยอัตโนมัติ Data- * เป็นส่วนหนึ่งของข้อมูลจำเพาะ html5 และ data-toggle จำเพาะกับ Bootstrap

ตัวอย่างบางส่วน:

data-toggle="modal"
data-toggle="collapse"
data-toggle="dropdown"
data-toggle="tab"

ทำตามเอกสาร Bootstrap JavaScriptและค้นหา data-toggle และคุณจะเห็นมันใช้ในตัวอย่างโค้ด

ตัวอย่างการทำงานหนึ่ง:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li><a href="#">Item</a></li>
  </ul>
</div>

คุณลักษณะใด ๆ ที่ขึ้นต้นด้วยdata-คือคำนำหน้าสำหรับแอตทริบิวต์แบบกำหนดเองที่ใช้สำหรับวัตถุประสงค์เฉพาะบางอย่าง (วัตถุประสงค์นั้นขึ้นอยู่กับแอปพลิเคชัน) มันถูกเพิ่มเป็นการรักษาความหมายของการใช้งานหนักของผู้คนrelและคุณลักษณะอื่น ๆ เพื่อวัตถุประสงค์อื่นนอกเหนือจากจุดประสงค์ดั้งเดิม ( relมักใช้เพื่อเก็บข้อมูลสำหรับสิ่งต่าง ๆ เช่นคำแนะนำเครื่องมือขั้นสูง)

ในกรณีของ Bootstrap ฉันไม่คุ้นเคยกับการทำงานภายใน แต่ตัดสินจากชื่อฉันเดาว่ามันเป็นเบ็ดที่อนุญาตให้สลับการมองเห็นหรืออาจเป็นโหมดขององค์ประกอบที่เชื่อมต่อกับ (เช่นยุบได้ แถบด้านข้างบน Octopress.org )

html5doctor มีบทความที่ดีในแอตทริบิวต์

รอบ 2 เป็นตัวอย่างของการใช้งานที่กว้างขวางของแอตทริบิวต์

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

<li><a href="recipe1.html">Borscht</a></li>
<li><a href="recipe2.html">Chocolate Mousse</a></li>
<li><a href="recipe3.html">Almond Radiccio Salad</a></li>
<li><a href="recipe4.html">Deviled Eggs</a></li>

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

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

แต่มีข้อเสียที่สำคัญบางอย่างสำหรับวิธีนี้:

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

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

HTML5 เพิ่มแอตทริบิวต์ประเภทใหม่ให้กับองค์ประกอบใด ๆ - องค์ประกอบข้อมูลที่กำหนดเอง (data- *) เหล่านี้เป็นแอตทริบิวต์ที่กำหนดเอง (แสดงโดย *) ที่คุณสามารถเพิ่มองค์ประกอบ HTML ของคุณเพื่อกำหนดประเภทของข้อมูลที่คุณต้องการ พวกเขาประกอบด้วยสองส่วน:

ชื่อแอตทริบิวต์นี่คือชื่อของแอตทริบิวต์ ต้องมีอักขระตัวพิมพ์เล็กอย่างน้อยหนึ่งตัวและมีข้อมูลนำหน้า - ตัวอย่างเช่น: data-main-ingredients, data-cooking-time, data-meal นี่คือชื่อของข้อมูลของคุณ

แอตทริบิวต์ Vaule เช่นเดียวกับแอตทริบิวต์ HTML อื่น ๆ คุณรวมข้อมูลไว้ในเครื่องหมายคำพูดคั่นด้วยเครื่องหมายเท่ากับ ข้อมูลนี้สามารถเป็นสตริงใด ๆ ที่ใช้ได้บนเว็บเพจ ตัวอย่างเช่น: data-main-ingredients = "chocolate"

จากนั้นคุณสามารถใช้แอตทริบิวต์ข้อมูลเหล่านี้กับองค์ประกอบ HTML ที่คุณต้องการ ตัวอย่างเช่นคุณสามารถกำหนดข้อมูลในรายการตัวอย่างด้านบน:

<li data-main-ingredient="beets" data-cooking-time="1 hour" data-meal="dinner"><a href="recipe1.html">Borscht</a></li>
<li data-main-ingredient="chocolate" data-cooking-time="30 minutes" data-meal="dessert"><a href="recipe2.html">Chocolate Mousse</a></li>
<li data-main-ingredient="radiccio" data-cooking-time="20 minutes" data-meal="dinner"><a href="recipe1.html">Almond Radiccio Salad</a></li>
<li data-main-ingredient="eggs" data-cooking-time="15 minutes" data-meal="appetizer"><a href="recipe1.html">Deviled Eggs</a></li>

เมื่อคุณมีข้อมูลนั้นใน HTML ของคุณแล้วคุณจะสามารถเข้าถึงได้ด้วย JavaScript และจัดการหน้าตามข้อมูลนั้น

จากBootstrap Docs:

<!--Activate a modal without writing JavaScript. Set data-toggle="modal" on a 
controller element, like a button, along with a data-target="#foo" or href="#foo" 
to target a specific modal to toggle.-->

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

มีคำตอบมากมาย แต่พวกเขาไม่เข้าใจ มาแก้ไขกันเถอะ

http://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp

ตรงประเด็น

1. แอททริบิวใด ๆ ที่ขึ้นต้นด้วยdata-จะไม่ถูกแยกวิเคราะห์โดยตัวแยกวิเคราะห์ HTML5
2. Bootstrap ใช้data-toggleคุณลักษณะเพื่อสร้างฟังก์ชันการยุบ

วิธีใช้ : เพียง 2 ขั้นตอน

1. เพิ่มclass="collapse"องค์ประกอบที่#Aคุณต้องการยุบ
2. เพิ่มและdata-target="#A"data-toggle="collapse"

จุดประสงค์: data-toggleแอตทริบิวต์ทำให้เราสามารถสร้างตัวควบคุมเพื่อยุบ / ขยาย a div(บล็อก) หากเราใช้ Bootstrap

การมีอยู่ของข้อมูลคุณลักษณะนี้บอก Bootstrap เพื่อสลับระหว่างภาพหรือสถานะทางตรรกะขององค์ประกอบอื่นในการโต้ตอบกับผู้ใช้

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

วัตถุประสงค์ของ data-toggle ใน bootstrap คือเพื่อให้คุณสามารถใช้ jQuery เพื่อค้นหาแท็กทั้งหมดของประเภทที่แน่นอน ตัวอย่างเช่นคุณใส่ data-toggle = "popover" ในแท็ก popover ทั้งหมดจากนั้นคุณสามารถใช้ตัวเลือก JQuery เพื่อค้นหาแท็กเหล่านั้นทั้งหมดและเรียกใช้ฟังก์ชัน popover () เพื่อเริ่มต้นพวกเขา คุณสามารถใส่ class = "myPopover" บนแท็กและใช้. myPopover selector เพื่อทำสิ่งเดียวกัน เอกสารทำให้เกิดความสับสนเนื่องจากทำให้ดูเหมือนว่ามีสิ่งพิเศษเกิดขึ้นกับแอตทริบิวต์นั้น

นี้

<div class="container">
    <h3>Popover Example</h3>
    <a href="#" class="myPop" title="Popover1 Header" data-content="Some content inside the popover1">Toggle popover1</a>
    <a href="#" class="myPop" title="Popover2 Header" data-content="Some content inside the popover2">Toggle popover2</a>
</div>

<script>
    $(document).ready(function(){
        $('.myPop').popover();   
    });
</script>

ทำงานได้ดี

เป็นแอตทริบิวต์ข้อมูล HTML5 ที่กำหนดโดย Bootstrap มันผูกปุ่มกับเหตุการณ์

ที่นี่คุณสามารถค้นหาตัวอย่างเพิ่มเติมสำหรับค่าที่data-toggleสามารถกำหนดได้ เพียงเข้าไปที่หน้าและจากนั้นในการค้นหาCTRL+Fdata-toggle

Bootstrap ใช้ประโยชน์จากมาตรฐาน HTML5 เพื่อเข้าถึงแอตทริบิวต์ DOM องค์ประกอบได้อย่างง่ายดายภายในจาวาสคริปต์

ข้อมูล-*

จัดทำคลาสของคุณลักษณะที่เรียกว่าแอตทริบิวต์ข้อมูลที่กำหนดเองซึ่งอนุญาตให้มีการแลกเปลี่ยนข้อมูลกรรมสิทธิ์ระหว่าง HTML และการแทน DOM ที่อาจใช้โดยสคริปต์ ข้อมูลที่กำหนดเองดังกล่าวทั้งหมดสามารถใช้ได้ผ่านทางส่วนต่อประสาน HTMLElement ขององค์ประกอบที่มีการตั้งค่าแอตทริบิวต์ คุณสมบัติ HTMLElement.dataset ให้สิทธิ์การเข้าถึง

การอ้างอิง