टैग meter

टैग meter का उपयोग किसी मान को सुंदर ढंग से प्रदर्शित करने के लिए किया जाता है।

टैग की उपस्थिति आंशिक रूप से या पूरी तरह से भरी हुई एक पट्टी जैसी होती है। पट्टी हरी, पीली या लाल हो सकती है (पट्टी का रंग विशेषताओं के मानों पर निर्भर करता है, इसके बारे में नीचे बताया जाएगा):

टैग meter का उपयोग, उदाहरण के लिए, निम्नलिखित स्थिति में करना चाहिए: आप वर्तमान तापमान का मान स्क्रीन पर प्रदर्शित करना चाहते हैं, जबकि तापमान 0 से 100 तक बदल सकता है। आपको निम्नलिखित विशेषताएं निर्दिष्ट करनी चाहिए: विशेषता value को वर्तमान तापमान का मान दर्शाना चाहिए, विशेषता min - न्यूनतम संभव मान (हमारे मामले में 0), विशेषता max - अधिकतम संभव (हमारे मामले में 100)।

विशेषता value के मान के आधार पर पट्टी छोटी या बड़ी होगी। यदि value का मान 10 निर्दिष्ट किया जाए, तो पट्टी छोटी होगी (क्योंकि 10 न्यूनतम - शून्य के बहुत करीब है), यदि मान 90 निर्दिष्ट किया जाए, तो पट्टी बड़ी होगी (क्योंकि 90 अधिकतम - 100 के करीब है)। यदि मान 100 निर्दिष्ट किया जाए - तो पट्टी पूरे तत्व को घेर लेगी (क्योंकि मान अधिकतम तक पहुँच गया है)।

यदि 100 से अधिक मान निर्दिष्ट किया जाए, तो पट्टी फिर भी पूरे तत्व को घेरेगी। यदि 0 या उससे कम निर्दिष्ट किया जाए - तो पट्टी बिल्कुल नहीं दिखेगी।

उदाहरण

विशेषता value का मान छोटा:

html<meter value="10" min="0" max="100"></meter>

Результат:

उदाहरण

विशेषता value का मान बड़ा:

html<meter value="90" min="0" max="100"></meter>

Результат:

उदाहरण

विशेषता value का मान मध्यम:

html<meter value="50" min="0" max="100"></meter>

Результат:

उदाहरण

विशेषता value का मान अधिकतम के बराबर:

html<meter value="100" min="0" max="100"></meter>

Результат:

उदाहरण

विशेषता value का मान न्यूनतम के बराबर:

html<meter value="0" min="0" max="100"></meter>

Результат:

उदाहरण

विशेषता value का मान अधिकतम से अधिक:

html<meter value="110" min="0" max="100"></meter>

Результат:

उदाहरण

विशेषता value का मान न्यूनतम से कम:

html<meter value="-10" min="0" max="100"></meter>

Результат:

विशेषताएँ low और high जोड़ना

टैग meter में 2 और विशेषताएँ हैं: low और high।

आइए तापमान के उदाहरण पर इनके काम को देखें। याद रखें, कि हमारा न्यूनतम तापमान 0 है, और अधिकतम - 100 है। अब मान लें कि हम निम्नलिखित रेंज बनाना चाहते हैं - "ठंडा तापमान" 0 से 20 तक, "सामान्य" 20 से 80 तक और "गर्म" 80 से 100 तक।

ठंडा तापमान निर्धारित करने के लिए, हम विशेषता low का मान संख्या 20 निर्दिष्ट करेंगे। ऐसा होगा कि शून्य (यह विशेषता min का मान है) से 20 (विशेषता low का मान) तक हमारे पास कम मानों का क्षेत्र है।

गर्म तापमान निर्धारित करने के लिए, हम विशेषता high का मान संख्या 80 निर्दिष्ट करेंगे। ऐसा होगा कि 80 (यह विशेषता high का मान है) से 100 (विशेषता max का मान) तक हमारे पास उच्च मानों का क्षेत्र है।

सामान्य तापमान 20 (यह विशेषता low का मान है) से 80 (विशेषता high का मान) तक होगा। इस क्षेत्र को सामान्य मानों का क्षेत्र कहेंगे।

अब, इस बात के आधार पर कि विशेषता value का मान किस क्षेत्र में आता है, पट्टी हरे या पीले रंग में रंगी जाएगी। हरा रंग तब होगा जब हम सामान्य मानों के क्षेत्र में हों, और पीला - जब उच्च या निम्न मानों के क्षेत्र में हों।

उदाहरण

विशेषता value का मान निम्न मानों के क्षेत्र में आता है:

html<meter value="10" min="0" low="20" high="80" max="100"></meter>

Результат:

उदाहरण

विशेषता value का मान सामान्य मानों के क्षेत्र में आता है:

html<meter value="50" min="0" low="20" high="80" max="100"></meter>

Результат:

उदाहरण

विशेषता value का मान उच्च मानों के क्षेत्र में आता है:

