ट्विटर बूटस्ट्रैप में डेटा-टॉगल विशेषताएँ

284

data-toggleTwitter बूटस्ट्रैप में विशेषताएँ क्या करती हैं ? मुझे बूटस्ट्रैप API में कोई उत्तर नहीं मिला।

मैंने पहले भी इसी तरह का प्रश्न देखा है, लिंक । लेकिन इससे मुझे बहुत मदद नहीं मिली।

209

यह एक बूटस्ट्रैप डेटा विशेषता है जो स्वचालित रूप से तत्व को विजेट के प्रकार को हुक करता है। Data- * html5 कल्पना का हिस्सा है, और डेटा-टॉगल बूटस्ट्रैप के लिए विशिष्ट है।

कुछ उदाहरण:

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

बूटस्ट्रैप जावास्क्रिप्ट डॉक्स के माध्यम से जाएं और डेटा-टॉगल की खोज करें और आप इसे कोड उदाहरणों में उपयोग करते देखेंगे।

एक काम करने का उदाहरण:

<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>

स्निपेट का विस्तार करें

— epascarello
स्रोत

8

यह सिर्फ एक HTML विशेषता है जो चयनकर्ताओं के साथ प्रयोग की जाती है, HTML5 विशिष्ट नहीं।

— उमूर कोंटासी

24

@ UmurKontacı डेटा- * को HTML5 स्पेक में पेश किया गया था ।

— epascarello

1

मुझे यकीन नहीं है, लेकिन ऐसा लगता है कि जावास्क्रिप्ट डॉक्स का लिंक getbootstrap.com/2.3.2/javascript.html पर बदल दिया गया है । कृपया इसे सत्यापित करें।

— hims056

78

आपने इसे साउंड बना दिया है जैसे डेटा टॉगल डेटा के बजाय html5 कल्पना का हिस्सा है- * html5 है और डेटा-टॉगल बूटस्ट्रैप है।

— बेंटेक 24'14

2

और 'डेटा-टॉगल' भी बूटस्ट्रैप-विशिष्ट नहीं है, बस उस बूटस्ट्रैप ने डेटा का उपयोग करने के लिए चुना- 'टॉगल' नाम के साथ विशेषता। तो आप किसी अन्य प्रोजेक्ट में बूटस्ट्रैप से संबंधित 'डेटा-टॉगल' विशेषता का सामना कर सकते हैं।

— डैनियल हिगुएरस

74

किसी भी विशेषता के साथ शुरू होने वाली data-विशेषता किसी विशिष्ट उद्देश्य के लिए उपयोग की जाने वाली कस्टम विशेषताओं के लिए उपसर्ग है (यह उद्देश्य आवेदन पर निर्भर करता है)। इसे लोगों के भारी उपयोग relऔर उनके मूल उद्देश्यों के अलावा अन्य उद्देश्यों के लिए अन्य विशेषताओं के लिए एक शब्दार्थ उपाय के रूप में जोड़ा गया था ( relइसका उपयोग अक्सर उन्नत टूलटिप्स जैसी चीजों के लिए डेटा रखने के लिए किया जाता था)।

बूटस्ट्रैप के मामले में, मैं इसके आंतरिक कामकाज से परिचित नहीं हूं, लेकिन नाम से देखते हुए, मुझे लगता है कि यह दृश्यता के टॉगल करने की अनुमति देने के लिए एक हुक है या शायद यह तत्व से जुड़ा हुआ है (जैसे कि बंधनेवाला) Octopress.org पर साइड बार )।

html5doctor का डेटा- विशेषता पर एक अच्छा लेख है ।

साइकल 2 डेटा के व्यापक उपयोग का एक और उदाहरण है- विशेषता ।

— शौना
स्रोत

5

"HTML5 में, कोई भी विशेषता जो डेटा के साथ शुरू होती है- एक मान्य कस्टम विशेषता है। मूल रूप से, यह उन तत्वों को कस्टम डेटा संलग्न करने का एक तरीका है जो HTML विनिर्देश में स्पष्ट रूप से परिभाषित नहीं हैं।"

— स्पाइडरमैन

30

