👩🏽‍🏭 🤰🏻 🙏🏾 ओपेरा के लिए एक्सटेंशन: बटन, बैज और पॉप-अप 👨🏼‍⚕️ 👍🏼 🤼

प्रविष्टि

यह आलेख ब्राउज़र पैनल और उनके विभिन्न घटकों पर बटन बनाने और प्रबंधित करने के लिए बुनियादी चरणों का वर्णन करता है।

ब्राउज़र बार पर बटन

विस्तार आपको ओपेरा ब्राउज़र पैनल पर एक बटन लगाने की अनुमति देता है, खोज फ़ील्ड के दाईं ओर। बटन में 18x18 पिक्सल मापने वाला एक आइकन, एक टूलटिप (होवरिंग करते समय दिखाया गया है), एक स्टेटस बैज और एक पॉप-अप विंडो शामिल हो सकता है।

बटन निर्माण

बटन निर्माण कोड को index.html फ़ाइल के स्क्रिप्ट तत्व में जोड़ा जाना चाहिए। इस उदाहरण में, हम लोड घटना की आग लगने पर कोड निष्पादित करते हैं।

पहला कदम बटन के गुणों को निर्धारित करना है। यह ToolbarUIItemProperties ऑब्जेक्ट का उपयोग करके किया जा सकता है। उदाहरण के लिए:

var ToolbarUIItemProperties = { disabled: false, title: " ", icon: "icons/button.png" }

टूलबारUIItemProperties में बटन गुण सेट करने के बाद, आपको createItem विधि का उपयोग करके स्वयं बटन बनाने की आवश्यकता है:

 var theButton = opera.contexts.toolbar.createItem(ToolbarUIItemProperties);

कुल मिलाकर, टूलबारUIItemProperties ऑब्जेक्ट का उपयोग करके, आप 5 गुणों को परिभाषित कर सकते हैं:

विकलांग

निर्धारित करता है कि बटन सक्रिय है या नहीं। डिफ़ॉल्ट मान सत्य (निष्क्रिय) है, एक बूलियन मान लेता है। आप बटन को इस प्रकार निष्क्रिय कर सकते हैं:

 theButton.disabled = true;

शीर्षक

शीर्षक गुण एक टूलटिप सेट करता है जो तब प्रदर्शित होता है जब उपयोगकर्ता कर्सर को बटन पर रखता है।

 theButton.title = " ";

आइकन

आइकन प्रॉपर्टी उस आइकन को सेट करती है जिसका उपयोग बटन द्वारा किया जाता है। यदि आप आकार में 18x18 पिक्सेल के अलावा कोई अन्य चित्र निर्दिष्ट करते हैं, तो यह स्वचालित रूप से छोटा हो जाएगा।

 theButton.icon = "icons/beautiful-toobar-icon.png";

onclick

यह फ़ंक्शन तब कहा जाता है जब उपयोगकर्ता बटन पर क्लिक करता है और क्लिक इवेंट उठाया जाता है।

 theButton.onclick = function(){ /*  - */ };

onremove

जब टूलबार कॉन्टेक्स्ट से बटन को हटा दिया जाता है और हटाए गए इवेंट को उठाया जाता है, तो इस फ़ंक्शन को कहा जाता है।

 theButton.onremove = function(){ /*  - */ };

ब्राउज़र बार में एक बटन जोड़ना

बटन बनाने के बाद, हमें इसे ओपेरा पैनल पर रखना होगा। हम इसे addItem विधि का उपयोग करके करते हैं:

 opera.contexts.toolbar.addItem(theButton);

एक उदाहरण चलाने का प्रयास करें। यह कुछ खास नहीं करता है, क्योंकि आपने अभी तक बटन के लिए कोई कार्रवाई निर्धारित नहीं की है।

ब्राउज़र पैनल से एक बटन हटाना

बटन को निकाले गए ब्राउज़र पैनल से RemoveItem विधि का उपयोग करके हटाया जा सकता है:

 opera.contexts.toolbar.removeItem(theButton);

एक पॉपअप बनाएँ

अब आपके पास एक बटन है, आप चाहते हैं कि यह कुछ करने में सक्षम हो। बटन पर क्लिक करके, एक पॉप-अप विंडो प्रदर्शित हो सकती है। एक पॉपअप निर्दिष्ट चौड़ाई और ऊंचाई के साथ एक खिड़की है। आप इसे उन पृष्ठों में लोड कर सकते हैं जो ऑनलाइन हैं या आपके एक्सटेंशन के साथ वितरित किए गए हैं।

