Simpletip टूलटिप प्लगइन

JQuery उपकरण टूलटिप, सिंप्लीटिप के प्लस, साथ ही इसके उपयोग की कुछ समस्याओं को हल करने के तरीके के बारे में थोड़ा सा।





कुछ समय पहले तक, मैंने सुविधाजनक और छोटे jQuery के टूल टूलिप प्लगइन का उपयोग किया था , जो मुझे सभी के अनुकूल बनाता था ।

और इसलिए मैंने एक और खोजने का फैसला किया क्योंकि:



1. पाठ टूलटिप में प्रदर्शित होता है, जो उस तत्व की शीर्षक विशेषता में निहित होता है जिसके लिए टूलटिप की आवश्यकता होती है। आप अभी भी निर्माता में टिप विशेषता से गुजर सकते हैं, लेकिन आपको jQuery चयनकर्ता को पास करने की आवश्यकता है, और न केवल पाठ। सामान्य तौर पर, यह बहुत सुविधाजनक नहीं है और बहुत लचीला नहीं है;

2. टूलटिप बनाने के बाद, टेक्स्ट और आम तौर पर टूलटिप की सामग्री को बदलना असंभव है (न तो शीर्षक विशेषता का एक साधारण परिवर्तन, और न ही कंस्ट्रक्टर $('#email').tooltip();



लिए बाद में कॉल $('#email').tooltip();



मदद नहीं करता है)। सामान्य तौर पर, कोई नियमित साधन नहीं है, यह दुख की बात है।



मैंने एक विकल्प की तलाश करने का फैसला किया, क्योंकि मुझे बस मदद पाठ को अपडेट करने की आवश्यकता थी (क्योंकि अजाक्स के माध्यम से सर्वर के साथ बातचीत करना और पृष्ठ अधिभार नहीं है)।



इस तरह के एक SimpleTip प्लगइन यहाँ googled



सुविधाओं से:

1. टूल टूलिप के लिए एक पैक फ़ाइल का वजन 3.3 kB बनाम 3.4 है;

2. कंस्ट्रक्टर $('#email').simpletip({content: 'hello world'});



में टेक्स्ट ट्रांसमिशन $('#email').simpletip({content: 'hello world'});



, आप HTML को वहां भी प्रसारित कर सकते हैं, अर्थात, जो भी आपकी दिल की इच्छा है, उसे प्रदर्शित करें

3. अपडेट के माध्यम से टूलटिप की सामग्री को अपडेट करने की क्षमता update('new content');



, और वास्तव में गतिशील रूप से विभिन्न स्रोतों से लोड किया जा सकता है;

4. अधिक, अधिक सेटिंग्स और टूलटिप्स के व्यवहार को नियंत्रित करने की क्षमता।



केवल अप्रिय बात यह थी कि "यह आपको किसी भी तत्व पर आसानी से टूलटिप बनाने की अनुमति देता है" लेखक के आश्वासन के बावजूद, इनपुट [प्रकार = पाठ] तत्वों के लिए संकेत प्रदर्शित नहीं किए गए थे। फायरबग के साथ पृष्ठ को देखने के बाद, यह पता चला कि प्लगइन तत्व के अंदर एक छिपा हुआ div बनाता है जिसके लिए एक संकेत की आवश्यकता होती है:

1. var टूलटिप = jQuery ( दस्तावेज़। createElement ( 'div' ) )
2. ...
3. । appendTo ( elem ) ;

(कोड में 26 लाइन)।



ठीक है, निश्चित रूप से, इनपुट के अंदर div सही कदम नहीं है। इसलिए, हम appendTo को insertAfter में बदलते हैं , और संकेत इनपुट s के लिए भी मज़ेदार प्रदर्शित करने लगते हैं।



Jqueryui संवादों में प्रदर्शित करने के साथ थोड़ी समस्या भी है। मानक .tooltip वर्ग के अलावा, उन्हें सही ढंग से प्रदर्शित करने के लिए, आपको एक वर्ग बनाने की आवश्यकता है, टूलटिपफोरडिलागबॉक्स कहें , जहां स्थिति को हटाने के लिए : निरपेक्ष; और टूलटिप को संवाद बॉक्स में भी प्रदर्शित किया जाएगा।



और अंत में, यदि आपको संदेश का पाठ बदलने की आवश्यकता है, तो आपको अपडेट विधि का उपयोग करने की आवश्यकता है, क्योंकि टूलटिप पहले ही बनाया जा चुका है। यह निर्धारित करने के लिए कि क्या यह पहले से मौजूद है, मैंने इस निर्माण का उपयोग किया:

1. अगर ( $ ( '#edit' ) अगला ( ) । है ।क्लास ( 'टूलटिपफोरडियलयोगबॉक्स' ) )
2. {
3. var टिप = $ ( '#edit' ) । eq (को ० ) । simpletip ( ) ;
4. टिप। अद्यतन ( 'नई सामग्री' ) ;
5. }
6. अन्यथा
7. {
8. $ ( '#edit' )
9. । सिंपलिप्ट ( {
10. सामग्री : 'पहली सामग्री' ,
11. baseClass : 'tooltipForDialogBox'
12. } ;
13. }

प्लगइन पेज में एक अच्छा एपीआई और डेमो है।



मुझे आशा है कि कोई व्यक्ति पोस्ट को उपयोगी पाएगा और उसे समय बचाएगा ताकि मुझे अपने खर्च के लिए खेद न हो)