उदाहरण के लिए, मान लीजिए कि आप व्यंजनों को सूचीबद्ध करने और प्रदर्शित करने के लिए एक वेब एप्लिकेशन बना रहे हैं। हो सकता है कि आप चाहते हैं कि आपके ग्राहक सूची को छांटने में सक्षम हों, व्यंजनों की विशेषताओं को प्रदर्शित करें, और इससे पहले कि वे खोलने के लिए नुस्खा चुनें। ऐसा करने के लिए, आपको व्यंजनों के लिए सूची तत्वों के अंदर खाना पकाने का समय, प्राथमिक घटक, भोजन की स्थिति और इसी तरह की चीजों को जोड़ना होगा।

<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 विशेषताओं को जोड़ सकते हैं, आप सभी व्यंजनों को समय, भोजन और घटक (यानी) के आधार पर अलग-अलग फ़ोल्डरों में रख सकते हैं। वर्तमान डेवलपर्स के बारे में जानकारी संग्रहीत करने के लिए अधिकांश डेवलपर्स ने जो समाधान लिया वह वर्ग विशेषताओं का उपयोग करना था। इसके कई फायदे हैं:

आप एक तत्व पर कई वर्गों को संग्रहीत कर सकते हैं
वर्ग के नाम मानव पठनीय हो सकते हैं
जावास्क्रिप्ट के साथ कक्षाओं तक पहुंचना आसान है (className)
वर्ग उस तत्व के साथ जुड़ा हुआ है जिस पर वह है

लेकिन इस विधि में कुछ बड़ी कमियां हैं:

आपको याद रखना होगा कि कक्षाएं क्या करती हैं। यदि आप भूल जाते हैं या एक नया डेवलपर इस परियोजना को संभालता है, तो वर्गों को हटाया या बदल दिया जा सकता है बिना यह एहसास किए कि यह प्रभावित करता है कि आवेदन कैसे चलता है।
सीएसएस के साथ स्टाइल के लिए भी कक्षाओं का उपयोग किया जाता है, और आप सीएसएस कक्षाओं को गलती से डेटा कक्षाओं के साथ डुप्लिकेट कर सकते हैं, अपने लाइव पेज पर अजीब शैलियों के साथ समाप्त हो सकते हैं।
कई डेटा तत्वों को जोड़ना अधिक कठिन है। यदि आपके पास कई डेटा तत्व हैं, तो आपको उन्हें किसी तरह से अपने जावास्क्रिप्ट के साथ एक्सेस करने की आवश्यकता है, या तो क्लास के नाम से या क्लास लिस्ट में स्थिति से। लेकिन गड़बड़ करना आसान है।

मेरे द्वारा सुझाए गए अन्य सभी तरीकों में इन समस्याओं के साथ-साथ अन्य भी थे। लेकिन चूंकि यह जल्दी और आसानी से डेटा को शामिल करने का एकमात्र तरीका था, यही हमने किया। एचटीएमएल 5 डेटा बचाव में भाग लेता है

HTML5 ने किसी भी तत्व में एक नया प्रकार जोड़ा- कस्टम डेटा तत्व (डेटा- *)। ये कस्टम (* द्वारा चिह्नित) विशेषताएँ हैं जिन्हें आप अपने HTML तत्वों में किसी भी प्रकार के डेटा को परिभाषित करने के लिए जोड़ सकते हैं। इनमें दो भाग होते हैं:

विशेषता का नाम यह विशेषता का नाम है। यह कम से कम एक कम वर्ण होना चाहिए और उपसर्ग डेटा- होना चाहिए। उदाहरण के लिए: डेटा-मुख्य-घटक, डेटा-कुकिंग-टाइम, डेटा-भोजन। यह आपके डेटा का नाम है।

Vaule को किसी अन्य HTML विशेषता की तरह, आप डेटा को एक समान चिह्न द्वारा अलग किए गए उद्धरणों में शामिल करते हैं। यह डेटा कोई भी स्ट्रिंग हो सकता है जो वेब पेज पर मान्य है। उदाहरण के लिए: डेटा-मुख्य-घटक = "चॉकलेट"।

फिर आप इन डेटा विशेषताओं को अपने इच्छित किसी भी 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 में वह जानकारी आ जाती है, तो आप इसे जावास्क्रिप्ट के साथ एक्सेस कर पाएंगे और उस डेटा के आधार पर पेज में हेरफेर कर सकेंगे।

— shikarii
स्रोत

27

से बूटस्ट्रैप डॉक्स:

<!--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>

