मुखपृष्ठ » टूलकिट » Mark.js के साथ किसी भी वेबपेज पर सर्च कीवर्ड हाइलाइटिंग जोड़ें

    Mark.js के साथ किसी भी वेबपेज पर सर्च कीवर्ड हाइलाइटिंग जोड़ें

    अधिकांश ब्राउज़र हैं CTRL + F कार्यक्षमता उपयोगकर्ता जो भी खोज रहा है उसे खोजना और खोजना। लेकिन, यह सुविधा मोबाइल उपकरणों पर समर्थित नहीं है और यह गतिशील पाठ का उपयोग करके अच्छी तरह से काम नहीं करता है.

    सौभाग्य से, वहाँ है Mark.js, एक मुफ्त जावास्क्रिप्ट प्लगइन जो एक जोड़ता है हाइलाइट खोज सुविधा किसी भी पृष्ठ पर आसानी के साथ.

    डिफ़ॉल्ट रूप से, यह एक के रूप में काम करता है वेनिला जेएस प्लगइन लेकिन भी चला सकते हैं jQuery के शीर्ष पर. यह पूरी तरह से ओपन-सोर्स प्रोजेक्ट है, इसलिए आप किसी भी वेबसाइट पर इसका उपयोग करने के लिए स्वतंत्र हैं.

    यह किसी भी ब्राउज़र खोज सुविधा की तरह काम करता है, सिवाय इसके कि यह अतिरिक्त उपहार के साथ आता है। आप जोड़ सकते हो अपने स्वयं के कस्टम फ़िल्टर और शब्दों के आधार पर खोजें नियमित अभिव्यक्ति, विशिष्ट पर्यायवाची, और में भी गतिशील पृष्ठ तत्व जैसे कि iframes.

    आरंभ करने के लिए, बस Mark.js फ़ाइल डाउनलोड करें गिटहब से या फ़ाइल को होस्ट करें एक सीडीएन के माध्यम से समय बचाने के लिए.

    आपको यह फ़ंक्शन चलाना चाहिए एक इनपुट क्षेत्र से जुड़ा है पेज पर। इस तरह से उपयोगकर्ता खोज शब्द दर्ज कर सकते हैं और तत्काल प्रतिक्रिया प्राप्त करें हाइलाइट किए गए टेक्स्ट के माध्यम से.

    यहाँ एक है नमूना स्निपेट डेमो पेज से:

     $ ("संदर्भ"))। निशान (कीवर्ड [, विकल्प]); 

    .प्रसंग जहाँ भी फ़ंक्शन होना चाहिए वहां कक्षा लक्ष्य शर्तों के लिए खोज करें. आप उपयोग कर सकते हैं डिफ़ॉल्ट HTML तत्त्व यदि आप पूरे पृष्ठ को खोजने का प्रयास कर रहे हैं, या आप पास कर सकते हैं कई तत्व जैसे कि विभिन्न टैब्ड विगेट्स या आईफ्रेम.

    फिर, अंदर निशान() आप कार्य करें कीवर्ड पास करें, विकल्पों के साथ (यदि आप चाहें).

    यदि आप उपयोगकर्ताओं को कीवर्ड में टाइप करते हैं तो आप कर सकते हैं फ़ंक्शन को ऑटो-अपडेट करें हर कीवर्ड के बाद एक नया कीवर्ड। इस घटना को लक्षित करने के लिए एक विशिष्ट कार्य भी है.

    Mark.js सभी प्रमुख ब्राउज़रों के साथ काम करता है, क्रोम, फ़ायरफ़ॉक्स, ओपेरा (v12 +), और इंटरनेट एक्सप्लोरर (9+) सहित। यदि आप डॉक्स का पालन करते हैं और नवीनतम फाइलों का उपयोग करते हैं तो इसे स्थापित करना आसान है.

    लेकिन, अगर आप देखना चाहते हैं कार्रवाई में निशान एक नज़र रखना नीचे बेला लोरेम इप्सम के कुछ पैराग्राफ को खोजने के लिए एक बहुत ही बुनियादी jQuery डेमो का उपयोग करना.