एचटीएमएल 5 मीटर [गाइड] का उपयोग करना और स्टाइल करना

यदि आप HTML प्रगति बार से परिचित हैं, जो दर्शाता है कि किसी गतिविधि का कितना प्रदर्शन किया गया है, तो आप पाएंगे कि मीटर तत्व समान है - दोनों अधिकतम मान से वर्तमान मूल्य दिखाएं. लेकिन प्रगति बार के विपरीत, मीटर बार का उपयोग प्रगति दिखाने के लिए नहीं किया जाना है.

यह एक दिखाने के लिए प्रयोग किया जाता है एक विशिष्ट श्रेणी में स्थिर मूल्य, उदाहरण के लिए आप एक डिस्क स्टोरेज में उपयोग किए गए स्टोरेज स्पेस को दर्शा सकते हैं कि स्टोरेज स्पेस कितना भरा है और कितना नहीं है.

इसके शीर्ष पर, मीटर तत्व का उपयोग इसकी सीमा के भीतर तीन क्षेत्रों तक कल्पना करने के लिए भी किया जा सकता है। भंडारण स्थान के उदाहरण का पुन: उपयोग करना, केवल यह दिखाने के बजाय कि कितना स्थान घेर लिया गया है, आप नेत्रहीन यह भी संकेत कर सकते हैं कि क्या कब्जा किया हुआ स्थान केवल भरा हुआ है (30% से नीचे कहते हैं) या पूर्ण आधा (30 से 60% के बीच) या उससे अधिक विभिन्न रंगों का उपयोग करके आधा पूर्ण (60% से ऊपर). यह उपयोगकर्ताओं को यह जानने में मदद करता है कि वे भंडारण सीमा तक कब पहुँच रहे हैं.

इस पोस्ट में, हम आपको दिखाएंगे कैसे मीटर पट्टी शैली के लिए उल्लिखित दोनों उद्देश्यों के लिए अर्थात् a साधारण गेज (कोई संकेत क्षेत्रों के साथ) और 3 रंग संकेत क्षेत्रों के साथ गेज के दो उदाहरण हैं। बाद के लिए, हम काम करेंगे "चिह्न" गेज बनाना गरीब, औसत और अच्छे अंक दिखाने के लिए, और एक "पीएच" गेज अम्लीय, तंत्रिका और क्षारीय पीएच मान दिखाने के लिए.

गुण

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

• मूल्य - का मूल्य मीटर तत्त्व
• मिनट - मीटर की सीमा का न्यूनतम मूल्य
• अधिकतम - मीटर की सीमा का अधिकतम मूल्य
• कम - कम सीमा मूल्य को इंगित करता है
• उच्च - उच्च सीमा मूल्य को इंगित करता है
• अनुकूलतम - रेंज में इष्टतम बिंदु

1. स्टाइलिंग एक साधारण गेज

यहाँ केवल एक विशेषता का उपयोग करके एक बहुत ही सरल उदाहरण दिया गया है, मूल्य. इससे पहले कि हम आगे बढ़ें, हमें पहले तीन चीजों को जानना होगा:

(1) एक डिफ़ॉल्ट है मिनट तथा अधिकतम मान की सीमा को परिभाषित करता है मीटर, जो क्रमशः 0 और 1 है. (2) यदि उपयोगकर्ता निर्दिष्ट मूल्य भीतर गिरता नहीं है मीटर रेंज, यह या तो का मूल्य ले जाएगा मिनट या अधिकतम, जो भी इसके सबसे करीब है. (3) एंडिंग टैग अनिवार्य है.

यहाँ वाक्य रचना है:

 0.5 

वैकल्पिक रूप से, हम भी जोड़ सकते हैं मिनट तथा अधिकतम विशेषताएं इस प्रकार एक उपयोगकर्ता परिभाषित सीमा प्रदान करती हैं:

2. स्टाइलिंग "मार्क्स" गेज

सबसे पहले, हमें सीमा को तीन क्षेत्रों (बाएं / निम्न, मध्य, दाएं / उच्च) में विभाजित करने की आवश्यकता है। यह हैं कम तथा उच्च विशेषताएँ खेल में आती हैं। इस प्रकार तीन क्षेत्रों को विभाजित किया जाता है.

तीन क्षेत्रों के बीच बनते हैं मिनट और कम , कम और उच्च तथा उच्च और अधिकतम.

अब यह स्पष्ट है कि कुछ शर्तें हैं कम तथा उच्च तीन क्षेत्रों के गठन के लिए मूल्यों का पालन करना चाहिए:

• कम से कम नहीं हो सकता मिनट और से अधिक है उच्च और अधिकतम
• उच्च से बड़ा नहीं हो सकता अधिकतम और से कम है कम और मिनट.
• और जब एक मापदंड दोनों टूट जाता है कम तथा उच्च मापदंड में अन्य चर के मूल्य पर ले जाएगा जो संतुष्ट नहीं है, अर्थात् यदि कम से कम पाया जाता है मिनट यह नहीं होना चाहिए, कम मिल जाएगा मिनट मूल्य.