— सज्जन
स्रोत

11

बहुत सारे जवाब दिए गए हैं, लेकिन वे इस मुद्दे पर नहीं आते हैं। चलो इसे ठीक करते हैं।

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

इस बिंदु पर

data-HTML5 पार्सर द्वारा शुरू की गई किसी भी विशेषता को पार्स नहीं किया गया है।
बूटस्ट्रैप data-toggleपतन कार्यक्षमता बनाने के लिए विशेषता का उपयोग करता है ।

कैसे उपयोग करें : केवल 2 चरण

class="collapse"उस तत्व में जोड़ें , जिसे #Aआप गिराना चाहते हैं।
जोड़ें data-target="#A"और data-toggle="collapse"।

उद्देश्य: द data-togglediv यदि हम बूटस्ट्रैप का उपयोग करते हैं तो एट्रिब्यूशन (ब्लॉक) को ढहाने / विस्तारित करने के लिए एक नियंत्रण बनाने की अनुमति देता है ।

— अक्षय विजय जैन
स्रोत

5

इस डेटा-विशेषता की उपस्थिति बूटस्ट्रैप को उपयोगकर्ता के इंटरैक्शन पर किसी अन्य तत्व के दृश्य या तार्किक राज्यों के बीच स्विच करने के लिए कहती है।

यह टॉगल-बटन के लिए प्रेस-स्टेट सेट करने के साथ-साथ मोडल्स, टैब कंटेंट, टूलटिप्स और पॉपओवर मेनू दिखाने के लिए उपयोग किया जाता है। यह एक स्पष्ट प्रलेखन के बिना कई मायनों में उपयोग किया जाता है।

— ग्रेगर
स्रोत

5

बूटस्ट्रैप में डेटा-टॉगल का उद्देश्य है ताकि आप एक निश्चित प्रकार के सभी टैग खोजने के लिए jQuery का उपयोग कर सकें। उदाहरण के लिए, आप सभी पॉपओवर टैग में डेटा-टॉगल = "पॉपओवर" डालते हैं और फिर आप उन सभी टैगों को खोजने के लिए और उन्हें आरंभ करने के लिए पॉपओवर () फ़ंक्शन को चलाने के लिए एक JQuery चयनकर्ता का उपयोग कर सकते हैं। आप टैग पर बस क्लास = "myPopover" डाल सकते हैं और एक ही काम करने के लिए .myPopover चयनकर्ता का उपयोग कर सकते हैं। दस्तावेज़ीकरण भ्रमित कर रहा है, क्योंकि इससे यह प्रतीत होता है कि उस विशेषता के साथ कुछ विशेष चल रहा है।

यह

<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>

ठीक काम करता है।

— shawnlg
स्रोत

4

यह एक बूटस्ट्रैप परिभाषित एचटीएमएल 5 डेटा विशेषता है। यह एक घटना के लिए एक बटन बांधता है।

— अमरेंद्र
स्रोत

5

यह बटन और / या घटनाओं तक सीमित नहीं है।

— जौं

मैं क्रोम devtools में बटन के ईवेंट श्रोता को नहीं देखता हूं

— jscripter

2

यहां आप उन मानों के लिए और उदाहरण भी देख सकते data-toggleहैं जिन्हें असाइन किया जा सकता है। बस पृष्ठ पर जाएँ और फिर CTRL+Fखोज करें data-toggle।

— pebox11
स्रोत

2

जावास्क्रिप्ट के भीतर आसानी से DOM तत्व विशेषताओं का उपयोग करने के लिए बूटस्ट्रैप HTML5 मानकों का लाभ उठाता है।

डेटा-*

विशेषताओं की एक श्रेणी बनाता है, जिसे कस्टम डेटा विशेषताएँ कहा जाता है, जो HTML और इसके DOM प्रतिनिधित्व के बीच स्वामित्व वाली सूचनाओं का आदान-प्रदान करने की अनुमति देता है जो स्क्रिप्ट द्वारा उपयोग किया जा सकता है। इस तरह के सभी कस्टम डेटा उस तत्व के HTMLElement इंटरफ़ेस के माध्यम से उपलब्ध होते हैं, जिस पर विशेषता सेट की गई है। HTMLElement.dataset प्रॉपर्टी उन्हें एक्सेस देती है।

संदर्भ

— rel
स्रोत