सामान्य jQuery के टूलटिप्स

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

लेआउट सरल निकला:

<div class="tooltip-wrapper"> <input type="text" class="field"> <div class="valid-message valid-message-js">   </div> </div> 

जैसा कि आप कोड से देख सकते हैं, हमारे पास एक टूलटिप-रैपर ब्लॉक है जो टूलटिप को उस तत्व से जोड़ती है जिस पर टूलटिप को बुलाया जाएगा।
उनकी शैली भी बेहद सरल हैं:

 .tooltip-wrapper{ position: relative; display: inline-block; } 

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

 (function($){ tooltip = function() { this._init = function(element, options) { var defaults = { tooltipElement: $(element), tooltipSide: "right", fix: false }, settings = $.extend(defaults, options); settings.tooltipElement.each(function(i){ if (settings.fix == false) { var tooltipElementHeight = $(this).actual( "outerHeight", { absolute : true } ), tooltipWrapperHeight = $(this).parent(".tooltip-wrapper").actual( "outerHeight", { absolute : true } ), tooltipElementWidth = $(this).actual( "outerWidth", { absolute : true } ), tooltipWrapperWidth = $(this).parent(".tooltip-wrapper").actual( "outerWidth", { absolute : true } ); if (settings.tooltipSide == "left") { $(this).addClass('tooltip-left').css({top:-(tooltipElementHeight/2 - tooltipWrapperHeight/2)}); } else if (settings.tooltipSide == "right"){ $(this).addClass('tooltip-right').css({top:-(tooltipElementHeight/2 - tooltipWrapperHeight/2)}); } else if (settings.tooltipSide == "top"){ $(this).addClass('tooltip-top').css({left: -((tooltipElementWidth - tooltipWrapperWidth)/2)}); } else if (settings.tooltipSide == "bottom"){ $(this).addClass('tooltip-bottom').css({left: -((tooltipElementWidth - tooltipWrapperWidth)/2)}); } } else{ $(document).mousemove(function (pos) { settings.tooltipElement.css({top: pos.clientY+10, left: pos.clientX+10}); }); } }); }; }; // Launch plugin $.fn.tooltip = function( options ){ return this.each(function(){ $( this ).data( "tooltip", new tooltip()._init( this, options ) ); }); }; })(jQuery); 

अब मुझे समझाने की कोशिश करो कि क्या है।
प्लगइन नाम (टूलटिप) द्वारा बुलाया जाएगा और केवल एक पैरामीटर इसमें पारित किया जाएगा - यह एक संकेत के साथ एक ब्लॉक है।

 $('.valid-massege-js').tooltip(); //      -js 

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

 $('.valid-massege-js').tooltip({ tooltipSide: "bottom" }); 

HTML कोड में, जब एक पक्ष को प्रतिस्थापित किया जाता है, तो साइड को चिह्नित करने वाला वर्ग बदल जाएगा (टूलटिप-टॉप / टूलटिप-राइट / टूलटिप-बॉटम / टूलटिप-लेफ्ट)।

 .valid-message.tooltip-left{ right: 100%; margin-right: 10px; } .valid-message.tooltip-right{ left: 100%; margin-left: 10px; } .valid-message.tooltip-top{ bottom: 100%; margin-bottom: 10px; } .valid-message.tooltip-bottom{ top: 100%; margin-top: 10px; } 

इसके अलावा प्लगइन में कर्सर के लिए एक टूलटिप संलग्न करने की क्षमता है, जबकि यह क्षेत्र के ऊपर है। डिफ़ॉल्ट रूप से, यह सुविधा अक्षम है, लेकिन आप इसे आसानी से सक्षम कर सकते हैं:

 $('.valid-message-js').tooltip({ fix: true }); 

और अंत में, काम करने के लिए प्लगइन के लिए, आपको स्वयं jQuery लाइब्रेरी और jquery.actual लाइब्रेरी की आवश्यकता होगी। लेकिन चिंतित मत हो, संकुचित रूप में jquery.actual 1 kb लेता है। और एक बड़ी परियोजना पर, यह अन्य परिदृश्यों के लिए भी काम आ सकता है, क्योंकि यह छिपे हुए तत्वों पर .net () और .height () के साथ मुख्य बग को बंद कर देता है। हम उसे यहां पा सकते हैं।
डेमो देखें