html<meter value="90" min="0" low="20" high="80" max="100"></meter>

Результат:

विशेषता optimum जोड़ना

विशेषता optimum इष्टतम मान निर्धारित करती है। हमारे उदाहरण के लिए इष्टतम ठंडा तापमान, सामान्य या गर्म हो सकता है - आपकी पसंद के अनुसार। मान लें, कि आप निर्दिष्ट करते हैं कि इष्टतम तापमान ठंडा है। अब, विशेषता value के मान के आधार पर (यानी वर्तमान तापमान के आधार पर) पट्टी का रंग हरा, पीला या लाल होगा।

यदि वर्तमान तापमान इष्टतम तापमान के क्षेत्र में आता है (और हमने निर्दिष्ट किया है कि इष्टतम - ठंडा है), तो पट्टी का रंग हरा होगा। यदि वर्तमान तापमान इष्टतम के बगल वाले रेंज में आता है (हमारे मामले में यह सामान्य तापमान है), तो पट्टी पीली हो जाएगी। यदि वर्तमान तापमान इष्टतम के बगल वाले रेंज में नहीं आता है (हमारे मामले में यह गर्म तापमान है), तो पट्टी लाल हो जाएगी।

इसी तरह सब कुछ होगा, यदि इष्टतम तापमान के रूप में गर्म तापमान निर्दिष्ट किया जाए। इस स्थिति में, यदि वर्तमान तापमान गर्म तापमान के क्षेत्र में आता है - पट्टी होगी हरी, यदि सामान्य क्षेत्र में आता है - पीली, यदि ठंडे क्षेत्र में - लाल।

यदि इष्टतम के रूप में सामान्य तापमान निर्दिष्ट किया जाए, तो पट्टी केवल हरी हो सकती है (यदि वर्तमान तापमान सामान्य में आता है) या पीली (यदि वर्तमान तापमान सामान्य तापमान के बगल वाले रेंज में आता है, जो कि गर्म या ठंडा है)।

यह निर्दिष्ट करने के लिए कि कौन सा रेंज इष्टतम है, विशेषता optimum के मान के रूप में उस रेंज की कोई भी संख्या निर्दिष्ट करनी होगी।

नीचे दिए गए उदाहरणों में विशेषता optimum का मान निम्न मानों के क्षेत्र में आता है (यानी ठंडे तापमान)।

उदाहरण

विशेषता value का मान निम्न मानों के क्षेत्र में आता है:

html<meter value="10" min="0" low="20" high="80" max="100" optimum="10"></meter>

Результат:

उदाहरण

विशेषता value का मान सामान्य मानों के क्षेत्र में आता है:

html<meter value="50" min="0" low="20" high="80" max="100" optimum="10"></meter>

Результат:

उदाहरण

विशेषता value का मान उच्च मानों के क्षेत्र में आता है:

html<meter value="90" min="0" low="20" high="80" max="100" optimum="10"></meter>

Результат:

नीचे दिए गए उदाहरणों में विशेषता optimum का मान उच्च मानों के क्षेत्र में आता है (यानी गर्म तापमान)।

उदाहरण

विशेषता value का मान निम्न मानों के क्षेत्र में आता है:

html<meter value="10" min="0" low="20" high="80" max="100" optimum="90"></meter>

Результат:

उदाहरण

विशेषता value का मान सामान्य मानों के क्षेत्र में आता है:

html<meter value="50" min="0" low="20" high="80" max="100" optimum="90"></meter>

Результат:

उदाहरण

विशेषता value का मान उच्च मानों के क्षेत्र में आता है:

html<meter value="90" min="0" low="20" high="80" max="100" optimum="90"></meter>

Результат:

नीचे दिए गए उदाहरणों में विशेषता optimum का मान सामान्य मानों के क्षेत्र में आता है (यानी सामान्य तापमान)।

उदाहरण

विशेषता value का मान निम्न मानों के क्षेत्र में आता है:

html<meter value="10" min="0" low="20" high="80" max="100" optimum="50"></meter>

Результат:

उदाहरण

विशेषता value का मान सामान्य मानों के क्षेत्र में आता है:

html<meter value="50" min="0" low="20" high="80" max="100" optimum="50"></meter>

Результат:

उदाहरण

विशेषता value का मान उच्च मानों के क्षेत्र में आता है:

html<meter value="90" min="0" low="20" high="80" max="100" optimum="50"></meter>

Результат:

पुराने ब्राउज़र

पुराने ब्राउज़र टैग meter को सुंदर रूप में नहीं दिखा पाएंगे और इसके बजाय टैग की सामग्री प्रदर्शित करेंगे:

html<meter value="10" min="0" max="100">यह टेक्स्ट पुराने ब्राउज़र में दिखाई देगा।</meter>

Результат:

विशेषताएँ

विशेषताओं का मान भिन्नात्मक और ऋणात्मक संख्या हो सकता है।

यह भी देखें