पॉपअप बनाने के लिए, आपको टूलबारUIItemProperties ऑब्जेक्ट का उपयोग करके पॉपअप ऑब्जेक्ट के गुणों को परिभाषित करने की आवश्यकता है:

 var ToolbarUIItemProperties = { disabled: false, title: " ", icon: "icons/button.png", popup: { href: "popup.html", width: 300, height: 300 } }

पॉपअप सामग्री

पॉपअप की सामग्री को निर्दिष्ट करने के लिए href प्रॉपर्टी का उपयोग करें। आप इसके पूर्ण URL का उपयोग कर नेटवर्क के किसी भी पृष्ठ को इंगित कर सकते हैं:

 theButton.popup.href = http://www.opera.com/";

आप उस पृष्ठ को भी लोड कर सकते हैं जो उसके सापेक्ष पते को निर्दिष्ट करके विस्तार के साथ आता है:

 theButton.popup.href = "popup.html";

यह पृष्ठ एक नियमित HTML पृष्ठ हो सकता है, इसमें कोई बदलाव करने की आवश्यकता नहीं है। कृपया ध्यान दें: यदि आप पॉप-अप विंडो के खुलने पर href प्रॉपर्टी बदलते हैं, तो यह बंद हो जाएगी।

पॉपअप आकार

पॉपअप आकार चौड़ाई और ऊंचाई गुणों का उपयोग करके पिक्सेल में निर्दिष्ट किया जाता है:

चौड़ाई

 theButton.popup.width = 300;

ऊंचाई

 theButton.popup.height = 300;

एक पॉपअप विंडो को बटन के रूप में उसी समय बनाया जाएगा जब createItem विधि कहा जाता है।

पॉपअप बटन उदाहरण का प्रयास करें । यदि आपने " ओपेरा के लिए आपका पहला विस्तार " लेख से उदाहरण की कोशिश की, तो यह आपको बहुत परिचित लगेगा।

बिल्ला निर्माण

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

 var ToolbarUIItemProperties = { disabled: false, title: " ", icon: "icons/button.png", badge: { display: "block", textContent: "12", color: "white", backgroundColor: "rgba(211, 0, 4, 1)" } }

बैज में 4 गुण हैं जिन्हें कॉन्फ़िगर किया जा सकता है:

प्रदर्शन

प्रदर्शन गुण बैज दिखाता है और छुपाता है। मान्य मूल्य ब्लॉक और कोई नहीं हैं। डिफ़ॉल्ट मान कोई नहीं है। आप बैज को इस तरह से देख सकते हैं:

 theButton.badge.display = "block";

textContent

बैज टेक्स्ट को टेक्स्ट कॉन्टेंट प्रॉपर्टी के जरिए सेट किया जा सकता है। बैज में पाठ प्रदर्शित करने के लिए एक सीमित स्थान है, इसलिए संक्षिप्त होने का प्रयास करें।

 theButton.badge.textContent = "12";

रंग और पृष्ठभूमि

रंग और पृष्ठभूमि रंग के गुणों ने बैज का पाठ रंग और पृष्ठभूमि रंग निर्धारित किया है। वे हेक्साडेसिमल, आरजीबीए और रंग नामों में मान लेते हैं।

 theButton.badge.color = "white"; theButton.badge.backgroundColor: = "rgba(211, 0, 4, 1)";

आप ओपेरा एक्सटेंशन के लिए उपयोगकर्ता इंटरफ़ेस तत्वों को बनाने और प्रबंधित करने के लिए बैज बटन के उदाहरण की कोशिश कर सकते हैं और विभिन्न तरीकों का पता लगा सकते हैं।

आप विभिन्न वस्तुओं और विधियों के बारे में पूरी जानकारी प्राप्त करने के लिए ओपेरा के एक्सटेंशन एपीआई का उल्लेख कर सकते हैं।

एपीआई लिंक

ToolbarContext ऑब्जेक्ट

ToolbarUIItem ऑब्जेक्ट

ToolbarUIItemProperties ऑब्जेक्ट

पॉपअप ऑब्जेक्ट

बिल्ला वस्तु

ओपेरा के लिए एक्सटेंशन: बटन, बैज और पॉप-अप