इस उदाहरण में, हम अपने तीन क्षेत्रों को बाएं से दाएं पर विचार करेंगे:

• गरीब: (0-33)
• औसत: (34-60)
• अच्छा: (61-100)

इसलिए, निम्नलिखित विशेषताओं के लिए मूल्य हैं; मिनट = "0" कम = "34" उच्च = "60" अधिकतम = "100".

यहाँ क्षेत्रों की कल्पना करने वाली एक छवि है.

भले ही अभी हमने जो मीटर बनाया है, उसमें तीन क्षेत्र हैं, यह इस समय केवल दो रंगों में केवल दो प्रकार के क्षेत्रों को इंगित करेगा। क्यूं कर? इसलिये अनुकूलतम मध्य क्षेत्र में है.

इष्टतम बिंदु

जो भी क्षेत्र में (तीन में से) अनुकूलतम बिंदु गिरता है, इसे डिफ़ॉल्ट रूप से "इष्टतम क्षेत्र" रंगीन हरा माना जाता है। इसके ठीक बगल वाले क्षेत्र को "उप-इष्टतम क्षेत्र" कहा जाता है और यह रंगीन नारंगी है। सबसे दूर का एक "नॉट-ऑफ-द-ए-इष्टतम क्षेत्र" है, जो लाल रंग का है.

अब तक हमारे उदाहरण में हमने इसके लिए कोई मान नहीं दिया है अनुकूलतम. इसलिए, डिफ़ॉल्ट मान 50 हो जाता है, जिससे मध्य क्षेत्र "इष्टतम क्षेत्र" और उसके ठीक बगल में (बाएं और दाएं दोनों) "उप-इष्टतम क्षेत्र" बन जाता है.

उपरोक्त मामले में संक्षेप में, किसी भी मूल्य के लिए मीटर तत्व जो मध्य क्षेत्र में आता है वह हरे रंग से इंगित होता है; बाकी नारंगी.

यही हम नहीं चाहते। हम इसे इस तरह से रंगीन करना चाहते हैं: गरीब (लाल), औसत (नारंगी), अच्छा (हरा)

चूंकि सही क्षेत्र को हमारा इष्टतम क्षेत्र माना जाता है, हम देंगे अनुकूलतम एक मान जो सही क्षेत्र में आएगा (61-100 के बीच कोई भी मूल्य, जिसमें 61 और 100 शामिल हैं).

हम इस उदाहरण के लिए 90 ले रहे हैं। यह सही-क्षेत्र को "इष्टतम" बना देगा, मध्य (इसके तत्काल अगले क्षेत्र) "उप-इष्टतम" और दूर के हिस्से को "नहीं-बहुत-से-इष्टतम" क्षेत्र बना देगा।.

यही हमारे गेज पर मिलेगा.

2. स्टाइलिंग "पीएच" गेज

सबसे पहले, पीएच मानों पर एक राहत। एक अम्लीय घोल का pH 7 से कम होता है, एक क्षारीय घोल का pH 7 से अधिक होता है और यदि आप 7 पर उतरते हैं, तो यह एक तटस्थ विलयन है।.

इस प्रकार, हम निम्नलिखित मूल्यों और विशेषताओं का उपयोग करेंगे:

कम = "7" , उच्च = "7", अधिकतम = "14", और यह मिनट शून्य का डिफ़ॉल्ट मान लेगा.

कोड को पूरा करने के लिए बाकी विशेषताओं को जोड़ने से पहले हम रंगों पर निर्णय लेते हैं: अम्लीय (लाल), तटस्थ (सफेद) और क्षारीय (नीला)। आइए हम अम्लीय क्षेत्र (7 से नीचे वाला क्षेत्र) को भी "इष्टतम" मानें

यहां सीएसएस छद्म तत्व हैं जिन्हें हम वांछित दृश्य प्राप्त करने के लिए लक्षित करेंगे फ़ायरफ़ॉक्स. (वेबकिट मीटर छद्म तत्वों और अधिक के लिए, "संदर्भ" के तहत सूचीबद्ध लिंक देखें।)

 .ph_meter पृष्ठभूमि: lightgrey; चौड़ाई: 300 पीएक्स;  .ph_meter: -मोज़-मीटर-इष्टतम :: - moz-meter-bar पृष्ठभूमि: भारतीय;  .ph_meter: -moz-मीटर-उप-इष्टतम :: - moz-meter-bar पृष्ठभूमि: antiquewhite;  .ph_meter: -moz-मीटर-उप-उप-इष्टतम :: - moz-meter-bar पृष्ठभूमि: Steelblue;  

यहाँ पूरा html कोड और pH गेज का अंतिम परिणाम है.

संदर्भ

• एचटीएमएल 5 मीटर डब्ल्यू 3 सी कल्पना
• वेबकिट छद्म तत्वों और वर्गों की सूची
• विक्रेता विशिष्ट छद्म तत्वों की सूची

Hongkiat पर अधिक: HTML5 के साथ बनाना और स्टाइलिंग प्रगति बार